简单实现JS倒计时效果


Posted in Javascript onDecember 23, 2016

本文实例为大家分享了JS倒计时效果的具体代码,供大家参考,具体内容如下

Index.html

<!DOCTYPE html>
<html>
 <head> 
 <meta charset="utf-8" /> 
 <title>倒计时</title> 
 <script>
function toTwo(n)
{
 if(n>9)
 {
 return ''+n; 
 }
 else
 {
 return '0'+n; 
 }
}
window.onload=function(){

 var oBox=document.getElementById('box');
 var aImg=oBox.getElementsByTagName('img');

 function time()
 {
 var enddate=new Date('2016/12/25 00:00:00');
 var mydate=new Date(); 
 var str='';
 var t=enddate.getTime()-mydate.getTime();
 str=toTwo(Math.floor(t/1000/60/60/24))+toTwo(Math.floor(t/1000/60/60%24))+toTwo(Math.floor(t/1000/60%60))+toTwo(Math.floor(t/1000%60));

  for(var i=0;i<aImg.length;i++)
  {
  aImg[i].src='images/'+str[i]+'.png'; 
  }
 }

 time();
 setInterval(time,1000);

};
</script> 
 <style>
#box { width:1000px;
 height:200px;
 font-size:14px;
 line-height:100px;
 margin:auto;
 }

#box img{ width:30px;
  height:60px;
  }
</style> 
 </head> 
 <body> 
 <div id="box"> 
 <img src="images/0.png" /> 
 <img src="images/0.png" /> 天: 
 <img src="images/0.png" /> 
 <img src="images/0.png" /> 时: 
 <img src="images/0.png" /> 
 <img src="images/0.png" /> 分: 
 <img src="images/0.png" /> 
 <img src="images/0.png" /> 秒
 </div> 
 </body>
</html>

运行结果如图:

简单实现JS倒计时效果

上面的图片需要

方法二、JavaScript倒计时栏的实现

这边小编也是刚刚过完双11呀(快递还没有到很绝望),剁完手来写上这新学的知识。双十一很多电商网站随处可见倒计时的框图那他们到底是怎样实现的时刻计时。

主要用法在于对js中Data对象的方法,话不多说直接撸上代码,主要难点在于对每一项时间的获取

<style>
  #countdown{
    margin: 200px auto;
    font-size: 20px;
    text-align: center;
    color: red;
  }
</style>
 <script>
   window.onload=function(){
     var enddata=new Date("2018/12/12 00:00:00"); //这边是自定义的截止时间
     var div=document.getElementById("countdown");
     function hold(){
       var nowtime=new Date();  //每一次执行获取当前时间
       var second=parseInt((enddata.getTime()-nowtime.getTime())/1000);
       var minute=parseInt(second/60%60);
       var hour=parseInt(second/3600%24);
       var day=parseInt(second/3600/24);
       second=second%60;
       second<10 ? second="0"+second : second; //此下四行确保格式每一位数都是标准的两位
       minute<10 ? minute="0"+minute : minute;
       hour<10 ? hour="0"+hour : hour;
       day<10 ? day="0"+day : day;
       div.innerHTML="距离双十二开抢还有"+day+"天"+hour+"小时"+minute+"分"+second+"秒"; 
     }
     setInterval(hold,1000);  //每一秒执行一次,这边第二个参数为毫秒单位
   }
 </script>
<body>
<div id="countdown"></div>
</body>

效果图如下(动态变化):

简单实现JS倒计时效果

主要在于setInterval(); 方法,其余部分小编已经写上了备注,当然这边只是简单的写了一下样式。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
模拟用户操作Input元素,不会触发相应事件
May 11 Javascript
与Math.pow 相反的函数使用介绍
Aug 04 Javascript
JavaScript中匿名、命名函数的性能测试
Sep 04 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
Oct 05 Javascript
浅析Jquery操作select
Dec 13 Javascript
基于vue实现swipe分页组件实例
May 25 Javascript
Angular 4环境准备与Angular cli创建项目详解
May 27 Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 Javascript
JavaScript算法学习之冒泡排序和选择排序
Nov 02 Javascript
浅析Vue 中的 render 函数
Feb 28 Javascript
js仿京东放大镜效果
Aug 09 Javascript
Bootstrap源码解读下拉菜单(4)
Dec 23 #Javascript
jquery dataview数据视图插件使用方法
Dec 23 #Javascript
基于vue的下拉刷新指令和滚动刷新指令
Dec 23 #Javascript
Bootstrap源码解读按钮(5)
Dec 23 #Javascript
基于bootstrap的选择框插件icheck
Dec 23 #Javascript
基于bootstrap的文件上传控件bootstrap fileinput
Dec 23 #Javascript
Bootstrap CSS使用方法
Dec 23 #Javascript
You might like
实例(Smarty+FCKeditor新闻系统)
2007/01/02 PHP
php+mysql数据库查询实例
2015/01/21 PHP
php生成动态验证码gif图片
2015/10/19 PHP
[原创]php求圆周率的简单实现方法
2016/05/30 PHP
PHP正则表达式处理函数(PCRE 函数)实例小结
2019/05/09 PHP
javascript document.execCommand() 常用解析
2009/12/14 Javascript
JS数学函数Exp使用说明
2012/08/09 Javascript
javascript中clone对象详解
2014/12/03 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
js获取url传值的方法
2015/12/18 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
2016/09/08 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
js中new一个对象的过程
2017/02/20 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
利用Three.js如何实现阴影效果实例代码
2017/09/26 Javascript
Vue组件全局注册实现警告框的实例详解
2018/06/11 Javascript
解决vue中post方式提交数据后台无法接收的问题
2018/08/11 Javascript
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
详解Python中的Cookie模块使用
2015/07/06 Python
python实现多线程的两种方式
2016/05/22 Python
Python collections模块使用方法详解
2019/08/28 Python
探秘TensorFlow 和 NumPy 的 Broadcasting 机制
2020/03/13 Python
python如何求圆的面积
2020/07/01 Python
详解python中的三种命令行模块(sys.argv,argparse,click)
2020/12/15 Python
单身旅行者的单身假期:Just You
2018/04/08 全球购物
一套英文Java笔试题面试题
2016/04/21 面试题
《分一分》教学反思
2014/04/13 职场文书
三字经教学反思
2014/04/26 职场文书
三严三实心得体会范文
2014/10/13 职场文书
嘉宾邀请函
2015/01/31 职场文书
素质拓展训练感想
2015/08/07 职场文书
《实心球》教学反思
2016/02/23 职场文书
深入解析MySQL索引数据结构
2021/10/16 MySQL
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS