简单实现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 相关文章推荐
Javascript - HTML的request类
Jan 09 Javascript
关于IE7 IE8弹出窗口顶上
Dec 22 Javascript
ajax上传时参数提交不更新等相关问题
Dec 11 Javascript
Bootstrap基础学习
Jun 16 Javascript
jQuery中常用动画效果函数(日常整理)
Sep 17 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
基于Vue制作组织架构树组件
Dec 06 Javascript
自己动手封装一个React Native多级联动
Sep 19 Javascript
Vue核心概念Getter的使用方法
Jan 18 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
Apr 09 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
Nov 08 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
Jan 26 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
第十二节 类的自动加载 [12]
2006/10/09 PHP
新手配置 PHP 调试环境(IIS+PHP+MYSQL)
2007/01/10 PHP
php创建多级目录代码
2008/06/05 PHP
ThinkPHP模板IF标签用法详解
2014/07/01 PHP
Chrome Web App开发小结
2014/09/04 PHP
怎样搭建PHP开发环境
2015/07/28 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
2007/08/31 Javascript
用JavaScript显示随机图像或引用
2009/04/21 Javascript
jQeury淡入淡出需要注意的问题
2010/09/08 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
jquery图片轮播特效代码分享
2020/04/20 Javascript
vue实现表格数据的增删改查
2017/07/10 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
2017/07/13 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
JS实现判断移动端PC端功能
2020/02/21 Javascript
python多线程抓取天涯帖子内容示例
2014/04/03 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
Python中一般处理中文的几种方法
2019/03/06 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
Python timer定时器两种常用方法解析
2020/01/20 Python
Python如何实现远程方法调用
2020/08/07 Python
python 制作网站小说下载器
2021/02/20 Python
伦敦平价潮流珠宝首饰品牌:Astrid & Miyu
2016/10/10 全球购物
地理科学专业毕业生求职信
2013/10/15 职场文书
环境工程求职简历的自我评价范文
2013/10/24 职场文书
餐厅经理岗位职责范本
2014/02/17 职场文书
六个一活动实施方案
2014/03/21 职场文书
绿色出行口号
2014/06/18 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS
【海涛教你打DOTA】剑圣第一人称视角解说
2022/04/01 DOTA
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python
Python如何将list中的string转换为int
2022/07/15 Ruby