HTML设置限时抢购倒计时步骤,web端 商品抢购倒计时代码实现
项目中用到了,简单整理在这
更新:
一开始从服务器获取的是时间点,然后根据本地时间求得差值显示倒计时,一开始这么做我是内心拒绝的(这样修改本机时间就会显示正在抢购了,但是无法下单后台有控制),但是接口是这么给的,而且抢购活动页以前的开发也是这么做的,所以就按照当时的接口写的,测试的时候正好测试发现了这个问题,产品拍板改!然后改成了从服务器获取时间段的方法处理倒计时。
var rushtime = $("#rushTime").attr("value");//活动状态
var longtime = $("#longTime").attr("value");//当前活动状态下的活动时长
var rushdiscount = $("#rushDiscount").attr("value");//折扣
var begintoend = $("#beginToEnd").attr("value");//活动从开始到结束的全部持续时间
var countprice = $("#countprice").attr("value");//价格
if(rushtime == 1 || rushtime == 2){
//活动未开始,活动进行中
countDown(longtime,rushtime,begintoend);
}else if(rushtime == 3){
//活动已结束
$("#qianggou").show().html("活动已结束");
}else{
//没有活动
$("#qianggou").hide();
}
function countDown(longtime,rushtime,begintoend){
var time = longtime;
time = parseInt(time / 1000);
var day = Math.floor(time / (60*60*24));
time -= day * (60*60*24);
var hour = Math.floor(time /(60*60));
time -= hour * (60*60);
var minute = Math.floor(time / 60);
var second = time - (minute * 60);
if(day<10){
if(day<0 && rushtime == 1){
// 切换到正在抢购
rushtime = 2;
window.setTimeout(function(){countDown(begintoend,rushtime,begintoend);},1000);
}else if(day<0){
$("#qianggou").show().html("活动已结束");
$(".preprice1").html("").hide();
return;
}else{
day="0"+day;
}
}
if(hour<10){
hour="0"+hour;
}
if(minute<10){
minute="0"+minute;
}
if(second<10){
second="0"+second;
}
if(rushtime == 2){
$(".preprice1 i").html((countprice*rushdiscount).toFixed(2));
$(".preprice1").show();
}
if(rushtime == 1 && day==0&&hour==0&&minute==0&&second==1){
$("#qianggou").show().html("距离抢购还有 "+day+"天"+hour+"时"+minute+"分"+second+"秒");
rushtime = 2;
window.setTimeout(function(){countDown(begintoend,rushtime,begintoend);},1000);
}else if(rushtime == 1){
$("#qianggou").show().html("距离抢购还有 "+day+"天"+hour+"时"+minute+"分"+second+"秒");
longtime = longtime-1000;
window.setTimeout(function(){countDown(longtime,rushtime,begintoend);},1000);
}else if(day==0&&hour==0&&minute==0&&second==0){
$("#qianggou").show().html("活动已结束");
$(".preprice1").html("").hide();
return;
}else{
$("#qianggou").show().html("限时抢购剩余 "+day+"天"+hour+"时"+minute+"分"+second+"秒");
longtime = longtime-1000;
window.setTimeout(function(){countDown(longtime,rushtime,begintoend);},1000);
}
}
旧的代码
//dateend是活动结束日期事件戳
function countDown(dateend){
var now = Date.parse(new Date());
var str = dateend;
var target = Date.parse(new Date(str));
var time = target - now;
time = parseInt(time / 1000);
var day = Math.floor(time / (60*60*24));
time -= day * (60*60*24);
var hour = Math.floor(time /(60*60));
time -= hour * (60*60);
var minute = Math.floor(time / 60);
var second = time - (minute * 60);
if(day<10){
if(day<0){
$("#buy").html("活动已结束");
return;
}else{
day="0"+day;
}
}
if(hour<10){
hour="0"+hour;
}
if(minute<10){
minute="0"+minute;
}
if(second<10){
second="0"+second;
}
if(day==0&&hour==0&&minute==0&&second==0){
$("#buy").html("活动已结束");
}else{
$("#buy").html("限时抢购剩余"+day+"天"+hour+"时"+minute+"分"+second+"秒");
}
window.setTimeout(function(){countDown(dateend);},1000);
}
HTML设置限时抢购倒计时步骤,web端 商品抢购倒计时代码实现相关推荐
- Web端测试——F12的代码调试与抓包
最近很多同学问我浏览器的F12是什么东东?是干什么用的?为了解决大家的疑问,我特意写了这篇文章,总结了F12的使用. 下面的讲解,主要是以Microsoft Edge浏览器和360极速浏览器中的截图为 ...
- UI自动化web端框架path.py代码
import os,sys BASE_PATH = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__)) ...
- 移动web端的react.js组件化方案
背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...
- web端项目展开测试步骤
web端项目展开测试步骤: 1.功能测试 1.1链接测试 链接是Web应用系统的一个主要特征,它是在页面之间切换和指导用户去一些不知道地址的页面的主要手段.链接测试可分为三个方面.首先,测试所有链接是 ...
- 会议签到web_GitHub - dzhgb/EasyMeeting_Web: [ThinkPHP5] 智能会议室Web端:账号管理、会议室设置、用户预约、在线签到...
技术文档 平台 服务端:ThinkPHP框架 + MySQL数据库 管理端:Web(ThinkPHP(PHP)+ jQuery + MDUI+ bootstrap) 预定端:Web.Android(J ...
- 聊一聊Web端的即时通讯
聊一聊Web端的即时通讯 Web端实现即时通讯的方法有哪些? - 短轮询 长轮询 iframe流 Flash Socket 轮询 客户端定时向服务器发送Ajax请求,服务器接到请求后马上返回响应信息并 ...
- 用云服务器实现janus之web端与web通话!
一.前言: 大家周末好,今天给大家分享janus环境搭建以及如何实现web端与web端的实时通话!在写正式文章之前,首先要说明一下,本次环境的搭建,我没有在ubuntu本地去搭建,而是腾讯云服务器上搭 ...
- 身份验证错误错误指定的句柄无效_基于 Web 端的人脸识别身份验证「实践」
作者:沫沫 政采云前端团队 转发链接:https://mp.weixin.qq.com/s/fRDpXixnLIy9c0Uh2tMezQ 前言 近些年来,随着生物识别技术的逐渐成熟,基于深度学习的人脸 ...
- Web端H.265播放器研发解密
音视频编解码对于前端工程师是一个比较少涉足的领域,涉及到流媒体技术中的文本.图形.图像.音频和视频多种理论知识的学习,才能够应用到具体实践中,本团队在多媒体领域深耕两年多,才算是有一定产出,我们自研w ...
最新文章
- php+弱数据类型,PHP的弱数据类型
- dpkg ---- apt-get ------ aptitude 三种方式的区别 及命令格式
- 钉钉小程序数据传递——子传父,父传子
- 鼠标右键 移动选定的文件夹到指定位置_怎么把电脑桌面上的文件移动到更加安全的地方...
- iHealth基于Docker的DevOps CI/CD实践
- telegram 机器人_学习使用Python在Telegram中构建您的第一个机器人
- 请教 这段代码有问题吗
- SQL Server 2005数据库快照
- TensorFlow基础笔记(13) tf.name_scope tf.variable_scope学习
- 洛谷P2486 [SDOI2011]染色(树链剖分+线段树判断边界)
- 一个OSPF的区域备份在手册里看到的
- sql时间转换时分秒_SQL时分秒之间相互转换
- 桥牌笔记:一定要飞张?
- 阵列式键盘实训C语言,新人求教 阵列式键盘
- 20210422-微信刷脸支付获取调用凭证authinfo的时候,提示 rawdata无效
- 用计算机绘制三维设计图步骤,三维计算机图形
- Qt ui 到底是什么?
- 怎样才算通用人工智能?
- 企业微信如何实现PC端扫码登录第三方网站
- Elasticsearch:时间点 API
热门文章
- 2023最新OneTheme彩虹易支付用户模板美化主题模板源码/包括Admin端
- Android Wifi开发——室内网络(十八)
- Android硬编、硬解h264
- 可爱的排序——冒泡排序
- 少一些计较多_非常经典的句子:人生,少一点计较,就多一点快乐!(句句入心)...
- QQ 安全防护更新进程的窗口
- 开启xmp1还是2_2020幸运召唤师最新消息 每个大区均可以参与还是一个QQ参与一次...
- java面试题之个人对正向代理和反向代理的理解
- 幼儿园体育游戏电子计算机教案,幼儿园体育游戏教案3篇
- 中兴通讯5G OLT应急抢通解决方案荣获2022年度大奖!