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 相关文章推荐
网页常用特效代码整理
Jun 23 Javascript
js右键菜单效果代码
Jul 21 Javascript
jQuery 位置插件
Dec 25 Javascript
js获取ajax返回值代码
Apr 30 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 Javascript
jquery插件Jplayer使用方法简析
Apr 22 Javascript
JS实现DOM删除节点操作示例
Apr 04 Javascript
使用layui的layer组件做弹出层的例子
Sep 27 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
Feb 07 Javascript
Vue实现跑马灯样式文字横向滚动
Nov 23 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
Terran兵种对照表
2020/03/14 星际争霸
PHP导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
php中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
html 锁定页面(js遮罩层弹出div效果)
2009/10/27 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
关于Jquery中的事件绑定总结
2016/10/26 Javascript
jquery网页日历显示控件calendar3.1使用详解
2016/11/24 Javascript
快速将Vue项目升级到webpack3的方法步骤
2017/09/14 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
在iFrame子页面里实现模态框的方法
2018/08/17 Javascript
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
js中!和!!的区别与用法
2020/05/09 Javascript
基于javascript处理nginx请求过程详解
2020/07/07 Javascript
浅谈使用nodejs搭建web服务器的过程
2020/07/20 NodeJs
[01:31](回顾)杀出重围,决战TI之巅
2014/07/01 DOTA
python获取指定目录下所有文件名列表的方法
2015/05/20 Python
python实现自动重启本程序的方法
2015/07/09 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
Python 网络爬虫--关于简单的模拟登录实例讲解
2018/06/01 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
Python之Class&amp;Object用法详解
2019/12/25 Python
Python如何把Spark数据写入ElasticSearch
2020/04/18 Python
中学生自我鉴定
2014/02/04 职场文书
员工生日会策划方案
2014/06/14 职场文书
节约能源标语
2014/06/17 职场文书
毕业证代领委托书
2014/09/26 职场文书
兼职安全员岗位职责
2015/02/15 职场文书
庆七一活动简报
2015/07/20 职场文书
教你用eclipse连接mysql数据库
2021/04/22 MySQL
漫画「你在春天醒来」第10卷封面公开
2022/03/21 日漫
Selenium浏览器自动化如何上传文件
2022/04/06 Python