wap页活动倒计时
来源：互联网 发布：淘宝女装店铺策划书 编辑：程序博客网 时间：2024/04/29 21:50
1.活动倒计时
2.商品倒计时（定时更换图片及位置）
html:
<div id="timer"> <div id="t_status"></div></div><div id="goods" style="height: 41.52rem;"></div>
css:
<style> #goods ul li img,#timer{width:10rem} #t_status li{color:#fff;text-align:center} #timer{height:3.387rem;background:url(time_bg.jpg) no-repeat;background-size:10rem 3.387rem;position:relative} #t_status{width:8.24rem;height:1.867rem;background-size:8.24rem 1.867rem;position:absolute;top:.587rem;left:.827rem} #t_status li{width:.427rem;height:.613rem;font-size:.48rem;line-height:.613rem;position:absolute;top:.92rem} #cnDay{left:.773rem} #cnHourOne{left:1.813rem} #cnHourTwo{left:2.253rem} #cnMinuteOne{left:3.653rem} #cnMinuteTwo{left:4.093rem} #cnSecondOne{left:5.107rem} #cnSecondTwo{left:5.547rem} #halfofftitle{display:block;width:10rem;height:.907rem;font-size:.64rem;line-height:.907rem;text-align:center;font-weight:600;color:#333;position:absolute;top:1.547rem}</style>
js:
<script> $(function(){ var cd = new Countdown(); cd.init(); setInterval(function () { var tNow = new Date(); var tMinutes = tNow.getMinutes(); var tSeconds = tNow.getSeconds(); if(tMinutes==0 && tSeconds==0){ cd.init(); } },1000); }); var Countdown = function(){ this.deadline = 1476633600000;//new Date("2016-10-17 00:00:00").getTime(); //活动截止时间 this.beginTime = 1476460800000;//new Date("2016-10-15 00:00:00").getTime(); this.goodsBegintime = 1476496800000;//new Date("2016-10-15 10:00:00").getTime(); //商品活动开始时间 this.goodsDeadline = 1476500400000;//new Date("2016-10-15 11:00:00").getTime(); //商品活动截止时间 this.status = -1; //活动状态 -1--未开始 0--正在进行 1--活动结束 this.goodStatus = -1; //商品活动状态 -1--未开始 0--正在进行 1--活动结束 }; Countdown.prototype = { init: function(){ //获取当前时间，判断活动状态 this.getStaus(); }, getStaus: function(){ var _this = this; var now = new Date().getTime(); if(now<_this.beginTime){ //未开始 _this.status = -1; _this.goodStatus = -1; _this.setBanner(_this.status); _this.goodsDisplay(_this.goodStatus); }else if(now>=_this.beginTime&&now<_this.deadline){ //活动进行中 _this.status = 0; _this.setBanner(_this.status); //倒计时显示功能 _this.setCountnum(); if(now<=_this.goodsDeadline&&now>=_this.goodsBegintime){ _this.goodStatus = 0; }else if(now>=_this.goodsDeadline){ _this.goodStatus = 1; }else{ _this.goodStatus = -1; } _this.goodsDisplay(_this.goodStatus); }else{ //活动结束 _this.status = 1; _this.goodStatus = 1; _this.setBanner(_this.status); _this.setTimeNum('00000000'); _this.goodsDisplay(_this.goodStatus); } }, setBanner: function(a){ if(a==-1){ $('#t_status').css("background-image",'url('+'"'+'will.png'+'"'+')'); }else{ $('#t_status').css("background-image",'url('+'"'+'timing_bg.png'+'"'+')'); $('#t_status').html('<ul id='+'"'+'ts_ul'+'"'+'><li id='+'"'+'cnDay'+'"'+'></li><li id='+'"'+'cnHourOne'+'"'+'></li><li id='+'"'+'cnHourTwo'+'"'+'></li><li id='+'"'+'cnMinuteOne'+'"'+'></li><li id='+'"'+'cnMinuteTwo'+'"'+'></li><li id='+'"'+'cnSecondOne'+'"'+'></li><li id='+'"'+'cnSecondTwo'+'"'+'></li></ul>'); } }, setTimeNum: function(a){ $('#cnDay').html(a.charAt(0)); $('#cnHourOne').html(a.charAt(1)); $('#cnHourTwo').html(a.charAt(2)); $('#cnMinuteOne').html(a.charAt(3)); $('#cnMinuteTwo').html(a.charAt(4)); $('#cnSecondOne').html(a.charAt(5)); $('#cnSecondTwo').html(a.charAt(6)); }, goodsDisplay: function(a){ switch(a){ case -1: $('#goods').html('<ul><li style='+'"'+'position:relative;'+'"'+'><a href='+'"'+'#'+'"'+'><img src='+'"'+'img/product_1.jpg'+'"'+'/><span id='+'"'+'halfofftitle'+'"'+'>10月15日 早10点准时开抢</span></a></li><li><a href='+'"'+'#'+'"'+'><img src='+'"'+'img/product_2.jpg'+'"'+'/></a></li><li><a href='+'"'+'#'+'"'+'><img src="img/product_3.jpg'+'"'+'/></a></li></ul>'); break; case 0: $('#goods').html('<ul><li style='+'"'+'position:relative;'+'"'+'><a href='+'"'+'#'+'"'+'><img src='+'"'+'img/product_1.jpg'+'"'+'/><span id='+'"'+'halfofftitle'+'"'+'>净化空气 离心静音</span></a></li><li><a href='+'"'+'#'+'"'+'><img src='+'"'+'img/product_2.jpg'+'"'+'/></a></li><li><a href='+'"'+'#'+'"'+'><img src="img/product_3.jpg'+'"'+'/></a></li></ul>'); break; case 1: $('#goods').html('<ul><li><a href='+'"'+'#'+'"'+'><img src='+'"'+'img/product_3.jpg'+'"'+'/></a></li><li><a href='+'"'+'#'+'"'+'><img src='+'"'+'img/product_2.jpg'+'"'+'/></a></li><li><img src='+'"'+'img/product_1_over.jpg'+'"'+'/></li></ul>'); break; } }, setCountnum: function(){ var _this = this; var now = new Date().getTime(); var mss = parseInt((_this.deadline - now)/1000); //取整 function down(){ mss--; if(mss>0){ //得到内容 seconds = mss%60+''; minutes = Math.floor((mss%(60*60))/60)+''; hours = Math.floor((mss%(60*60*24))/(60*60))+''; days = Math.floor(mss/(60*60*24))+''; //console.log(days+'-'+hours+'-'+minutes+'-'+seconds); //写入内容 s = seconds.length<2 ? '0'+seconds : seconds; m = minutes.length<2 ? '0'+minutes : minutes; h = hours.length<2 ? '0'+hours : hours; mytime = days+h+m+s; _this.setTimeNum(mytime); }} down(); setInterval(down,1000); } };</script>
图片素材地址：https://pan.baidu.com/s/1eR8PdD4
页面初始化JS：https://pan.baidu.com/s/1bpNy7W7
0 0
- wap页活动倒计时
- 活动倒计时
- javascript 活动倒计时
- js活动时间倒计时
- javascript编写活动倒计时
- 活动倒计时功能
- 砍价活动倒计时
- 活动倒计时+fixed定位+跳转到本页指定位置
- 活动h5页面倒计时效果
- TextView实现高仿京东活动倒计时
- JS 活动倒计时 根据服务器时间判断
- 团购以及活动倒计时简单实现
- 活动开始和截止时间倒计时
- 秒杀活动倒计时 iOS代码实现
- 社交系统ThinkSNS+预售活动结束倒计时
- WAP shtml页设置
- WAP页上传图片
- wap页开发笔记
- gulp教程之gulp-less
- 动态规划-最长递增子序列
- java 四舍五入取整
- Android源码解析——AsyncTask
- C#四路继电器usb转com口编程
- wap页活动倒计时
- $.each的用法
- 怎样创建任务计划程序
- 【面向代码】学习 Deep Learning（一）Neural Network
- 易语言 获取系统目录
- 【Day20】数据库中的事务是什么 ?
- 对象内存分配策略
- C语言解析csv文件
- Google interview 学习手册-搜索的原理
