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 异常处理使用总结
Jun 21 Javascript
js读取本地excel文档数据的代码
Nov 11 Javascript
JS实现IE状态栏文字缩放效果代码
Oct 24 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
Mar 28 Javascript
jQuery过滤特殊字符及JS字符串转为数字
May 26 Javascript
Angular2表单自定义验证器的实现
Oct 19 Javascript
浅谈 Vue v-model指令的实现原理
Jun 08 Javascript
对类Vue的MVVM前端库的实现代码
Sep 07 Javascript
一百行JS代码实现一个校验工具
Apr 30 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
Oct 17 Javascript
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
关于vue中如何监听数组变化
Apr 28 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
迅雷下载《中学科技》怀旧期刊下载
2021/02/27 无线电
php下用cookie统计用户访问网页次数的代码
2010/05/09 PHP
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
php 利用socket发送HTTP请求(GET,POST)
2015/08/24 PHP
PHP数组操作简单案例分析
2016/10/15 PHP
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
一个简单的js树形菜单
2011/12/09 Javascript
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
JS实现随机乱撞彩色圆球特效的方法
2015/05/05 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
vue.js $refs和$emit 父子组件交互的方法
2017/12/20 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
优雅的将ElementUI表格变身成树形表格的方法步骤
2019/04/11 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
Python中的字符串类型基本知识学习教程
2016/02/04 Python
python实现上传下载文件功能
2020/11/19 Python
python redis 删除key脚本的实例
2019/02/19 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
简单了解为什么python函数后有多个括号
2019/12/19 Python
解释下面关于J2EE的名词
2013/11/15 面试题
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
致百米运动员广播稿
2014/01/29 职场文书
大学生开西餐厅创业计划书
2014/02/01 职场文书
2014年两会学习心得体会
2014/03/17 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
2015年团队工作总结范文
2015/05/04 职场文书
监守自盗观后感
2015/06/10 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书
MySQL 如何设计统计数据表
2021/06/15 MySQL