JS实现双十一倒计时抢购效果
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时抢购商品</title>
<style>
html, body, ul {
margin: 0;
padding: 0;
}
body {
padding: 10px;
}
h1 {
font-size: 14px;
}
ul {
font-size: 0;
}
li {
list-style: none;
background: url(10-img/down.png) 0 0 no-repeat;
width: 162px;
height: 279px;
display: inline-block;
border-top: 1px solid #A0A0A4;
position: relative;
}
.box {
position: absolute;
top: 0;
left: 0;
background: #fff;
width: 152px;
height: 269px;
padding: 5px;
margin: 0 2px;
}
#showcase li:first-child .box {
margin-left: 0;
}
.box img {
width: 100px;
height: 80px;
margin: 20px;
}
.box input[type="text"] {
width: 106px;
height: 16px;
background: #DED6E7;
color: #522121;
font-size: 12px;
border: 1px solid #EFEFEF;
padding: 2px;
}
.box input[type="button"] {
color: #847373;
background: #fff;
border: none;
width: 36px;
font-size: 14px;
font-weight: bold;
}
.box .timeoff {
font-size: 14px;
color: #A0A0A4;
text-align: center;
}
.box p {
font-size: 14px;
margin-bottom: 0;
}
.box span {
color: #BDADBD;
font-weight: bold;
}
.box .price {
color: #BD214A;
font-weight: bold;
}
table {
width: 648px;
background: #DED6E7;
text-align: center;
font-size: 14px;
color: #522121;
font-weight: bold;
margin-top: 30px;
border-collapse: collapse;
}
td {
padding: 10px 0;
border-top: 4px solid #fff;
border-bottom: 4px solid #fff;
}
td img {
width: 80px;
height: 51px;
border: 1px solid #8C4A4A;
margin-left: 120px;
}
tbody tr td:first-child {
width: 180px;
padding: 0 10px;
color: #000;
font-weight: normal;
}
tbody div {
width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#total {
font-weight: bold;
font-size: 20px;
}
#total .all {
color: #BD214A;
}
</style>
<script>
function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }
function shake ( obj, attr, endFn ) {
// if( !obj.shaked ) { return; }
var pos = parseInt( getStyle(obj, attr) ); // 有隐患的
var arr = []; // 20, -20, 18, -18 ..... 0
var num = 0;
var timer = null;
for ( var i=10; i>0; i-=2 ) {
arr.push( i, -i );
}
arr.push(0);
// obj.shaked = false;
clearInterval( obj.shake );
obj.shake = setInterval(function (){
obj.style[attr] = pos + arr[num] + 'px';
num++;
if ( num === arr.length ) {
clearInterval( obj.shake );
// obj.shaked = true;
endFn && endFn();
}
}, 50);
}
function doMove ( obj, attr, dir, target, endFn ) {
dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir;
clearInterval( obj.timer );
obj.timer = setInterval(function () {
var speed = parseInt(getStyle( obj, attr )) + dir; // 步长
if ( speed > target && dir > 0 || speed < target && dir < 0 ) {
speed = target;
}
obj.style[attr] = speed + 'px';
if ( speed == target ) {
clearInterval( obj.timer );
/*
if ( endFn ) {
endFn();
}
*/
endFn && endFn();
}
}, 30);
}
function opacity(obj, step, target, frequency, endFn){
var currentOpacity = getStyle(obj, 'opacity') * 100;
step = currentOpacity < target ? step : -step;
clearInterval(obj.alpha);
obj.alpha = setInterval(function(){
currentOpacity = getStyle(obj, 'opacity') * 100;
var nextOpacity = currentOpacity + step;
if(step > 0 && nextOpacity > target || step < 0 && nextOpacity < target){
nextOpacity = target;
}
obj.style.opacity = nextOpacity/100;
obj.style.filter = 'alpha(opacity:' + nextOpacity + ')';
if(nextOpacity == target){
clearInterval(obj.alpha);
endFn && endFn();
}
}, frequency);
}
window.onload = function(){
var oUl = document.getElementById('showcase'),
aBox = oUl.getElementsByTagName('div'),
oTbody = document.getElementsByTagName('tbody')[0],
// oTable = document.getElementsByTagName('table'),
oTotal = document.getElementById('total').getElementsByTagName('span')[0];
function timeoff(box){
var oBtn = box.getElementsByTagName('input')[1];
oBtn.onclick = function(){
var iNew = new Date(box.getElementsByTagName('input')[0].value);
var oP = box.getElementsByTagName('p')[0];
var oP2 = box.getElementsByTagName('p')[1];
var price = box.getElementsByTagName('span')[2].innerHTML;
var oImg = box.getElementsByTagName('img')[0];
clearInterval(box.timer);
box.timer = setInterval(function(){
var iNow = new Date();
var t = Math.floor((iNew - iNow)/1000);
if(t >= 0){
oP.innerHTML = '剩余' + Math.floor(t/86400) + '天' + Math.floor(t%86400/3600) + '时' + Math.floor(t%86400%3600/60) + '分' + t%60 + '秒';
} else {
clearInterval(box.timer);
shake (box, 'left', function(){
doMove (box, 'top', 10, 279);
opacity(box, 10, 0, 30, function(){
box.style.display = 'none';
oTbody.innerHTML += '<tr><td><div>' + oP2.innerHTML + '<div></td><td>' + price + '</td><td><img src="' + oImg.src + '" /></td></tr>';
oTotal.innerHTML = parseFloat(oTotal.innerHTML) + parseFloat(price);
});
})
}
}, 1000)
}
}
for(var i=0; i<aBox.length; i++){
timeoff(aBox[i]);
}
}
</script>
</head>
<body>
<h1>限购时间</h1>
<ul id="showcase">
<li>
<div class="box">
<input type="text" value="August 28, 2014 21:56:0">
<input type="button" value="确定">
<p class="timeoff">剩余00天00时00分00秒</p>
<img src="10-img/ad1.png" />
<p>疯狂599，美的爆款隐藏式面板下拉门微波炉</p>
<p><span>抢购价：</span><span class="price">￥</span><span class="price">599.00</span></p>
</div>
</li>
<li>
<div class="box">
<input type="text" value="August 28, 2014 21:56:0">
<input type="button" value="确定">
<p class="timeoff">剩余00天00时00分00秒</p>
<img src="10-img/ad2.png" />
<p>疯狂3299，美的爆款隐藏式面板下拉门微波炉</p>
<p><span>抢购价：</span><span class="price">￥</span><span class="price">3299.00</span></p>
</div>
</li>
<li>
<div class="box">
<input type="text" value="August 28, 2014 21:56:0">
<input type="button" value="确定">
<p class="timeoff">剩余00天00时00分00秒</p>
<img src="10-img/ad3.png" />
<p>疯狂1块钱，美的爆款隐藏式面板下拉门微波炉</p>
<p><span>抢购价：</span><span class="price">￥</span><span class="price">1.00</span></p>
</div>
</li>
<li>
<div class="box">
<input type="text" value="August 28, 2014 21:56:0">
<input type="button" value="确定">
<p class="timeoff">剩余00天00时00分00秒</p>
<img src="10-img/ad4.png" />
<p>疯狂168，美的爆款隐藏式面板下拉门微波炉</p>
<p><span>抢购价：</span><span class="price">￥</span><span class="price">168.00</span></p>
</div>
</li>
</ul>
<table>
<thead>
<tr>
<td width="200px">商品名称</td>
<td width="150px">价钱</td>
<td width="298px"></td>
</tr>
</thead>
<tbody>
<!-- <tr><td><div>疯狂599，美的爆款隐藏式面板下拉门微波炉<div></td><td>599.00</td>
<td><img src="10-img/ad4.png" /></td></tr> -->
</tbody>
</table>
<p id="total">
总价：<span class="all">0</span>元
</p>
</body>
</html>
JS实现双十一倒计时抢购效果相关推荐
- js实现酷炫倒计时动画效果
前段时间和朋友去音乐餐厅吃饭,中间有个活动,然后看到他们软件公众号H5有个活动开始的倒计时的动画效果,于是想了下实现思路. <!DOCTYPE html> <html> < ...
- js实现指定时间倒计时时间效果
指定时间倒计时 div页 <div id="a">离2020还剩下<span></span><span></span>& ...
- js选中html的数字设置倒计时,JS实现的网页倒计时数字时钟效果
本文实例讲述了JS实现的网页倒计时数字时钟效果.分享给大家供大家参考.具体实现方法如下: 代码如下: javascript实现的倒计时时钟 body,div{margin:0;padding:0;} ...
- 2019年双十一倒计时JS代码
2019年双十一倒计时JS代码(实时刷新) <!DOCTYPE html> <html><head><meta charset="utf-8&quo ...
- （常用代码）原声JS 实现倒计时的效果。分/秒/毫秒/
(常用代码)原声JS 实现倒计时的效果.分/秒/毫秒/ 第一步:构建HTML 结构和样式 <!-- 构建 HTML --> <div class="timing" ...
- html广告倒计时代码,js实现倒计时广告效果
页面上经常弹出一些广告,过了几秒之后才出现关闭广告按钮(或者关闭按钮才可点)或者剩余指定时间才给你跳过广告(其实从用户的角度看,这个效果挺烦人的哈哈哈),效果大概如下图: js实现倒计时广告效果.gi ...
- Vue倒计时动画效果
这一次在b站看到一个博主做的一个倒计时的动画效果,跟着做了一下.以下是对此次项目的一些记录与总结. 该项目效果链接:Vue倒计时 HTML部分: <div id="app"& ...
- 使用JSAPl来做一个倒计时的效果
今天的小案例需要做一个倒计时的效果 我们的时分秒需要一直进行倒计时,然后我们的页面颜色需要根据定时器的操作来进行更换,首先我们还是可以来分析一下我们的HTML步骤 <div class=&quo ...
- js 倒计时 php,JS如何实现分钟倒计时（十分钟倒计时实例）
工作中经常需要在页面中设置倒计时,那你知道JS如何实现分钟倒计时吗?这篇文章和大家分享一个JS十分钟倒计时代码,非常简单实用,感兴趣的朋友可以看看. 编写JS倒计时代码需要用到很多JavaScript ...
- php实现秒杀倒计时,小程序中实现电商秒杀倒计时的效果
在电商应用中,经常会用到秒杀,那么秒杀会有个倒计时功能,这里我们把上次给大家展示的倒计时功能用到电商应用中去. 基本实现功能 1,小程序仿电商网站秒杀倒计时 2,显示格式为:例如 1天11时11分11 ...
最新文章
- ORA-20204 错误
- chrome 主进程cpu占用50%怎么办？
- windows 和linux查看硬件信息,Linux下如何查看硬件信息？
- 32年寻获上帝粒子，华人女学者自述高能人生故事
- php案例纠错,PHP编程纠错指南
- AndroidStudio_androidstudio连接华为 HUAWEI Mate平板_调试测试---Android原生开发工作笔记143
- 【十九】文件译文：reportgenerator.properties （报表生成器属性文件）
- 解决myeclipse里面git的更新（pull）操作问题
- 【NeurIPS 2019】17篇论文，详解图的机器学习趋势
- fanuc机器人与示教器配对_阳江Fanuc机器人示教器维修中心
- 《App后台开发运维和架构实践》勘误
- matlab2010安装详细图解案例
- VMware 虚拟机 Ubuntu 系统执行 ifconfig 命令 eth0没有IP地址(intet addr、Bcast、Mask) 解决：UP BROADCAST MULTICAST 问题
- 二级路由器配置网址无法访问的解决方法
- 微信小程序音频的使用：wx.createInnerAudioContext的使用
- 雷石 扩展文件服务器,雷石发布KTV软硬件新品：智能手表可点歌
- 李晋的YIM每日签名
- excel一列前加一固定值
- linux怎么静态改为自动获取,Linux系统下设置静态IP或自动获取动态IP的简单方法...
- python库01—scipy.linalg(线性代数)