商城倒计时代码

作者：阿凡达0205 | 来源：互联网 | 2023-08-23 19:42

商城倒计时*{margin

<html lang&＃61;"en"> <head><meta charset&＃61;"UTF-8"><title>商城倒计时title><style>*{margin: 0px;padding: 0px}body{width: 100%;height: 100%;background: #333;}.box{width:200px;height:280px;margin: 0 auto;background: url("../image/countdownBg.png") no-repeat center;background-size: 100% 100%;margin-top:100px}.countDown{padding:20px 0}.countDown .title{font-size:34px;color: #ffffff;text-align: center}.countDown .titleEn{font-size: 20px;text-align: center;color: rgba(255,255,255,0.3);}.countDown .bolt{width: 20px;height: 35px;background: url(../image/bolt.png) no-repeat center;margin: 20px auto;}.countDown .countDownOver{font-size: 16px; text-align: center;color: #ffffff;}.countDown .countDownTime {width: 175px;height: 40px;background: url(../image/countDownTime.png) no-repeat center; margin: 20px auto 0 auto;}.countDown .countDownTime p { font-size: 26px;color: #ffffff;font-weight: bold; float: left;width: 40px;height: 40px;text-align: center;line-height: 40px;margin-right: 5px;}.countDown .countDownTime p:last-child{margin-right: 0px}style> head> <body> <div class&＃61;"box"><div class&＃61;"countDown"><h1 class&＃61;"title">阳光采购h1><p class&＃61;"titleEn">FLASH DEALSp><div class&＃61;"bolt">div><p class&＃61;"countDownOver">p><div class&＃61;"countDownTime clearfix">div>div> div> body> <script src&＃61;"../js/jquery-2.2.4.min.js">script> <script> // 注意的坑 // 1.当前的时间获取一次,是一个定值&＃xff0c;必须使用定时器才能时刻变化当前的时间。所以要以参数的形式传进去 // 2.给出的时间格式参数有5种//new Date("month dd,yyyy hh:mm:ss");//new Date("month dd,yyyy");//new Date(yyyy,mth,dd,hh,mm,ss);//new Date(yyyy,mth,dd);//new Date(ms); // 3.从后台拿到的数据一般为字符串&＃xff0c;时间格式不支持 // 1.如果是时间戳的话&＃xff0c;可以使用 number和parseInt进行转换 // 2.如果是2009-6-28 15:23格式&＃xff0c;可以使用正则进行转换&＃xff0c;str.replace(/-/g,"/") <解释&＃xff1a;/-/g 是正则表达式表示将所有短横线-替换为斜杠/其中g表示全局替换> // 4.veracityTime 时间差&＃xff0c;如果想要精确的时间控制&＃xff0c;是不能依赖于Javascript的setTimeout或者setInterval函数的 // 5.setInterval()是在每隔指定的毫秒数循环调用函数或表达式&＃xff0c;直到clearInterval把它清除&＃xff0c;所以当我们定时器设置之后&＃xff0c;当不需要进行定时器的时候&＃xff0c;则用clear进行清空定时器。$(function () {var start_time&＃61;new Date("2018","7","8","14"); //开始的时间月份只有0-11&＃xff0c;所以要减一&＃xff1b;var end_time&＃61;new Date("2018","7","8","14"); //结束的时间function lastTime(times,nowTime) { //将时间进行换算 times指的是时间开始时间或结束时间&＃xff0c;nowTime只的是当前的时间var differenceTime&＃61;-480-nowTime.getTimezoneOffset(); //北京时间和地区的时间差&＃xff0c;一般为0var leftTime&＃61;(times.getTime()-nowTime.getTime()&＃43;differenceTime*60000); //相差的时间戳var day&＃61;Math.floor(leftTime/(1000*60*60*24));var hour &＃61; Math.floor(leftTime / (1000 * 3600)) - (day * 24);var minute &＃61; Math.floor(leftTime / (1000 * 60)) - (day * 24 * 60) - (hour * 60);var second &＃61; Math.floor(leftTime / (1000)) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);$(&＃39;.countDownTime&＃39;).html(&＃39;

&＃39;&＃43;(day<10?"0"&＃43;day:day)&＃43;&＃39;

&＃39;&＃43;(hour<10?"0"&＃43;hour:hour)&＃43;&＃39;

&＃39;&＃43;(minute<10?"0"&＃43;minute:minute)&＃43;&＃39;

&＃39;&＃43;(second<10?"0"&＃43;second:second)&＃43;&＃39;

&＃39;)}function setLeftTime() {
//          开始时间肯定比结束时间小  所以就没做判断var now_Time&＃61;new Date(); //当前时间应该随时变化&＃xff0c;用定时器进行刷新var veracityTime&＃61;now_Time.getMinutes() &＃43; &＃39;:&＃39; &＃43; now_Time.getSeconds() &＃43; &＃39;:&＃39; &＃43; now_Time.getMilliseconds();console.log(veracityTime);//使用定时器计算毫秒数  验证js的准确性if(now_Time//当现在的时间小于开始的时间$(&＃39;.countDownOver&＃39;).html("距离抽奖还有");lastTime(start_time,now_Time)}else if(now_Time//当现在的时间大于开始的时间小于现在结尾的时间$(&＃39;.countDownOver&＃39;).html("距离抽奖结束还有");lastTime(end_time,now_Time)}else {  //当现在的时间大于结束的时间&＃xff0c;说明活动结束。$(&＃39;.countDownOver&＃39;).html("敬请期待");lastTime(now_Time,now_Time);clearInterval(i);}}setLeftTime();var i&＃61;setInterval(setLeftTime,1000)});
script>
html>

对应的背景图片&＃xff1a;
这里写图片描述

推荐阅读

ip
CSS3选择器的使用方法详解，提高Web开发效率和精准度

本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]

