html js秒杀倒计时,JavaScript仿京东秒杀倒计时代码实例

本篇文章小编给大家分享一下JavaScript仿京东秒杀倒计时代码实例，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

仿京东秒杀倒计时

html代码

秒杀倒计时

css样式代码

margin: 0;

padding: 0;

}

#box{

width: 200px;

height:300px;

margin: 200px 200px;

background: red;

position: relative;

}

.txt{

width: 150px;

height:50px;

text-align: center;

line-height: 50px;

color: #fff;

font-size: 30px;

font-weight: 900;

position: absolute;

left: 25px;

top: 50px;

}

.hour{

left: 20px;

}

.h_m{

left: 68px;

}

.minute{

left: 80px;

}

.m_s{

right: 68px;

}

.second{

left: 140px;

}

.hour,.minute,.second{

position: absolute;

top:200px;

color: #fff;

font-size: 20px;

text-align: center;

line-height: 40px;

width: 40px;

height: 40px;

background: black;

}

.h_m, .m_s{

color: #fff;

font-size: 20px;

font-weight: 900;

position: absolute;

bottom: 70px;

}

js调用函数倒计时代码

//1、获取元素

var hour=document.querySelector('.hour');

var minute=document.querySelector('.minute');

var second=document.querySelector('.second');

var inputTime=+new Date('2020-3-11 20:00:00');//倒计时的结束时间，自己设置时间

countDown();//先调用一次这个函数防止第一次刷新页面有空白

//2、开启定时器

setInterval(countDown,1000);//1000毫秒，每一秒钟调用一次函数

//3、倒计时-时分秒函数

function countDown(){

var nowTime=+new Date(); //返回的是当前时间的总的毫秒数

var times=(inputTime-nowTime)/1000; // times是剩余时间的总的毫秒数

var h=parseInt(times/60/60%24);

h=h<10?'0'+h:h;//判断数值小于10的情况如 0-9改为 00-09

hour.innerHTML=h;//更改div里面的内容把h给获取元素hour的内容

var m=parseInt(times/60%60);

m=m<10?'0'+m:m;

minute.innerHTML=m;//同上

var s=parseInt(times%60);

s=s<10?'0'+s:s;

second.innerHTML=s;//同上

}

效果图

html js秒杀倒计时,JavaScript仿京东秒杀倒计时代码实例相关推荐

android高仿京东秒杀,Android通过实现GridView的横向滚动实现仿京东秒杀效果
实现GridView的横向滚动效果如下图: 具体实现的代码 •1. 主界面布局代码:activity_main.xml android:layout_width="fill_parent& ...
JavaScript实现京东秒杀效果
这篇文章主要为大家详细介绍了JavaScript实现京东秒杀效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了JavaScript实现京东秒杀效果 ...
曼哈顿距离java实现_基于javascript实现获取最短路径算法代码实例
这篇文章主要介绍了基于javascript实现获取最短路径算法代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下代码如下 //A算法自动寻路 ...
各种滤镜算法C语言,JavaScript多种滤镜算法实现代码实例
这篇文章主要介绍了JavaScript多种滤镜算法实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.灰色滤镜设定R,G,B值相等 f ...
android高仿京东秒杀,Android仿京东首页秒杀倒计时
本文实例为大家分享了Android仿京东首页秒杀倒计时的具体代码,供大家参考,具体内容如下 xml配置 android:layout_width="wrap_content" an ...
android高仿京东秒杀,Android实现京东秒杀界面
本文实例为大家分享了Android实现京东秒杀界面展示的具体代码,供大家参考,具体内容如下效果图: 京东秒杀是两个小时一个场次,判断本机的时间进行场次定时,然后在这两个小时里面进行倒计时. Main ...
Android——仿京东秒杀
效果图: 京东秒杀是两个小时一个场次,判断本机的时间进行场次定时,然后在这两个小时里面进行倒计时. MainActivity import android.os.Handler; import and ...
HTML期末学生大作业（9套）html+css+javascript仿京东、天猫、服装、各大电商模板(大学毕业设计)
web前端html+css+js仿京东商城/天猫/电商平台❤功能齐全(大学毕业设计论文) 仿京东/天猫/苏苏/鞋服商城/服装商城/古装商城/商城首页/商城html/商城模板/商城购物/中文电商/商城h ...
python秒杀神器_Python实现京东秒杀功能代码
本文实例为大家分享了Python实现京东秒杀功能的具体代码,供大家参考,具体内容如下 #Python 3.5 #coding:utf-8 #import scrapy from selenium im ...

html js秒杀倒计时,JavaScript仿京东秒杀倒计时代码实例

html js秒杀倒计时,JavaScript仿京东秒杀倒计时代码实例相关推荐

最新文章

热门文章