前端基本功:JS必记知识点+案例(六)时钟

时钟案例

时钟

分两步进行的。
第一步: 要得到现在的 时 分 秒
但是这里面有一个小玄机 。
比如现在是 9点整 时针指向 9 是没错的
但是如果现在是 9点半 时针应该指向的是 9到10 之间 才对
所以,我们不但要得到现在的小时 ,还要得到 已经过去了多少分

ms = date.getMilliseconds(); // 现在的毫秒数
s = date.getSeconds() + ms / 1000;  //  得到秒 1.3 s
m = date.getMinutes() + s / 60;  //  得到的是分数  45.6分钟
h = date.getHours() % 12 + m / 60 ;

旋转角度原理
秒针 一秒 走多少度呢 ?
一圈 360 ° 一共有 60 秒 每秒 6 °
分针 一圈 360 一圈走 60次 每次 6° 每分钟 6°
时针 一圈 360 一共 12 个 表盘没有24小时 每个小时 走 30°

完整代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .clock {
            width: 600px;
            height: 600px;
            margin:50px auto;
            background: url(images/clock.jpg) no-repeat;
            position: relative;
        }
        .clock div {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            
        }
        .h {
            background: url(images/hour.png) no-repeat center center;
        }
        .m {
            background: url(images/minute.png) no-repeat center center;
        }
        .s {
            background: url(images/second.png) no-repeat center center;
        }

    </style>
</head>
<body>
<div class="clock">
    <div class="h" id="hour"></div>
    <div class="m" id="minute"></div>
    <div class="s" id="second"></div>
</div>
</body>
</html>
<script>
  var hour = document.getElementById("hour");
  var minute = document.getElementById("minute");
  var second = document.getElementById("second");
    // 开始定时器
   var s = 0,m = 0, h = 0, ms = 0;
    setInterval(function() {
          // 内容就可以了
        var date = new Date();  // 得到最新的时间
        ms = date.getMilliseconds(); // 现在的毫秒数
        s = date.getSeconds() + ms / 1000;  //  得到秒 1.3 s
        m = date.getMinutes() + s / 60;  //  得到的是分数  45.6分钟
        h = date.getHours() % 12 + m / 60 ;
        //console.log(h);
        //旋转角度
       // 一圈  360 °     一共有 60 秒       每秒  6 °   现在是 s秒
        second.style.WebkitTransform = "rotate("+ s*6 +"deg)";
                     //  变化            旋转    deg  度
        minute.style.WebkitTransform = "rotate("+ m*6 +"deg)";
        hour.style.WebkitTransform = "rotate("+ h*30 +"deg)";
        second.style.MozTransform = "rotate("+ s*6 +"deg)";
                     //  变化            旋转    deg  度
        minute.style.MozTransform = "rotate("+ m*6 +"deg)";
        hour.style.MozTransform = "rotate("+ h*30 +"deg)";
    },1000);


</script>

按钮不可用

button 不可以用 disabled 不可用的意思

btn.disabled = “disabled” || btn.disabled = true;

灰色的即为不可用

注意:
1.因为 button是个双标签 所以要更改他的值, 使用 innerHTML 的,不是value。
2.关闭定时器 clearInterval(定时器名称); 定时器不再进行

this

this 指向的是 事件的调用者 ,或者是函数的使用者。


一般情况下,我们喜欢 var that = this;

var that = this;  // 把 btn 对象 给 that  var _this = this;

** 案例:点击倒计时**