蜡笔小新 2023-12-14 14:37:52
io
Python正则表达式学习记录及常用方法

本文记录了学习Python正则表达式的过程，介绍了re模块的常用方法re.search，并解释了rawstring的作用。正则表达式是一种方便检查字符串匹配模式的工具，通过本文的学习可以掌握Python中使用正则表达式的基本方法。 ... [详细]

蜡笔小新 2023-12-13 16:37:19
ip
【机器学习】生成式对抗网络模型综述

生成式对抗网络模型综述摘要生成式对抗网络模型(GAN)是基于深度学习的一种强大的生成模型，可以应用于计算机视觉、自然语言处理、半监督学习等重要领域。生成式对抗网络 ... [详细]

蜡笔小新 2023-12-14 17:51:18
io
PHP图片截取方法及应用实例

本文介绍了使用PHP动态切割JPEG图片的方法，并提供了应用实例，包括截取视频图、提取文章内容中的图片地址、裁切图片等问题。详细介绍了相关的PHP函数和参数的使用，以及图片切割的具体步骤。同时，还提供了一些注意事项和优化建议。通过本文的学习，读者可以掌握PHP图片截取的技巧，实现自己的需求。 ... [详细]

蜡笔小新 2023-12-14 16:44:09
command
伊振华作品 | 沈阳市智慧城市运行管理中心的设计与建设

本文介绍了设计师伊振华受邀参与沈阳市智慧城市运行管理中心项目的整体设计，并以数字赋能和创新驱动高质量发展的理念，建设了集成、智慧、高效的一体化城市综合管理平台，促进了城市的数字化转型。该中心被称为当代城市的智能心脏，为沈阳市的智慧城市建设做出了重要贡献。 ... [详细]

蜡笔小新 2023-12-14 16:35:39
import
Java实现大数乘法（分治算法）

本文介绍了使用Java实现大数乘法的分治算法，包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]

蜡笔小新 2023-12-14 15:43:50
ip
在Windows 8上安装gvim中的插件的错误加载问题

本文讨论了在Windows 8上安装gvim中插件时出现的错误加载问题。作者将EasyMotion插件放在了正确的位置，但加载时却出现了错误。作者提供了下载链接和之前放置插件的位置，并列出了出现的错误信息。 ... [详细]

蜡笔小新 2023-12-14 14:44:00
import
求解hdu 1003 java题目的动态规划优化方法

本文讨论了如何优化解决hdu 1003 java题目的动态规划方法，通过分析加法规则和最大和的性质，提出了一种优化的思路。具体方法是，当从1加到n为负时，即sum(1,n)sum(n,s)，可以继续加法计算。同时，还考虑了两种特殊情况：都是负数的情况和有0的情况。最后，通过使用Scanner类来获取输入数据。 ... [详细]

蜡笔小新 2023-12-14 13:11:00
import
OC学习笔记之@property和@synthesize

本文介绍了OC学习笔记中的@property和@synthesize，包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]

蜡笔小新 2023-12-14 12:05:06
ip
Voicewo在线语音识别转换jQuery插件的特点和示例

本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]

蜡笔小新 2023-12-13 20:01:16
text
java 线程死锁模拟

1，关于死锁的理解死锁，我们可以简单的理解为是两个线程同时使用同一资源，两个线程又得不到相应的资源而造成永无相互等待的情况。 2，模拟死锁背景介绍：我们创建一个朋友 ... [详细]

蜡笔小新 2023-12-13 19:12:25
io
Linux下Perl的安装及第一个程序运行

本文介绍了在Linux下安装Perl的步骤，并提供了一个简单的Perl程序示例。同时，还展示了运行该程序的结果。 ... [详细]

蜡笔小新 2023-12-13 18:29:11
io
《数据结构》学习笔记3——串匹配算法性能评估

本文主要讨论串匹配算法的性能评估，包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库，可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n)，通过随机取出长度为m的子串作为模式P，在文本T中进行匹配，统计平均复杂度。对于成功和失败的匹配分别进行测试，分析其平均复杂度。详情请参考相关学习资源。 ... [详细]

蜡笔小新 2023-12-13 16:16:05
include
动态规划算法的基本步骤及最长递增子序列问题详解

本文详细介绍了动态规划算法的基本步骤，包括划分阶段、选择状态、决策和状态转移方程，并以最长递增子序列问题为例进行了详细解析。动态规划算法的有效性依赖于问题本身所具有的最优子结构性质和子问题重叠性质。通过将子问题的解保存在一个表中，在以后尽可能多地利用这些子问题的解，从而提高算法的效率。 ... [详细]

蜡笔小新 2023-12-13 15:38:19
io
高质量SQL书写的30条建议

本文提供了30条关于优化SQL的建议，包括避免使用select *，使用具体字段，以及使用limit 1等。这些建议是基于实际开发经验总结出来的，旨在帮助读者优化SQL查询。 ... [详细]

蜡笔小新 2023-12-13 13:24:33

阿凡达0205

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章