zoukankan      html  css  js  c++  java
  • 一个简单的JS倒计时

    看到很多商城都是抢购倒计时的功能,今天闲来无事做了个倒计时。全当学习JS。
    主要思路:主要用到Date对象,声明一个变量获取当前时间,在声明一个变量获取结束时间,结束时间-当前时间=剩余时间(倒计时),中间涉及到一些简单的数学运算和取整。
    注:getDay()获取到星期的时候是0~6,0为星期天。所以声明一个数组来转换成大写的星期。在数组[getDay()]就得到星期格式。
    HTML内容:
    <span>显示当前时间:</span>
    <span id="show" style="color: red"></span>
    <div id='timeshow' style="color: red"></div>
    <div id='timeleft' style="color:red;"></div>
    JS内容:
    showTime();
    function showTime(){
    var myData=new Date(); //获取当前时间
    var endTime=new Date('2050/10/22,12:20:12') //设定倒计时结束时间
    var lefttime=(endTime.getTime()-myData.getTime())/(24*60*60*1000); //结束时间-当前时间=剩下时间(毫秒数)把得到的数字转化成毫秒数(得到差的毫秒数/一天的毫秒数=天数)
    //一天=24小时 1小时=60分钟 1分钟=60秒 1秒=1000毫秒
    lefttime=Math.ceil(lefttime) //对得到的毫秒数进行四舍五入
     
    var leftHMS=parseInt((endTime.getTime()-myData.getTime())/1000); //得到剩余的毫秒数
    var ds=parseInt(leftHMS/(24*60*60)); //换算成天
    var xs=parseInt(leftHMS/(60*60)%24); //得到小时 取模24小时
    var fz=parseInt(leftHMS/60%60); //得到分钟
    var mz=parseInt(leftHMS%60); //得到秒数
     
     
    var year=myData.getFullYear(); //获取年
    var month=myData.getMonth()+1; //获取月 必须+1
    var data=myData.getDate(); //获取日
    var h=myData.getHours();
    var m=myData.getMinutes();
    var s=myData.getSeconds();
    m=checkTime(m);
    s=checkTime(s);
    function checkTime(i){
    if(i<10){
    return '0'+i;
    }else{
    return i;
    }
    };
    //分钟和秒数都是一位数,所以需要用0补位
    var d=myData.getDay(); //获取星期(因星期打印出事0~6,所以用数组形式转化成对应的星期)
    var weekday=['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
    document.getElementById("show").innerHTML=year+'年'+month+'月'+data+'日'+'&nbsp;'+weekday[myData.getDay()]+'&nbsp;'+
    h+':'+m+':'+s;
    //打印出年月日
    document.getElementById("timeshow").innerHTML='离高考还有:'+lefttime+'天';
    //打印出倒计时天数
    document.getElementById('timeleft').innerHTML='离世界末日还有:'+ds+'天'+xs+'小时'+fz+'分钟'+mz+'秒';
    }
    setInterval(function(){
    showTime();
    },500)
    //定时调用showTime函数
  • 相关阅读:
    [oldboy-django][1初识django]阻止默认事件发生 + ajax + 模态编辑对话框
    第6章Zabbix分布式监控
    第5章Zabbix自动化监控
    第4章Zabbix监控实践
    第3章Zabbix完整监控
    第2章Zabbix基础进阶
    第1章1zabbix快速入门
    自动化利器-YUM仓库搭建实战
    CentOS7修改网卡为eth0
    NTP时间服务器
  • 原文地址:https://www.cnblogs.com/Beliefblog/p/5980833.html
Copyright © 2011-2022 走看看