点击倒计时
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="text"/>
<button id="btn">点击发送短信</button>
</body>
</html>
<script>
    var btn = document.getElementById("btn");
    var count = 5;  // 数据的 5
    var timer = null; // 定时器的名字
    btn.onclick = function() {
        clearInterval(timer);  // 先清除掉原来的定时器
        // alert(11);
        this.disabled = true;
         //alert(this);  // this 指向的是 btn
        var that = this;  // 把 btn 对象 给 that  var _this = this;
        timer = setInterval(sendTextMessage,1000);  // 开启定时器 名字  timer
        function sendTextMessage() {
            count--;
        //this.innerHTML = "还剩余"+count+"秒";
           // alert(this); // this 指向的是 定时器  window
            //alert(that);
            if(count >= 0 )
            {
                that.innerHTML =  "还剩余"+count+"秒";
            }
            else
            {
                that.innerHTML = "重新发送短信";
                that.disabled = false;
                clearInterval(timer);  // 清除定时器
                count = 5;
            }


        }

    }
</script>

定时器之 setTimeout()

时间去哪儿了

setTimeout(“函数”, 时间 )

setInterval(fn,5000); 每隔 5秒钟,就去执行函数fn一次
setTimeout(fn,5000); 5秒钟之后,去执行 fn 函数, 只执行一次

案例:5秒后自动关闭广告

5秒后自动关闭广告.gif

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        img {
            position: absolute;
            top: 0;

        }
        #left {
            left: 0;
        }
        #right {
            right: 0;
        }
    </style>
</head>
<body>
<img src="1.gif" alt="" id="left"/>
<img src="2.gif" alt="" id="right"/>

<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
</body>
</html>
<script>
     function $(id) { return document.getElementById(id);}  // id函数
     function hide(id) {   // 隐藏函数
         $(id).style.display = "none";
     }
     function show(id) {
         $(id).style.display = "block";
     }
     setTimeout(closeAd,5000);
     function closeAd() {
         hide("left");
         hide("right");
     }
</script>
深层次的看待定时器区别

setInterval是排队执行的

假如 间隔时间是1秒, 而执行的程序的时间是2秒 上次还没执行完的代码会排队, 上一次执行完下一次的就立即执行, 这样实际执行的间隔时间为2秒

setTimeout 是延迟执行的

延迟时间为1秒执行, 要执行的代码需要2秒来执行,那这段代码上一次与下一次的执行时间为3秒

5秒钟自动跳转页面

5s跳转

知识点

BOM

JS 页面跳转: window.location.href = ”http://www.itcast.cn” ;

递归调用

函数自己调用自己的过程 我们称之为 : 递归调用

递归调用

但是这样用,一定要加一个退出 if 的条件,不然成为死循环了。
目的就是为了,模拟使用 settimeout 来实现setinterval 的效果。

arguments 对象

function fn(a,b,c) { console.log(a+b+c); alert(arguments.length;)}
fn(1,3,4,6);
arguments.length; 返回的是 实参的个数 ,这里是4。
但是这个对象有讲究,他只在正在使用的函数内使用。

arguments.callee;
返回的是正在执行的函数。 也是在函数体内使用。 在使用函数递归调用时推荐使用arguments.callee代替函数名本身。

案例完整代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="demo"></div>
</body>
</html>
<script>
    var demo = document.getElementById("demo");
    var count = 5;
    var speed = 1000;
    setTimeout(goIndexPage,speed);  //  1秒钟之后去执行  goIndexPage这个函数
    function goIndexPage() {
        //alert(arguments.callee);
        count--;
        demo.innerHTML = "<a href='http://www.baidu.com'>本页面将在第"+count+"秒钟之后跳转页面</a>";
        if(count <= 0)
        {
            // 如果 count 小于 0 就到了时间了   我们应该跳转页面
             window.location.href = "http://www.baidu.com";
        }
        else
        {
            setTimeout(arguments.callee,speed);  //  递归调用  自己调用自己
        }
    }
</script>

备注:案例的素材
链接:http://pan.baidu.com/s/1dFl2pK9 密码:q53d

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,312评论 5 473
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,578评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,337评论 0 333
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,134评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,161评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,303评论 1 280
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,761评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,421评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,609评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,450评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,504评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,194评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,760评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,836评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,066评论 1 257
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,612评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,178评论 2 341

推荐阅读更多精彩内容