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 相关文章推荐
自己开发Dojo的建议框架
Sep 24 Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
Feb 12 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
Mar 12 Javascript
浅谈时钟的生成(js手写简洁代码)
Aug 20 Javascript
使用vue制作FullPage页面滚动效果
Aug 21 Javascript
JavaScript门面模式详解
Oct 19 Javascript
JS基于递归实现网页版计算器的方法分析
Dec 20 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
Aug 12 Javascript
[原创]微信小程序获取网络类型的方法示例
Mar 01 Javascript
封装Vue Element的table表格组件的示例详解
Aug 19 Javascript
解决Element中el-date-picker组件不回填的情况
Nov 07 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
安装APACHE
2007/01/15 PHP
PHP判断是否有Get参数的方法
2014/05/05 PHP
PHP CURL 多线程操作代码实例
2015/05/13 PHP
全面解析PHP操作Memcache基本函数
2016/07/14 PHP
javascript 精粹笔记
2010/05/09 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
2010/07/29 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
原生js实现addClass,removeClass,hasClass方法
2016/04/27 Javascript
React Native如何消除启动时白屏的方法
2017/08/08 Javascript
Angular4自制一个市县二级联动组件示例
2017/11/21 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
Vue高版本中一些新特性的使用详解
2018/09/25 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
2018/10/16 Javascript
vue 使用async写数字动态加载效果案例
2020/07/18 Javascript
linux服务器快速卸载安装node环境(简单上手)
2021/02/22 Javascript
Python os模块中的isfile()和isdir()函数均返回false问题解决方法
2015/02/04 Python
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
python日志模块logbook使用方法
2019/09/19 Python
在 Windows 下搭建高效的 django 开发环境的详细教程
2020/07/27 Python
轻松掌握CSS3中的字体大小单位rem的使用方法
2016/05/24 HTML / CSS
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
保加利亚服装和鞋类购物网站:Bibloo.bg
2020/11/08 全球购物
2013年保送生自荐信格式
2013/11/20 职场文书
食堂个人先进事迹
2014/01/22 职场文书
教师一岗双责责任书
2014/04/16 职场文书
员工考核评语大全
2014/04/26 职场文书
公司委托书怎么写
2014/08/02 职场文书
招商引资工作汇报
2014/10/28 职场文书
大学学生个人总结
2015/02/15 职场文书
2015年圣诞节活动总结
2015/03/24 职场文书
入党转正介绍人意见
2015/06/03 职场文书
如何利用js在两个html窗口间通信
2021/04/27 Javascript
解决golang结构体tag编译错误的问题
2021/05/02 Golang