其他分享
首页 > 其他分享> > 夜光带你走进 前端工程师(四十 jS )

夜光带你走进 前端工程师(四十 jS )

作者:互联网

夜光序言:

 

 

 

她只有我了

我若是不等她 谁会等她

我若是不守护她 谁会守护她

 

 

 

 

 

正文:

倒计时 

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            font-size:30px;
            text-align: center;
            color:red;
        }
    </style>
    <script>
        window.onload = function(){
            var demo = document.getElementById("demo");
            var endTime = new Date("2015/12/12 17:30:00"); // 最终时间
            setInterval(clock,1000); // 开启定时器
            function clock(){
                var nowTime = new Date(); // 一定是要获取最新的时间
                //  console.log(nowTime.getTime());  获得自己的毫秒
                var second = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);
                // 用将来的时间毫秒 -  现在的毫秒  / 1000 得到的 还剩下的秒  可能处不断 取整
               // console.log(second);
                 // 一小时 3600 秒
                // second / 3600  一共的小时数  /24   天数
                var d = parseInt(second / 3600 / 24);  //天数
                //console.log(d);
                var h = parseInt(second / 3600  % 24)  // 小时
               // console.log(h);
                var m = parseInt(second / 60 );
                //console.log(m);
                var s = parseInt(second ); // 当前的秒
                console.log(s);
               /* if(d<10)
                {
                    d = "0" + d;
                }*/
                d<10 ? d="0"+d : d;
                h<10 ? h="0"+h : h;
                m<10 ? m="0"+m : m;
                s<10 ? s="0"+s : s;
                demo.innerHTML = "距离抢购时间还剩: "+d+"天 "+h+"小时 "+m+"分钟 "+s+"秒";

            }


        }
    </script>
</head>
<body>
<div id="demo"></div>
</body>
</html>

 


 

好比,今年你多大了  ?   

 2015  -   1990          25     

我们要计算的 倒计时   

有一个最终时间      12月12日

有一个现在时间      11月 13日

倒计时 =  用 将来的时间  -   现在的时间  

问题:    用 毫秒减去      现在距离 1970年1    

                           将来时间 距离 1970 毫秒数  

用将来的毫秒数 -  现在的毫秒数   不断转换就可以了

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            font-size:30px;
            text-align: center;
            color:red;
        }
    </style>
    <script>
        window.onload = function(){
            var demo = document.getElementById("demo");
            var endTime = new Date("2015/12/12 17:30:00"); // 最终时间
            setInterval(clock,1000); // 开启定时器
            function clock(){
                var nowTime = new Date(); // 一定是要获取最新的时间
                //  console.log(nowTime.getTime());  获得自己的毫秒
                var second = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);
                // 用将来的时间毫秒 -  现在的毫秒  / 1000 得到的 还剩下的秒  可能处不断 取整
               // console.log(second);
                 // 一小时 3600 秒
                // second / 3600  一共的小时数  /24   天数
                var d = parseInt(second / 3600 / 24);  //天数
                //console.log(d);
                var h = parseInt(second / 3600  % 24)  // 小时
               // console.log(h);
                var m = parseInt(second / 60  % 60);
                //console.log(m);
                var s = parseInt(second % 60); // 当前的秒
                console.log(s);
               /* if(d<10)
                {
                    d = "0" + d;
                }*/
                d<10 ? d="0"+d : d;
                h<10 ? h="0"+h : h;
                m<10 ? m="0"+m : m;
                s<10 ? s="0"+s : s;
                demo.innerHTML = "距离抢购时间还剩: "+d+"天 "+h+"小时 "+m+"分钟 "+s+"秒";
            }
        }
    </script>
</head>
<body>
<div id="demo"></div>
</body>

 

 

 


 

定义自己的日子 

  var endTime = new Date(“2015/12/12”);  

  如果date 括号里面写日期  就是 自己定义的时间  

  如果 date括号里面不写日期 , 就是当前时间 。

  new Date(“2015/12/12 17:30:00”);

  日期和时分秒中间 有空格隔开  

  

 


 

 

 

​​​​​​​复习

 

   1. 节点        网页是有很多的节点组成的  。  

   元素节点   指的是 :  标签     li  span     

   文本节点      属性节点    

   父子兄弟    父    parentNode        nextSibling    

   孩子    childNodes        nodeType == 1  来判断 是否是 元素节点

   <ul>

      <li>

   最喜欢用的  children    只得到   元素节点    

  1.获取节点属性    getAttribute(“title”)

  2.设置节点属性    setAttribute (“class”,”one”)

  3.删除节点属性    removeAttribute(“title”);

  4. 日期函数   Date();  

    声明:  var  date = new Date();    

    使用:  得到现在的年分    date.getFullYear();  

            月份:  date.getMonth();  

            日子;  date.getDate();    

            星期:  date.getDay();  

   5. 定时器

      定时器  不需要人工操作   按照一定的时间进行某种动作。

     setInterval(“函数”,间隔时间 )   每隔 n秒去执行一次函数

 

 

​​​​​​​ 时钟案例

 

分两步进行的。

第一步:  要得到现在的 时 分 秒   

但是这里面有一个小玄机 。  

  比如现在是 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°
 完整代码:
1   <script>
2    var hour = document.getElementById("hour");
3    var minute = document.getElementById("minute");
4    var second = document.getElementById("second");
5      // 开始定时器
6     var s = 0,m = 0, h = 0, ms = 0;
7      setInterval(function() {
8            // 内容就可以了
9          var date = new Date();  // 得到最新的时间
10          ms = date.getMilliseconds(); // 现在的毫秒数
11          s = date.getSeconds() + ms / 1000;  //  得到秒 1.3 s
12          m = date.getMinutes() + s / 60;  //  得到的是分数  45.6分钟
13          h = date.getHours() % 12 + m / 60 ;
14          // console.log(h);
15          // 旋转角度
16         // 一圈  360 °     一共有 60 秒       每秒  6 °   现在是 s秒
17          second.style.WebkitTransform = "rotate("+ s*6 +"deg)";
18                       //  变化            旋转    deg  度
19          minute.style.WebkitTransform = "rotate("+ m*6 +"deg)";
20          hour.style.WebkitTransform = "rotate("+ h*30 +"deg)";
21          second.style.MozTransform = "rotate("+ s*6 +"deg)";
22                       //  变化            旋转    deg  度
23          minute.style.MozTransform = "rotate("+ m*6 +"deg)";
24          hour.style.MozTransform = "rotate("+ h*30 +"deg)";
25  
26      },30);
27  </script>

 

 

 

 

标签:12,console,log,second,jS,date,四十,var,夜光
来源: https://blog.csdn.net/weixin_41987706/article/details/90717283