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 相关文章推荐
this[] 指的是什么内容 讨论
Mar 24 Javascript
基于jQuery UI CSS Framework开发Widget的经验
Aug 21 Javascript
js实现密码强度检验
Jan 15 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
Feb 19 Javascript
浅谈JS如何实现真正的对象常量
Jun 25 Javascript
JavaScript使用小插件实现倒计时的方法讲解
Mar 11 Javascript
javascript实现手动点赞效果
Apr 09 Javascript
ionic+html5+API实现双击返回键退出应用
Sep 17 Javascript
javascript实现弹出层效果
Dec 10 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
Aug 06 Javascript
Javascript如何实现扩充基本类型
Aug 26 Javascript
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
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
php中echo()和print()、require()和include()等易混淆函数的区别
2012/02/22 PHP
php从文件夹随机读取文件的方法
2015/06/01 PHP
THINKPHP在添加数据的时候获取主键id的值方法
2017/04/03 PHP
浅析javascript闭包 实例分析
2010/12/25 Javascript
JS的replace方法详细介绍
2012/11/09 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
jquery datatable后台封装数据示例代码
2014/08/07 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
node.js监听文件变化的实现方法
2019/04/17 Javascript
vue中动态select的使用方法示例
2019/10/28 Javascript
[02:41]《西雅图我们来了》2015国际邀请赛出征全记录
2015/07/23 DOTA
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
python登录WeChat 实现自动回复实例详解
2019/05/28 Python
python语言基本语句用法总结
2019/06/11 Python
基于python框架Scrapy爬取自己的博客内容过程详解
2019/08/05 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
Python与C/C++的相互调用案例
2021/03/04 Python
使用数据结构给女朋友写个Html5走迷宫游戏
2019/11/26 HTML / CSS
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
Perfume’s Club意大利官网:欧洲美妆电商
2019/05/03 全球购物
文秘专业大学生求职信
2013/11/10 职场文书
护理学专业推荐信
2013/12/03 职场文书
2014年国庆节广播稿
2014/09/19 职场文书
作风整顿剖析材料
2014/09/30 职场文书
镇党政领导班子民主生活会思想汇报
2014/10/11 职场文书
股东大会通知
2015/04/24 职场文书
2016新年问候语大全
2015/11/11 职场文书
python 如何执行控制台命令与操作剪切板
2021/05/20 Python
React中的Context应用场景分析
2021/06/11 Javascript
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python