• JS详解Date应用+定时器原理+计时器案例


    我们先说一下定时器吧:

    //定时器:设置一个定时器,再设置一个等待的时间,到达指定时间后,执行对应的操作
    //两种定时器:用法一样,区别一个执行后不会停下来,一个只执行一次
    //window.setInterval([function],[interval]);
    /*设置一个定时器,到达指定时间[interval] 执行我们的操作[function],然后定时器并没有停止,
    以后每隔这么长时间,都重新执行我们的function*/

    //window.setTimeout([function],[interval]);
    /*设置一个定时器,到达指定的时间[interval],执行我们的操作[function],定时器停止。*/

    //定时器队列:定时器都有返回值,返回的是一个数字,代表当前是第几个定时器。

    //来看一个例子
    var count=0;
    //设置一个interval,每隔1000毫秒就执行function
    var timer=window.setInterval(function(){
    count++;
    console.log(count);
    },1000);

    接下来我要把计时器放入下面计时器案例


    CSS样式
    <style type="text/css">
    body,div{
    margin:0;padding:0;font-family:"微软雅黑";font-size:28px;
    }
    #div1{
    margin:10px auto 0;
    padding:0 10px;
    700px;
    height:50px;
    line-height:50px;
    text-align:center;
    border:1px solid #ddd;
    box-shadow:inset 0px 0px 1px 5px #000;
    border-radius:5px;
    background:-webkit-linear-gradient(top left,chartreuse,coral,cyan);
    }
    </style>



    <body>
    <div id="div1">北京时间:</div>
    <script type="text/javascript">
    //获取当前自己电脑的时间(时间数据格式:对象数据类型)
    /* var time = new Date();    
     console.log(time);*/    //立即试一下?

     //可以看出在控制台输出结果是:Sat Dec 12 2015 21:43:25 GMT+0800 (中国标准时间),接下来我们要把这种格式变成下面这种格式(不要在意具体时间,注意格式)
    //"2015年05月24日 星期日 15时31分27秒"变成我们这个时间格式的字符串
    var oDiv=document.getElementById("div1");
    var timeStr=formatTime();
    oDiv.innerHTML+=timeStr;
    var timer=window.setInterval(function(){ //添加计时器,每隔一秒(1000毫秒=1秒),在页面执行一次方法
    var timeStr=formatTime();
    oDiv.innerHTML="北京时间:"+timeStr;
    },1000)

    //方法开始,标准化年月日,星期,时分秒
    function formatTime(){
    var time=new Date();//时间格式数据,或得本地当前时间
    var year=time.getFullYear(); //获得年
    var month=time.getMonth()+1; //0-11代表我们的1-12月,所以要+1才能代表我们中国的月
    var day=time.getDate(); //获得日

    var w=time.getDay(); //获得星期 ;获得结果0-6代表周日-周六
    //w获取结果会是0-6,但输出星期0,星期6,是不对,所以我们要进行转换
    //既然是0-6,那么就存在索引。既然能代表索引,那只要有字符串我们就能找到字符了
    var wStr="日一二三四五六",/*这个索引也是0-6*/ week=wStr.charAt(w); //用charAt(索引) 方法,获取索引


    var hours=time.getHours(); //获取时
    var minutes=time.getMinutes(); //获取分钟
    var seconds=time.getSeconds(); //获取秒
    var mlSeconds=time.getMilliseconds(); //毫秒
    return year+"年"+zero(month)+"月"+zero(day)+"日 星期" //把获取的年月日星期时分秒拼接起来,记得要补0
    +week+" "+zero(hours)+"时"+zero(minutes)+"分"+zero(seconds)
    +"秒";
    }
    //由于月和日会出现个位数,所以要补零
    function zero(value){
    return value<10?"0"+value:value;
    }
    </javascript>
    </body>
    </html>
  • 相关阅读:
    早晨突然想到的几句话
    VBA-工程-找不到工程或库-解决方案
    Mysql 服务无法启动 服务没有报告任何错误
    一道有趣的面试题
    异步和多线程
    异或运算
    线性代数解惑
    全文搜索引擎 Elasticsearch (一)
    HandlerExceptionResolver统一异常处理 返回JSON 和 ModelAndView
    MySQL 20个经典面试题
  • 原文地址:https://www.cnblogs.com/nkw2333/p/5041978.html
Copyright © 2020-2023  润新知