基于javascript实现精确到毫秒的倒计时限时抢购_javascript技巧

这篇文章为大家分享了javascript实现倒计时限时抢购,精确到毫秒的倒计时,供大家参考,具体内容如下

一、效果图

下面的图片就是聚划算上面的限时抢的效果

二、实现限时抢的效果需要用到的知识 :Javascript Date()对象
Date()返回当前的日期和事件
getYear()返回年份 获得年最好用
getFullYear()方法来操作(完整格式如2016)
getMonth()返回月份值(从0开始,+1)
getDay()返回星期几(0-6)
getHours()返回小时数(0-23)
getMinutes()返回分钟数(0-59)
getSeconds()返回秒数
getTime()返回毫秒数
当然,上面的调用方法我们不一定全部用到,也要看你自己的需求,废话不多说,我们直接上代码:
1、HTML页面代码:
<p class="left-time"></p>
我们把倒计时的内容放在class为left-time的<p>标签内.
2、JS脚本:

$(function(){
  function leftTime(){
    var endTime = new Date("2016/5/20,12:00:00");//结束时间
    var curTime = new Date();//当前时间
    var leftTime = parseInt((endTime.getTime() - curTime.getTime())/1000);//获得时间差
    //小时、分、秒需要取模运算
    var d = parseInt(leftTime/(60*60*24));
    var h = parseInt(leftTime/(60*60)%24);
    var m = parseInt(leftTime/60%60);
    var s = parseInt(leftTime%60);
    var ms = parseInt(((endTime.getTime() - curTime.getTime())/100)%10);
    var txt = "剩余:"+d+"天"+h+"小时"+m+"分钟"+s+"."+ms+"秒";
    $(".left-time").text(txt);
    if(leftTime<=0){ $(".left-time").text("团购结束");}
  };
  leftTime();
  var set = setInterval(leftTime,100);
});

上面的js就实现了一个简单的限时抢的小例子,其中parseInt()方法是取整,getTime()把时间转化为毫秒,除了parseInt()方法之外,还可以用Math.floor()向下取整的方法代替.

最后记得不要忘记了给个if()判断时间结束的时候需要显示的内容哦,不然就会出现不必要的小bug哟!

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js倒计时
js倒计时限时抢购
tmw倒计时精确到毫秒、js倒计时精确到毫秒、jq倒计时精确到毫秒、倒计时精确到毫秒、php 倒计时精确到毫秒,以便于您获取更多的相关知识。

时间: 2024-10-29 20:55:07

基于javascript实现精确到毫秒的倒计时限时抢购_javascript技巧的相关文章

基于JavaScript实现手机短信按钮倒计时(超简单)_javascript技巧

在淘宝等购物网站,我们都会看到一个发送短信倒计时的按钮,究竟是如何实现的呢?下面我就给大家提供一段代码很实用的. 废话不多说了,直接给大家贴js代码了. /* 120秒手机短信按钮倒计时 */ exports.sendmessage = function (name) { var second = 120; $(name).attr("disabled", true); var color = $(name).css('background-color'); $(name).attr(

基于JavaScript实现一定时间后去执行一个函数_javascript技巧

在实际需要中可能需要规定在指定的时间之后再去执行一个函数以达成期望的目的,这也就是一个定时器效果,恰好在js中就已经给定了这样的一个函数setTimeout(),下面先介绍一下次函数的 用法: 语法:  复制代码 代码如下: setTimeout(code,interval) 此函数能够规定在指定的在指定的事件之后去执行一段指定代码,此代码只执行一次. setTimeout()函数具有两个参数,第一个参数规定要执行的执行代码,第二个参数规定在多长时间后去执行代码,单位是毫秒. 代码实例: <!D

基于javascript实现泡泡大冒险网页版小游戏_javascript技巧

本文实例为大家分享了一个很有趣的网页版游戏,有点类似金山打字游戏的青蛙过河,供大家参考,具体内容如下 效果图: 实现思路: 益智类小游戏,主要练习打字能力,基于jq开发. 1.在输入框输入泡泡对应文字,点击enter提交 2.与泡泡文字相对提示分数 3.可以暂停操作 4.每次泡泡着地会减少血量,减少到0结束游戏 5.每过一段时间会加快泡泡下落速度 具体代码: <html> <head> <meta http-equiv="Content-Type" con

基于JavaScript实现Json数据根据某个字段进行排序_javascript技巧

一.首先给大家介绍js中内置的 sort() 方法 此方法默认是按字母顺序对数组中的元素进行排序的,说得更精确点,是按照字符编码的顺序进行排序. 看如下例子: 当数组中元素为 数字类型 时,排序结果与我们设想的完全不同,因为默认是按照字符编码的顺序进行排序的. 解决方案:sort() 方法接收一个可选参数(此参数必须是函数),我们可以自己定义排序规则,如下图 二.  对 json 排序的具体实现 /* * @description 根据某个字段实现对json数组的排序 * @param arra

基于JavaScript实现移动端TAB触屏切换效果_javascript技巧

展示效果图如下所示: 效果演示 源码下载 我们使用移动端时可以通过触屏手势左右滑动来切换TAB栏目,如网易新闻等APP栏目切换.我们说的TAB一般由导航条和TAB对应的内容组成,切换导航条上的标签同时标签对应的内容也会跟着切换.本文将结合实例给大家介绍一个移动端TAB触屏切换效果. HTML 我们准备一个TAB导航#pagenavi,里面包含TAB导航要切换的四个导航按钮,然后是切换的主体内容#slider,这里应该放置四个li与导航按钮对应,内容自定义. <div class="box-

基于javascript实现根据身份证号码识别性别和年龄_javascript技巧

本文实例介绍了javascript实现根据身份证号码识别性别和年龄的详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <meta charset="gb2312"> <title>jb51</title> <script type="text/javascript"> function discriCard(UUserCard) { UUserCar

基于JavaScript实现 网页切出 网站title变化代码_javascript技巧

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>这里是网站标题</title> </head> <body> <script type="text/javascript"> document.body.onfocus = function

基于JavaScript实现移除(删除)数组中指定元素_javascript技巧

在Array对象中有给定的函数可以删除数组中指定的元素,虽然非常好用,但是总感觉看不到摸不着的比较别扭,下面就分享一个自定义的删除数组指定索引值元素的函数,希望给大家一个全新的思路. 代码实例如下: var array=[]; array[0]="一"; array[1]="二"; array[2]="三"; array[3]="四"; array[4]="五"; function remove(array

基于Javascript实现文件实时加载进度的方法_javascript技巧

我们首先来看看要实现的效果图 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin: 0;padding: 0;} div{width:200px;height: 30px;border:1px solid #ccc;ma