原生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 <){
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实现一个简单的倒计时功能的更多相关文章
- JS事件 编程练习-自制计算器 使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。
编程练习 使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElement ...
- 原生 JS实现一个简单分页插件
最近做的一个 PC端的需求,这个需求中有一个小点,页面底部有一块列表区域,这个列表的数据量比较大,需要进行分页控制,切换页码的时候,发送一个 ajax请求,在页面无刷新的情况下,实现列表数据的刷新,所 ...
- 原生js实现一个简单的轮播图
想锻炼一下自己的原生js能力可以从写一个轮播图开始,轮播图的运用想必大家都知道吧,好了废话不多说,开始记笔记了,一些需要注意的点,我都在代码中标注了 首先是构造html: <div id=&qu ...
- 如何用原生JS实现一个简单的promise
我又又又回来了,最近真是累的跟狗一样,急需一个大保健回复一下子精力 我现在是一边喝着红牛一边写着博客,好了好了,不扯了,回归整体好吧 先简单来说一下啥是promise吧 它是什么?Promise是一个 ...
- 原生JS实现一个简单的前端路由（原理）
说一下前端路由实现的简要原理,以 hash 形式(也可以使用 History API 来处理)为例, 当 url 的 hash 发生变化时,触发 hashchange 注册的回调,回调中去进行不同的操 ...
- JS实现一个简单的计算器
使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...
- 用JS做一个简单的电商产品放大镜功能
使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...
- 用原生js写一个"多动症"的简历
用原生js写一个"多动症"的简历 预览地址源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现 ...
- 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
随机推荐
- ［Redis源码阅读］sds字符串实现
初衷 从开始工作就开始使用Redis,也有一段时间了,但都只是停留在使用阶段,没有往更深的角度探索,每次想读源码都止步在阅读书籍上,因为看完书很快又忘了,这次逼自己先读代码.因为个人觉得写作需要阅读文 ...
- C# 程序集安装与卸载
下面我们来实现程序集的安装,代码如下: /// <summary>/// 程序集安装与卸载/// </summary>/// <param name="asse ...
- matlab R2016a 中添加新的工具箱的方法
matlab添加新的工具箱分三步: 1. 下载新的工具箱,并解压. 2. 将解压后的工具箱文件夹移到安装的matlab中的toolbox文件夹中 3. 添加新文件夹及其子文件夹到路径中. 接下来以添加 ...
- Python之Queue模块
Queue 1.创建一个“队列”对象 >>> import Queue >>> queue = Queue.Queue(maxsize=100) >>& ...
- StackExchange.Redis学习笔记(四) 事务控制和Batch批量操作
Redis事物 Redis命令实现事务 Redis的事物包含在multi和exec(执行)或者discard(回滚)命令中 和sql事务不同的是,Redis调用Exec只是将所有的命令变成一个单元一起 ...
- Swiper 判断上滑下拉操作
onTouchMove: function(swiper){ //手动滑动中触发//判断上滑下拉var i = mySwiper.translate;setTimeout(function() {va ...
- _2Python_注释命名等基本操作
注释:注解,解释 主要用于在代码中给代码标识出相关的文字提示(提高代码的可读性)或调试程序,方便别人阅读和自己日后修改. Python中注释分为两类.单行注释:单行注释以#号开头,在一行内,#号后面的 ...
- P2051 [AHOI2009]中国象棋
题目描述 这次小可可想解决的难题和中国象棋有关,在一个N行M列的棋盘上,让你放若干个炮(可以是0个),使得没有一个炮可以攻击到另一个炮,请问有多少种放置方法.大家肯定很清楚,在中国象棋中炮的行走方式是 ...
- python学习笔记 list
1.list中的任一元素可以是任一类型.可以是混合的,如,前两个字符串后面的是数字.都是可以的. 2.可以用-1表示最后一个元素. 3.注意不要越界. 4.len(mates) 用来计算list的大小 ...
- 【设计模式系列】之OO面向对象设计七大原则
1 概述 本章叙述面向向对象设计的七大原则,七大原则分为:单一职责原则.开闭原则.里氏替换原则.依赖倒置原则.接口隔离原则.合成/聚合复用原则.迪米特法则. 2 七大OO面向对象设计 2.1 单一 ...