js-day11

作者: Rosemarry丶 | 来源:发表于2017-12-06 20:49 被阅读0次

A.我今天学了什么

1.定时器

js 定时器有以下两个方法:
setInterval() :按照指定的周期(以毫秒计)来调用函数或计算表达式。方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
setTimeout() :在指定的毫秒数后调用函数或计算表达式。

语法
setInterval(code,millisec,lang)
参数  描述
code    必需。要调用的函数或要执行的代码串。
millisec    必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。
lang    可选。 JScript | VBScript | JavaScript

例子:<body>


<button>清除定时器</button>
<button>开启定时器</button>
    <script type="text/javascript">



    // fn()   window 让函数执行

    // btn.onclick  btn 点击之后让函数执行


    //  定时器   给定时间之后 执行


        // 给定时间之后 执行一次
    // setTimeout(function(){
    //     console.log(1)
    //     console.log(this)  //this 也是指向window
    // }, 3000)


    // setTimeout(fn, 3000) //不加括号


    function fn(){
        console.log(1)
        console.log(this)
    }
    // 

     // 给定时间 重复执行
     // 

     // setInterval(fn, 2000)


     /*--------开启定时  清除定时器-------------*/

    var btn1 = document.getElementsByTagName("button")[0];
    var btn2 = document.getElementsByTagName("button")[1];
   // var timer = setInterval(fn, 2000)
    var timer = null;
   btn2.onclick = function () {
       timer = setInterval(fn, 20)
   }

   btn1.onclick = function () {
        clearInterval(timer)
   }
    </sc
    ript>
</body>

2.JavaScript Date 对象

Date 对象
Date 对象用于处理日期和时间。
创建 Date 对象的语法:
var myDate=new Date()
注释:Date 对象会自动把当前日期和时间保存为其初始值。

 // 当前时间
    var date = new Date();
    // 未来   设置
    var newDate =  new Date('2018/12/25');  

       console.log(newDate-date); 



       // 数字形式:new Date( 2013,4,1,9,48,12 );
// 字符串形式:new Date('June 10,2013 12:12:12');

// January、February、March、April、May、June、
// July、August、September、October、November、December




例子:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        input{
            width: 30px;
            height: 20px;
            border: 1px solid red;
            /*background: ;*/
        }


    </style>
</head>
<body>
    <pre>
        
        距离白富美高帅富逍遥快活风流浪荡,月薪++++还有----
        <input type="text" value="" />天
        <input type="text" value="" />时
        <input type="text" value="" />分
        <input type="text" value="" />秒
        就来了

    </pre>

    <script type="text/javascript">
    var txt = document.getElementsByTagName("input")

    var iNow = new Date();
    var iNew = new Date( 2018, 11, 6,  21,56,0  );
    var t = Math.floor(iNew - iNow)/1000;
   
    var sec =Math.floor(t%60)     ; 
    var day =Math.floor(t/86400) ;
    var hou =Math.floor(t%86400/3600) ;
    var min =Math.floor(t%86400%3600/60) ;

     var timer = null;
    timer = setInterval(func,1000)
    function func(){

        sec--;
        if(sec<0){
            sec = 59;
        }
       txt[0].value = day;
       txt[1].value = addZero(hou);
       txt[2].value = min;
       txt[3].value = addZero(sec);
   
    }
    function addZero(a) {
      return a=a<10?"0"+a:a
    }
    



    </script>
</body>
</html>

相关文章

  • js-day11

    A.我今天学了什么 1.定时器 2.JavaScript Date 对象

网友评论

      本文标题:js-day11

      本文链接:https://www.haomeiwen.com/subject/yonlixtx.html