广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >jquery 倒计时效果实现秒杀思路
  • 792
分享到

jquery 倒计时效果实现秒杀思路

jquery倒计时 2022-11-15 22:11:31 792人浏览 安东尼
摘要

<script type="text/javascript"> $(function(){ countDown("2015/9/8 11:11:59","#colock


<script type="text/javascript">
$(function(){
countDown("2015/9/8 11:11:59","#colockbox1");
});
function countDown(time,id){
var day_elem = $(id).find('.day');
var hour_elem = $(id).find('.hour');
var minute_elem = $(id).find('.minute');
var second_elem = $(id).find('.second');

//if(typeof end_time == "string")
var end_time = new Date(time).getTime(),//月份是实际月份-1
sys_second = (end_time-new Date().getTime())/1000;
var timer = setInterval(function(){
if (sys_second > 1) {
sys_second -= 1;
var day = Math.floor((sys_second / 3600) / 24);
var hour = Math.floor((sys_second / 3600) % 24);
var minute = Math.floor((sys_second / 60) % 60);
var second = Math.floor(sys_second % 60);
day_elem && $(day_elem).text(day);//计算天
$(hour_elem).text(hour<10?"0"+hour:hour);//计算小时
$(minute_elem).text(minute<10?"0"+minute:minute);//计算分钟
$(second_elem).text(second<10?"0"+second:second);//计算秒杀
} else {
clearInterval(timer);
}
}, 1000);
}
</script>

html:

<div class="colockbox" id="colockbox1">
<span class="day">00</span>
<span class="hour">00</span>
<span class="minute">00</span>
<span class="second">00</span>
</div>

公司做了个秒杀页面,需要做一个倒计时效果,特此收藏

代码演示下载:https://www.jb51.net/jiaoben/103648.html

--结束END--

本文标题: jquery 倒计时效果实现秒杀思路

本文链接: https://www.lsjlt.com/news/172490.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • jquery 倒计时效果实现秒杀思路
    复制代码 代码如下: <script type="text/javascript"> $(function(){ countDown("2015/9/8 11:11:59...
    99+
    2022-11-15
    jquery 倒计时
  • iOS实现秒杀活动倒计时
    IOS关于大型网站抢购、距活动结束,剩余时间倒计时的实现代码,代码比较简单,大家根据需求适当的添加修改删除代码 定义4个 Label 来接收倒计时: @property (we...
    99+
    2022-05-30
    iOS 倒计时
  • vue实现秒杀倒计时组件
    本文实例为大家分享了vue实现秒杀倒计时组件的具体代码,供大家参考,具体内容如下 下面是使用Vue实现秒杀倒计时组件 开发思路 1.请求服务器获取这一刻的服务器时间(统一以服务器时...
    99+
    2022-11-12
  • jquery如何实现10秒倒计时
    本篇内容介绍了“jquery如何实现10秒倒计时”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2022-10-19
  • JavaScript如何仿京东实现秒杀倒计时
    这篇文章主要为大家展示了“JavaScript如何仿京东实现秒杀倒计时”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript如何仿京东实现秒杀倒计时”这篇文章吧。功能介绍:这个倒计时...
    99+
    2023-06-29
  • JavaScript仿京东实现秒杀倒计时案例详解
    功能介绍: 1、这个倒计时是不断变化的,因此需要定时器来自动变化(setInterval) 2、三个黑色的盒子,分别存放时、分秒 3、三个盒子利用innerHTML存入倒计时 &l...
    99+
    2022-11-13
  • python3实现倒计时效果
    本文实例为大家分享了python3实现倒计时效果的具体代码,供大家参考,具体内容如下 # CountDown.py import turtle,time def drawGap(...
    99+
    2022-11-11
  • jQuery如何实现页面倒计时并刷新效果
    这篇文章主要介绍jQuery如何实现页面倒计时并刷新效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!代码如下所示:var intDiff = pars...
    99+
    2022-10-19
  • Canvas如何实现倒计时效果
    这篇文章主要介绍了Canvas如何实现倒计时效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。HTML:<canvas id...
    99+
    2022-10-19
  • javascript实现简单倒计时效果
    本文实例为大家分享了javascript实现倒计时效果的具体代码,供大家参考,具体内容如下 实现思路: 1、页面创建好天、小时、分、秒的标签元素,定义好样式 2、js获取天、小时、分...
    99+
    2022-11-12
  • JavaScript模拟实现"双11"限时秒杀效果
    目录【案例】限时秒杀一、全局作用域二、弹出对话框和窗口prompt()方法confirm()方法open()方法三、窗口位置和大小四、框架操作五、定时器【案例】限时秒杀 代码实现思...
    99+
    2022-11-13
  • Android实现倒计时的按钮效果
    最近有人问我如何实现倒计时的按钮功能,例如发送验证码,我记得有个CountDownTimer,因为好久没用过了,自己就写了一个,代码如下 new CountDownTimer...
    99+
    2022-06-06
    倒计时 按钮 Android
  • vue、react如何实现倒计时效果
    这篇文章主要介绍vue、react如何实现倒计时效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!Vue方案一:俩个元素HTML:<div id="exam...
    99+
    2022-10-19
  • Android使用CountDownTimer实现倒计时效果
    在开发中会经常用到倒计时这个功能,包括给手机发送验证码等等,之前我的做法都是使用Handler + Timer + TimerTask来实现,现在发现了这个类,果断抛弃之前的做...
    99+
    2022-06-06
    倒计时 Android
  • Android实现启动页倒计时效果
    目录开始准备 开始动画画圆弧项目使用背景图完整代码今天介绍一个很简单的倒计时动画,仿酷狗音乐的启动页倒计时效果,也是大多数APP在用的一个动画,来看看效果图: 整体的思路就是用一个...
    99+
    2022-11-12
  • JavaScript实现简单的倒计时效果
    本文实例为大家分享了JavaScript实现简单倒计时效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html>     <...
    99+
    2022-11-13
  • CSS3中如何实现倒计时效果
    小编给大家分享一下CSS3中如何实现倒计时效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!实现效果实现代码html<div class='...
    99+
    2023-06-08
  • js定时器如何实现倒计时效果
    这篇文章主要介绍了js定时器如何实现倒计时效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体内容如下日期函数倒计时 =  用 ...
    99+
    2022-10-19
  • 基于JS代码如何实现倒计时x 天 x 时 x 分 x 秒效果
    这篇文章主要介绍基于JS代码如何实现倒计时x 天 x 时 x 分 x 秒效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体代码如下所示:<script>  ...
    99+
    2022-10-19
  • WPF实现倒计时转场动画效果
    代码如下 一、创建 CountdownTimer.xaml 继承ContentControl代码如下。 using System; using System.Linq; u...
    99+
    2022-11-13
    WPF倒计时动画 WPF 倒计时 WPF 转场 动画
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作