看到很多商城都是抢购倒计时的功能,今天闲来无事做了个倒计时。全当学习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函数

一个简单的JS倒计时的更多相关文章

  1. 一个简单的js实现倒计时函数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 一个简单的js面试题

    在js群里看到有人发问,于是抱着练手的心态写了答了几个面试题,题目虽然不是太难,却很考验人的编程思维.汗颜,看了别人的答案后才发现自己好像笨了很多. 废话不说了 ,上代码. 1 要求 给一个数组的最后 ...

  3. 一个简单的 js 时间对象创建

    JS中获取时间很常见,凑凑热闹,也获取一个时间对象试试 首先,先了解js的获取时间函数如下: var myDate = new Date();          //创建一个时间对象 myDate.g ...

  4. Chart.js: 一个简单的 JS Chart Library

    Chart.js 是一个 Open Source 的 JavaScript Chart Library.它一共有 6 中 Chart,全都是 HTML5 based. 底下是 Chart.js 所提供 ...

  5. 一个简单的JS日期挂历脚本

    分享一个JS脚本做的日期挂历,在需要的时候可以引入你的程序. 如需单独引入这个脚本,请将它保存在一个文件中然后引入它:如这样 <script type="text/javascript ...

  6. isMobile 一个简单的JS库,用来检测移动设备

    点这里 github地址:https://github.com/kaimallea/isMobile Example Usage I include the minified version of t ...

  7. 一个简单的js队列,逻辑很清晰

    function Queue(type) { //type 是否是一个接着一个执行 function QueueConst() {} QueueConst.execute_ing=[], QueueC ...

  8. 一个简单的js时钟

    演示地址 代码 <html> <head> <title> Nonove js clock 时钟 </title> <script type=&q ...

  9. 一个简单的js计数器(web储存)。

    <span id="countspan"></span> <a href="#" onclick="countNumbe ...

随机推荐

  1. SetWinEventHook 事件钩子(有些windows事件并没有消息对应,譬如弹出菜单,切换窗口,获得焦点,滚动条滚动等)good

    相信消息钩子大家听的比较多,消息钩子能够在应用程序处理系统消息之前将其截获,提前处理并可以决定是否继续将消息往下传送,有些windows事件并没有消息对应,譬如弹出菜单,切换窗口,获得焦点,滚动条滚动 ...

  2. VS使用的快捷方式

    VS常用快捷键 1.回到上一个光标位置/前进到下一个光标位置 1)回到上一个光标位置:使用组合键“Ctrl + -”: 2)前进到下一个光标位置:“Ctrl + Shift + - ”. 2.复制/剪 ...

  3. python中的内置函数(一)

    内置函数:内置函数就是python提供的,可以拿来直接用的函数 作用域相关 locals():返回当前作用域中的名字globals():返回全局作用域中的内容 def func(): print('我 ...

  4. hadoop之hive基本操作

    -- 清空表中的数据,保留表结构 truncate table tmp_userid; '); -- 搜索库或表支持正则表达式 show tables 'sa*'; show tables in ba ...

  5. 简单了解HashCode()

    在java的内部类中,计算HashCode通常使用 code = 元素* 31 + 下一个元素 以String为例 public int hashCode() { int h = hash; if ( ...

  6. 【转】Mysql索引最左匹配原则理解

    作者:沈杰 链接:https://www.zhihu.com/question/36996520/answer/93256153来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  7. C语言之父Dennis Ritchie告诉你:如何成为世界上最好的程序员?

    文/Ohans Emmanuel 译/网易云信 想要阅读更多技术干货文章,欢迎关注网易云信博客. 了解网易云信,来自网易核心架构的通信与视频云服务. 我不知道如何成为世界上最好的程序员.但是,我们可以 ...

  8. sql server编写简洁四则运算表达式脚本实现计算批次功能(C#等其它编程语言也能直接用此通用表达式)

    问题: 在数据库编程开发中,有时会遇到数据量比较大的情况,如果直接大批量进行添加数据.修改数据.删除数据,就会是比较大的事务,事务日志也比较大,耗时久的话会对正常操作造成一定的阻塞.虽不至于达到删库跑 ...

  9. php程序守护进程

    php命令程序实习守护进程2种方式: 1.使用nohup nohup php myprog.php > log.txt & 2.使用程序 function daemonize() { $ ...

  10. java中方法的重载和覆盖

    java中方法的重载和覆盖 先来了解一下这两个名词的含义. 重载: 在一个类当中才可以重载,方法名相同,参数个数不同或参数个数相同而参数类型不同. 覆盖: 又称重写,在派生类(子类)中重写基类(父类) ...