分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

原生js实现一个简单的倒计时功能

发布时间:2023-09-06 01:25责任编辑:傅花花关键词:js

  大家好,我是云中君!欢迎大家来观看我的博客

之前那,在群里看到很多人问,关于电商网站中的倒计时功能怎么实现,很多人说在网上找了很多插件,但是不是很会用,所以今天就在这里分享一下我封装的一个小的倒计时功能!

下面是布局代码!

 
<!DOCTYPE html><html> ???<head> ???????<meta charset="utf-8" /> ???????<title></title> ???????<link href="css/index.css" rel="stylesheet"> ???</head> ???<body> ???<!--用的时候把下面这个代码放到你那个放倒计时的盒子里面就好了--> ???????<span class = "span1" ?id="time1" data-time="2017/11/19 23:32"> ???????????????本场剩余: ???????????<!----data-time用来存放你商品到期的时间,时间格式就按照上面格式就好---> ???????????<!--每个span的id要唯一,调用函数的时候就是要传id这一个参数--> ???????????????<em></em> 天 ???????????????<em></em> 小时 ???????????????<em></em> 分 ???????????????<em></em> 秒 ???????????<!--em标签用来放置我们所要显示的时间---> ???????</span> ???????????<script type="text/javascript" src="js/js.js"></script> ???????<!--在这里调用js文件,里面是封装的倒计时的js函数--> ???</body></html>

   怎么样,布局很简单吧!接下来是我们的css代码,本人并没有做太多的设置,大家根据自己的喜好来设置不同的样式,这样都是可以的!

span{font-size:12px;color:#666;}em{font-style:normal;color:red;font-size:12px;}/******这里是css,大家可以根据自己的喜好更改到自己的style,笔者只是在这里简单的做了一些设置********/

  接下来就是我们的js代码了

function getTime(id){ ???????var timer = null;//这里设置time为null,用于下面来清除计时器 ???????var obj = document.getElementById(id)//获取到放置时间数据的span的id ???????timer = setInterval(function(){//设置定时器,来更新时间 ???????????????var a = new Date((obj.getAttribute("data-time"))).getTime(); ???????????????//上面这一步可能比较复杂,我们首先来看obj.getAttribute("data-time")这一句。这个是用来获取指定标签的data-time属性,
即我们要使用的到期时间,然后来看new Date().getTime(),这一句是用来获取我们所设置到期时间的时间戳,用于下面的计算,这个获取的是固定的数值 ???????????????var b = new Date().getTime();//这是获取当前时间,是一个不固定的数值 ???????????????var d = 0,s=0,h=0,m=0;//定义变量 ???????????????var ee = obj.getElementsByTagName("em")//获取布局中的em标签用于存取数据 ???????????????d = Math.floor((a - b)/1000/60/60/24);//获取剩余天数 ???????????????h = Math.floor((a - b)/1000/60/60%24);//获取剩余小时 ???????????????m = Math.floor((a - b)/1000/60%60);//获取剩余分钟 ???????????????s = Math.floor((a - b)/1000%60);//获取剩余秒数
 ???????????????????????????????????????????????????????????????//中间这块区域是用来判断,当前时间数值小于10的时候给他前面加个0,这里可以根据具体情况可加可不加,以下同理 ???????????????if(d < 10){ ???????????????????d = "0" + d ???????????????}else if(d < 0){ ???????????????????d = 0 ???????????????} ???????????????if(h < 10){ ???????????????????h = "0" + h ???????????????}else if(h < 0){ ???????????????????h = 0 ???????????????} ???????????????if(m < 10){ ???????????????????m = "0" + m; ???????????????}else if(m < 0){ ???????????????????m = 0; ???????????????} ???????????????if(s < 10){ ???????????????????s = "0" + s; ???????????????}else if(s < 0){ ???????????????????s = 0; ???????????????}
 ??????????????????ee[0].innerHTML = d; ???????????????ee[1].innerHTML = h; ???????????????ee[2].innerHTML = m; ???????????????ee[3].innerHTML = s; ???????????????if(a <= b){//当我们的时间到期的时候,清除计时器,然后把当前标签的内容设置为0; ???????????????????clearInterval(timer); ???????????????????ee[0].innerHTML = 00; ???????????????????ee[1].innerHTML = 00; ???????????????????ee[2].innerHTML = 00; ???????????????????ee[3].innerHTML = 00; ???????????????} ???????????},1000)}getTime("time1")//这里用来调用这个函数,传入id
  这里我们就做好了一个倒计时的功能了!大家有不懂得地方可以加笔者的qq来和我一起讨论,欢迎大家来交流!qq:785228195

原生js实现一个简单的倒计时功能

原文地址:http://www.cnblogs.com/yunzhongjun/p/7853842.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved