简单实现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 相关文章推荐
JS面向对象编程 for Cookie
Sep 19 Javascript
javascript string字符串优化问题
Jul 31 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
充分发挥Node.js程序性能的一些方法介绍
Jun 23 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
JS中常用的正则表达式
Sep 29 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
react-native ListView下拉刷新上拉加载实现代码
Aug 03 Javascript
vue实现压缩图片预览并上传功能(promise封装)
Jan 10 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
Sep 02 Javascript
layer扩展打开/关闭动画的方法
Sep 23 Javascript
javascript 代码是如何被压缩的示例代码
May 06 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
《DOTA3》开发工作已经开始 《DOTA3》将代替《DOTA2》
2021/03/06 DOTA
php选择排序法实现数组排序实例分析
2015/02/16 PHP
PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例
2020/08/17 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
DOM相关内容速查手册
2007/02/07 Javascript
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
三种检测iPhone/iPad设备方向的方法
2014/04/23 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
javascript回到顶部特效
2016/07/30 Javascript
JS动态给对象添加属性和值的实现方法
2016/10/21 Javascript
js获取地址栏中传递的参数(两种方法)
2017/02/08 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
2018/03/05 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
jQuery利用FormData上传文件实现批量上传
2018/12/04 jQuery
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
JavaScript如何借用构造函数继承
2019/11/06 Javascript
在Chrome DevTools中调试JavaScript的实现
2020/04/07 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
[02:48]DOTA2超级联赛专访海涛:你们的选择没有错
2013/06/07 DOTA
python 生成不重复的随机数的代码
2011/05/15 Python
从零学python系列之数据处理编程实例(二)
2014/05/22 Python
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
Python实现针对中文排序的方法
2017/05/09 Python
Python编程pygal绘图实例之XY线
2017/12/09 Python
python flask中静态文件的管理方法
2018/03/20 Python
Python continue继续循环用法总结
2018/06/10 Python
完美解决TensorFlow和Keras大数据量内存溢出的问题
2020/07/03 Python
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
七年级生物教学反思
2014/01/30 职场文书
详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法
2021/04/25 Python
分享几种python 变量合并方法
2022/03/20 Python