商城倒计时代码

作者：阿凡达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;
这里写图片描述

推荐阅读

go
javascript分页类支持页码格式

前端时间因为项目需要，要对一个产品下所有的附属图片进行分页显示，没考虑ajax一张张请求，所以干脆一次性全部把图片out，然 ... [详细]

蜡笔小新 2024-11-12 14:58:57
js
利用REM实现移动端布局的高效适配技巧

在移动设备上实现高效布局适配时，使用rem单位已成为一种流行且有效的技术。本文将分享过去一年中使用rem进行布局适配的经验和心得。rem作为一种相对单位，能够根据根元素的字体大小动态调整，从而确保不同屏幕尺寸下的布局一致性。通过合理设置根元素的字体大小，开发者可以轻松实现响应式设计，提高用户体验。此外，文章还将探讨一些常见的问题和解决方案，帮助开发者更好地掌握这一技术。 ... [详细]

蜡笔小新 2024-11-11 19:11:53
go
C++ 异步编程中获取线程执行结果的方法与技巧及其在前端开发中的应用探讨

本文探讨了C++异步编程中获取线程执行结果的方法与技巧，并深入分析了这些技术在前端开发中的应用。通过对比不同的异步编程模型，本文详细介绍了如何高效地处理多线程任务，确保程序的稳定性和性能。同时，文章还结合实际案例，展示了这些方法在前端异步编程中的具体实现和优化策略。 ... [详细]

蜡笔小新 2024-11-09 15:14:28
go
如何利用jQuery的JSONP技术实现跨域调用外部Web服务？

本文探讨了如何利用 jQuery 的 JSONP 技术实现跨域调用外部 Web 服务。通过详细解析 JSONP 的工作原理及其在 jQuery 中的应用，本文提供了实用的代码示例和最佳实践，帮助开发者解决跨域请求中的常见问题。 ... [详细]

蜡笔小新 2024-11-07 09:24:55
replace
Python HTML 过滤处理实例解析：深入探讨代码实现与应用场景

本文深入解析了Python在处理HTML过滤时的实现方法及其应用场景。通过具体实例，详细介绍了如何利用Python代码去除HTML字符串中的标签和其他无关信息，确保内容的纯净与安全。此外，文章还探讨了该技术在网页抓取、数据清洗等领域的实际应用，为开发者提供了宝贵的参考。 ... [详细]

蜡笔小新 2024-11-05 08:23:37
utf-8
使用Python和smtplib实现邮件发送功能

本文详细介绍了如何使用Python中的smtplib库来发送带有附件的邮件，并提供了完整的代码示例。作者：多测师_王sir，时间：2020年5月20日 17:24，微信：15367499889，公司：上海多测师信息有限公司。 ... [详细]

蜡笔小新 2024-11-12 12:21:27
utf-8
php更新数据库字段的函数是,php更新数据库字段的函数是

php更新数据库字段的函数是,php更新数据库字段的函数是 ... [详细]

蜡笔小新 2024-11-12 11:37:31
ascii
开发日志：高效图片压缩与上传技术解析

开发日志：高效图片压缩与上传技术解析 ... [详细]

蜡笔小新 2024-11-11 19:33:51
js
利用 Node.js 和 Express（4.x 及以上版本）构建高效文件上传功能

本文介绍了如何使用 Node.js 和 Express（4.x 及以上版本）构建高效的文件上传功能。通过引入 `multer` 中间件，可以轻松实现文件上传。首先，需要通过 `npm install multer` 安装该中间件。接着，在 Express 应用中配置 `multer`，以处理多部分表单数据。本文详细讲解了 `multer` 的基本用法和高级配置，帮助开发者快速搭建稳定可靠的文件上传服务。 ... [详细]

蜡笔小新 2024-11-11 18:02:17
utf-8
如何在PHP中获取数组中特定元素的索引位置

在PHP中获取数组中特定元素的索引位置有多种方法。首先，可以使用 `array_search()` 函数，其语法为 `array_search(目标值, $array)`，该函数将返回匹配元素的第一个键名（即下标）。其次，也可以利用 `array_keys()` 函数，通过 `array_keys($array, 目标值)` 语法来获取所有匹配元素的键名列表。这两种方法都能有效解决数组元素定位的问题，具体选择取决于实际需求和性能考虑。 ... [详细]

蜡笔小新 2024-11-11 17:25:16
utf-8
Vue 开发技巧：实现数据过滤与排序功能详解

Vue 开发技巧：实现数据过滤与排序功能详解 ... [详细]

蜡笔小新 2024-11-11 16:43:09
replace
PTArchiver工作原理详解与应用分析

PTArchiver工作原理及其应用分析本文详细解析了PTArchiver的工作机制，探讨了其在数据归档和管理中的应用。PTArchiver通过高效的压缩算法和灵活的存储策略，实现了对大规模数据的高效管理和长期保存。文章还介绍了其在企业级数据备份、历史数据迁移等场景中的实际应用案例，为用户提供了实用的操作建议和技术支持。 ... [详细]

蜡笔小新 2024-11-11 13:40:49
uri
如何将TS文件转换为M3U8直播流：HLS与M3U8格式详解

在视频传输领域，MP4虽然常见，但在直播场景中直接使用MP4格式存在诸多问题。例如，MP4文件的头部信息（如ftyp、moov）较大，导致初始加载时间较长，影响用户体验。相比之下，HLS（HTTP Live Streaming）协议及其M3U8格式更具优势。HLS通过将视频切分成多个小片段，并生成一个M3U8播放列表文件，实现低延迟和高稳定性。本文详细介绍了如何将TS文件转换为M3U8直播流，包括技术原理和具体操作步骤，帮助读者更好地理解和应用这一技术。 ... [详细]

蜡笔小新 2024-11-11 12:12:04
copy
PHP预处理常量详解：如何定义与使用常量

PHP预处理常量详解：如何定义与使用常量 ... [详细]

蜡笔小新 2024-11-09 11:31:23
go
微信小程序实现类似微博的无限回复功能，内置云开发数据库支持

本文详细介绍了如何利用微信小程序实现类似于微博的无限回复功能，并充分利用了微信云开发的数据库支持。文中不仅提供了关键代码片段，还包含了完整的页面代码，方便开发者按需使用。此外，HTML页面中包含了一些示例图片，开发者可以根据个人喜好进行替换。文章还将展示详细的数据库结构设计，帮助读者更好地理解和实现这一功能。 ... [详细]

蜡笔小新 2024-11-07 09:43:24

阿凡达0205

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

Tags | 热门标签

RankList | 热门文章