JS实现倒计时图文效果


Posted in Javascript onNovember 17, 2018

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

<body>
<img src="images/0.png" alt="" id="h1">
<img src="images/0.png" alt="" id="h2">
<img src="images/second1.png" alt="">
<img src="images/0.png" alt="" id="m1">
<img src="images/0.png" alt="" id="m2">
<img src="images/second1.png" alt="" >
<img src="images/0.png" alt="" id="s1">
<img src="images/0.png" alt="" id="s2">
  <script type="text/javascript">
  //获取节点对象
  var oH1=document.getElementById('h1');
  var oH2=document.getElementById('h2');
  var oM1=document.getElementById('m1');
  var oM2=document.getElementById('m2');
  var oS1=document.getElementById('s1');
  var oS2=document.getElementById('s2');
  //函数调用
  getTime();
  function getTime(){
  //获取截止时间到1970年之间的毫秒数
    var endTime=new Date('2018-07-13 12:00:00').getTime();
  //获取当前时间到1970年之间的毫秒数
    var  nowTime=new Date().getTime();
  //时间差(毫秒)
    var leftTime=endTime-nowTime;
  //获取时分秒
    var h=parseInt(leftTime/1000/3600);//获得剩余的小时数
    var m=parseInt(leftTime/1000/60%60);//获得剩余的分钟
    var s=parseInt(leftTime/1000%60);//获得剩余的秒数
  //加零(无论是小时还是分钟还是秒数都会有单个数的时候,所以可以通过加零来让其变成两位数)
    h=setNum(h);
    m=setNum(m);
    s=setNum(s);
  //双位数变成单位数
    var h1=h%10;
    var h2=parseInt(h/10);
    var m1=m%10;
    var m2=parseInt(m/10);
    var s1=s%10;
    var s2=parseInt(s/10);
  //改变图片地址(下面两种方法都可以实现图片地址的变化)
    oH1.setAttribute('src','images/'+h2+'.png');
    oH2.setAttribute('src','images/'+h1+'.png');
    oM1.setAttribute('src','images/'+m2+'.png');
    oM2.setAttribute('src','images/'+m1+'.png');
    oS1.setAttribute('src','images/'+s2+'.png');
    oS2.setAttribute('src','images/'+s1+'.png');
    /*oH1.src='images/'+h2+'.png';
    oH2.src='images/'+h1+'.png';
    oM1.src='images/'+m2+'.png';
    oM2.src='images/'+m1+'.png';
    oS1.src='images/'+s2+'.png';
    oS2.src='images/'+s1+'.png';*/
    setTimeout(getTime,1000);
 }
 //添零函数
 function  setNum(num){
    if(num<10){
      num="0"+num;
    }
    return num;
  }
  </script>
</body>

见下图:

JS实现倒计时图文效果

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

Javascript 相关文章推荐
JavaScript面向对象设计二 构造函数模式
Dec 20 Javascript
JS简单实现文件上传实例代码(无需插件)
Nov 15 Javascript
js获取页面description的方法
May 21 Javascript
js实现文本框选中的方法
May 26 Javascript
KnockoutJS 3.X API 第四章之click绑定
Oct 10 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
JS图片压缩(pc端和移动端都适用)
Jan 12 Javascript
JS实现简单短信验证码界面
Aug 07 Javascript
浅谈Angular路由复用策略
Oct 04 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
Feb 26 Javascript
Vue之Mixins(混入)的使用方法
Sep 24 Javascript
uni-app微信小程序登录授权的实现
May 22 Javascript
javaScript实现游戏倒计时功能
Nov 17 #Javascript
Javascript实现时间倒计时功能
Nov 17 #Javascript
Javascript实现秒表倒计时功能
Nov 17 #Javascript
js实现简单模态框实例
Nov 16 #Javascript
js实现搜索栏效果
Nov 16 #Javascript
JavaScript实现简单音乐播放器
Apr 17 #Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 #Javascript
You might like
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
dojo 之基础篇(三)之向服务器发送数据
2007/03/24 Javascript
js电信网通双线自动选择技巧
2008/11/18 Javascript
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
javascript单例模式的简单实现方法
2015/07/25 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
javascript设置和获取cookie的方法实例详解
2016/01/05 Javascript
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
Vue.js实现tab切换效果
2019/07/24 Javascript
Vue 自定义指令功能完整实例
2019/09/17 Javascript
js实现的在本地预览图片功能示例
2019/11/09 Javascript
[01:08]DOTA2次级职业联赛 - Wings 战队宣传片
2014/12/01 DOTA
python输出指定月份日历的方法
2015/04/23 Python
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
Python中str.format()详解
2017/03/12 Python
Python绘制的二项分布概率图示例
2018/08/22 Python
Python unittest单元测试框架总结
2018/09/08 Python
Python爬虫解析网页的4种方式实例及原理解析
2019/12/30 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
使用Python webdriver图书馆抢座自动预约的正确方法
2021/03/04 Python
HTML5 visibilityState属性详细介绍和使用实例
2014/05/03 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
智利最大的网上商店:Linio智利
2016/11/24 全球购物
西班牙第一的网上药房:PromoFarma.com
2017/04/17 全球购物
汤米巴哈马官方网站:Tommy Bahama
2017/05/13 全球购物
英国排名第一的餐具品牌:Denby Pottery
2019/11/01 全球购物
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
介绍一下except的用法和作用
2015/01/22 面试题
英语专业毕业生求职简历的自我评价
2013/10/24 职场文书
餐厅总经理岗位职责
2013/12/31 职场文书
应届毕业生个人求职信范文
2014/01/29 职场文书
需求分析说明书
2014/05/09 职场文书
企业优秀团员事迹材料
2014/08/20 职场文书