-
JS实现活动秒杀倒计时动态展示效果
2021-06-26 04:24:21JS实现活动秒杀倒计时效果相信很多项目中都会设计到一些促销秒杀活动...一起来看效果图：【动态展示】JS实现倒计时效果代码：vue中实现的，下面的代码data: {setDate:"2021-03-10 12:00:00",remaining:" 0 天 0 时 0...展开全文JS实现活动秒杀倒计时效果
相信很多项目中都会设计到一些促销秒杀活动的功能，那么就会有活动倒计时这样的需求。最近我们的项目又需要这个功能了，年底无心上班了，就在写一下文章吧，免得自己年纪大了哪天忘了怎么写了。
一起来看效果图：【动态展示】
JS实现倒计时效果代码：
vue中实现的，下面的代码
data: {
setDate:"2021-03-10 12:00:00",
remaining:" 0 天 0 时 0 分"
},
created() {
setInterval(() => {
this.countDown()
},1000)
},
JS 方法
countDown() {
var nowTime = Date.now(); //当前时间
var setDate = new Date(this.setDate);
var setTime = setDate.getTime(); //设定的时间
//获取剩余时间总秒数
var getTimes = (setTime - nowTime) / 1000;
//获取天数
var d = parseInt(getTimes / 60 / 60 / 24);
d = d < 10 ? '0' + d : d;
//获取小时
var h = parseInt(getTimes / 60 / 60 % 24);
h = h < 10 ? '0' + h : h;
//获取分钟
var m = parseInt(getTimes / 60 % 60);
m = m < 10 ? '0' + m : m;
//获取秒数
var s = parseInt(getTimes % 60);
s = s < 10 ? '0' + s : s;
this.remaining = d + " 天 " + h + " 时 " + m + " 分 " + s + " 秒"
return this.remaining;
}
根据自己的项目去可以按需求改倒计时方法。
小月博客致力于技术分享
-
HTML+CSS入门 如何实现纪念日倒计时
2021-06-10 07:14:19本篇教程介绍了HTML+CSS入门 如何实现纪念日倒计时，希望...纪念日倒计时functionsetcountdown(theyear,themonth,theday){yr=theyear;mo=themonth;da=theday}setcountdown(2017,7,1)varoccasion="毕业倒计时"varmes...展开全文本篇教程介绍了HTML+CSS入门 如何实现纪念日倒计时，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。
<
纪念日倒计时height="&{countdownheight};" width="&{countdownwidth};">
id=countdownnssub height="&{countdownheight};"
width="&{countdownwidth};" top="0" left="0">
本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！
-
SSM秒杀系统（十）jQuery实现倒计时
2020-05-08 16:46:14SSM秒杀系统（十）jQuery实现倒计时十四、倒计时模块的实现 十四、倒计时模块的实现 在我们查看商品详情的时候，此时我们需要用一个倒计时来显示秒杀商品距离秒杀开始时间的倒计时。 实现步骤： 写一个js函数...展开全文SSM秒杀系统（十）jQuery实现倒计时
十四、倒计时模块的实现
在我们查看商品详情的时候，此时我们需要用一个倒计时来显示秒杀商品距离秒杀开始时间的倒计时。
实现步骤：
-
写一个js函数remaintime，计算出当前时间和开始时间之间的时间差，并通过变量remainnoties显示在商品页面开头位置
$("#remainnoties").html("相差 "+days+" 天 "+ hours + " 小时" + minutes + " 分钟"+seconds+"秒"); -
我们需要设置该时间刷新，不然这个时间会一直不变，所以采用setInterval将该函数500ms刷新一次
setInterval('remaintime()',500); -
设置在开始秒杀时间之前，我们不能购买商品。只有到达了秒杀时间才能购买商品，并且去掉倒计时显示；先将购买商品按钮设置为disabled，到达秒杀时间再去除disabled
if(date3 > 2){ $("#sellbnt").attr({"disabled":"disabled"}); else{ $("#remainnoties").html(""); $("#sellbnt").removeAttr("disabled"); }
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> </head> <body> <form action="/YF_MS_WEB/orderAction/topayorder"> 购买数量：<input type="text" name="num" ><span id="remainnoties"></span> <input type="hidden" name="id" value="${msproduct.id}"> <table border="1"> <tr> <td>商品标题</td> <td>商品图片</td> <td>秒杀价格</td> <td>秒杀原价</td> <td>秒杀开始时间</td> <td>秒杀结束时间</td> <td>秒杀商品数</td> <td>库存</td> </tr> <tr> <td>${msproduct.producttitle}</td> <td>${msproduct.productpicture}</td> <td>${msproduct.miaoshaprice}</td> <td>${msproduct.originalprice}</td> <td><span id="starttime"><fmt:formatDate value="${msproduct.starttime}" pattern="yyyy-MM-dd HH:mm:dd"/></span></td> <td><span id="endtime"><fmt:formatDate value="${msproduct.endtime}" pattern="yyyy-MM-dd HH:mm:dd"/></span></td> <td>${msproduct.productcount}</td> <td>${msproduct.stockcount}</td> </tr> </table> <table border="1"> <tr> <td>商品产地</td> <td>商品名称</td> <td>商品品牌</td> <td>商品重量</td> <td>规格和包装</td> <td>商品详情图片地址</td> </tr> <tr> <td>${msproductdetail.productplace}</td> <td>${msproductdetail.productname}</td> <td>${msproductdetail.brandname}</td> <td>${msproductdetail.productweight}</td> <td>${msproductdetail.specification}</td> <td>${msproductdetail.productdetailpicture}</td> </tr> </table> <input id="sellbnt" type="button" value="立即购买" onclick="submit(this)"/> </form> </body> <script type="text/javascript" src="/YF_MS_WEB/js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> function remaintime(){ var starttime = $("#starttime").html(); var s1 = new Date(starttime.replace("/-/g","/")); var s2 = new Date(); var date3 = s1.getTime() - s2.getTime();//这是一个相差时间戳 if(date3 > 2){ $("#sellbnt").attr({"disabled":"disabled"}); //天 var days = Math.floor(date3/(24*3600*1000)); //小时 var leave = date3%(24*3600*1000) var hours = Math.floor(leave/(3600*1000)); //分钟 var leave1 = leave%(3600*1000) var minutes = Math.floor(leave1/(60*1000)); //秒 var leave2 = leave1%(60*1000) var seconds = Math.floor(leave2/1000) $("#remainnoties").html("相差 "+days+" 天 "+ hours + " 小时" + minutes + " 分钟"+seconds+"秒"); }else{ $("#remainnoties").html(""); $("#sellbnt").removeAttr("disabled"); } //alert("相差 "+days+" 天 "+ hours + " 小时" + minutes + " 分钟"+seconds+"秒"); } setInterval('remaintime()',500); </script> <script type="text/javascript"> function submit(obj){ obj.parent.sumbit(); } </script> </html>
-
-
如何让电脑自动倒计时关机？我Python拭魅战告诉你
2020-12-11 12:51:26在日常使用电脑的过程中，很多小伙伴都有让电脑按时自动关机的需求。通常而言，年夜家一般城市有几种选择。假如哪一天，你女神问你，有没有什么按时关机的好体例，你怎么告诉她？...好比在让电脑自动倒计时关机这件...展开全文在日常使用电脑的过程中，很多小伙伴都有让电脑按时自动关机的需求。通常而言，年夜家一般城市有几种选择。
假如哪一天，你女神问你，有没有什么按时关机的好体例，你怎么告诉她？
一、熟悉计算机操作的话，可以使用cmd命令
有些小伙伴比较熟悉计算机的各种操作，是一个十足的电脑通，“电脑修得好，XXX当到老”，咳咳。这一类的小伙伴基本上有了需求通过电脑操作系统自己自带的功能就可以解决。好比在让电脑自动倒计时关机这件事情上，这些小伙伴会很嗤之以鼻的说，直接在命令行使用shutdown命令就可以实现了。
是的，在命令行中使用shutdown命令就可以完成电脑按时自动关机的操作。shutdown命令用于措置计算机和应用程序，有很是多的使用参数，好比注销计算机可以使用命令：
shutdown /l
关闭计算机，可以使用命令：
shutdown /s
重启计算机，可以使用命令：
shurdown /r
shutdown命令所有的使用参数如下图所示：
如何让电脑自动倒计时关机？我Python拭魅战告诉你-1.jpg (22.86 KB, 下载次数: 0)
2018-8-29 15:13 上传
从上图可以发现我们继续使用/t参数就可以对shutdown执行的操作进行超时措置，也就是按时的操作。好比，我们需要在1分钟之后关闭计算机，那么可以使用如下命令：
shutdown /s /t 60
很简单，很快速。可是，如果经常需要操作的话就有点繁琐了，每次都需要：
打开命令行；计算需要关机的秒数；输入shutdown命令；
如果你女神问起了你，你告诉她说，先XXX键打开命令行终端，再计算转换一下什么时候需要关键，最后输入一串鬼命令……嗯，拜拜了您嘞。
2、不熟悉计算机操作、图省事使用网上的软件
如果不想每次都打开命令行终端，计算时长，输入命令，那么可以使用一些编写开发好的按时关机小软件。
这种软件在网络上一搜一年夜把，在某个软件下载网站上还有一个专门的按时关机软件排行，如下图所示：
如何让电脑自动倒计时关机？我Python拭魅战告诉你-2.jpg (24.08 KB, 下载次数: 0)
2018-8-29 15:13 上传
这种类型的软件基本上无需安装，下载即可使用，使用起来也复杂。
可是这些小软件，要么来源不明，要么广告满天飞，要是推荐给女神使用，实在是不安心。万一弹出什么“XX直播”、“葡京赌场”之类的广告，或是诱导下载安装了某某全家桶，真是有损自己在女神心中的形象。
三、为了省事和平安，我们可以自己用Python编写
既不想女神操作麻烦，又担忧网上下载的软件不靠谱，那就自己撸一个出来吧。都说Python年夜法好，Python用来写这种小工具助手型的软件简直是很便利。下面，我们就通过PyQt5编写一个简单的按时自动关机小助手。
核心代码
在很多场合，我们都听说过所谓的二八定律，百分之二十的部分，占了百分之八十的效用。在这个按时关机小助手中，可能也存在于这种定律。
使用Python进行按时关机的最核心代码，是使用Python的内置库subprocess来执行shutdown命令，其代码为：
subprocess.call("shutdown /p")
固然我们的按时关机小助手不成能就这么一行代码，那还不如让女神直接在命令行终端用shutdown命令呢。
为了将这一行核心代码，包装得易用和简便，我们需要使用PyQt5这个图形界面框架编写一个壳出来，将按时关机的代码包装起来。
图形界面
首先，我们通过QMainWindow建立一个基本的图形界面：
如何让电脑自动倒计时关机？我Python拭魅战告诉你-3.jpg (51.58 KB, 下载次数: 0)
2018-8-29 15:13 上传
这段代码显现出来的界面如下图所示：
如何让电脑自动倒计时关机？我Python拭魅战告诉你-4.jpg (20.57 KB, 下载次数: 0)
2018-8-29 15:13 上传
接着，我们在对这个界面设置图标，并使用网格结构QGridLayout()添加两个部件，在上方的网格中通过QLabel()添加当前的时间，倒计时时间和QPushbutton()设置一个图片LOGO按钮，在下方网格中使用QTabWidget()建立选项卡部件：
如何让电脑自动倒计时关机？我Python拭魅战告诉你-5.jpg (84.54 KB, 下载次数: 0)
2018-8-29 15:13 上传
如何让电脑自动倒计时关机？我Python拭魅战告诉你-6.jpg (138.69 KB, 下载次数: 0)
2018-8-29 15:13 上传
如何让电脑自动倒计时关机？我Python拭魅战告诉你-7.jpg (97.49 KB, 下载次数: 0)
2018-8-29 15:13 上传
这样，当我们选择了一个倒计时，并点击启动按钮后，图形界面上会呈现倒计时的提醒，并且所有的选择项都被禁用了，如下动图所示：
如何让电脑自动倒计时关机？我Python拭魅战告诉你-8.jpg (25.52 KB, 下载次数: 0)
2018-8-29 15:13 上传
打包EXE
程序编写好了，使用Pyinstaller等工具将其打包成EXE文件，就可以妥妥的交给女神使用。在这里，小州君使用的是Pyinstaller 3.4开发版。
在打包之前，我们需要对代码中引用的图片文件进行一下措置，避免打包后的程序索引不到图片。
在这个程序中，我们一共使用了两个图片，一个是图形界面的小图标，一个是图形界面右上角的年夜LOGO，我们为这两个图片建立一个QRC文件，文件名为img.qrc，内容为：
gj.png
alogo.png
然后在img.qrc文件同级目录下，打开命令行，输入一下命令：
pyrcc5 img.qrc -o imgs.py
执行命令，在当前目录下会生成一个名为imgs.py的python文件，里面包含了我们界说的图片的base64编码内容。
接着在程序的代码中引入这个文件：
import imgs
同时修改图片的使用体例，将图片的路径前加冒号：，如下所示：
小图标：
icon.addPixmap(QtGui.QPixmap(":gj.png"), QtGui.QIcon.Normal, QtGui.QIcon.Off)
年夜logo：
background-image: url(:alogo.png);
完成了这一步，就可以使用Pyinstaller对程序进行打包了。在文件目录下，我们打开命令行终端，在其中输入命令：
pyinstaller -F -w --icon favicon.ico xxx.py
其中:
– -F:暗示将程序打包为一个EXE文件；
– -w:暗示不带默认的控制台；
– –ico:用来指定生成的EXE文件的图标；
最后执行命令，成功之后，我们的文件夹下会多出两个子文件夹：build和dist，其中打包好的EXE程序就在dist文件夹内：
如何让电脑自动倒计时关机？我Python拭魅战告诉你-9.jpg (15.54 KB, 下载次数: 0)
2018-8-29 15:13 上传
打开EXE文件文件，程序运行一切正常：
如何让电脑自动倒计时关机？我Python拭魅战告诉你-10.jpg (22.65 KB, 下载次数: 0)
2018-8-29 15:13 上传
这样，我们使用Python编写的按时自动关机助手就弄定了。
今天的文章分享到此结束，希望本次分享对正在学习Python的你有所帮忙，本篇文章来源博客：Z州的先生，如有侵权，请联系删除。
我做开发几年的时间，如果年夜家对学习Python的学习体例，学习路线以及你不知道的疑问，都可以随时来问我，年夜家可以加我的学习蜜圈，圈内有开发工具和教程。
关注我的头条号，然后私信给我“Python”会自动回复你相关资源地址。
更多内容回复查看:
游客，如果您要查看本帖隐藏内容请回复
-
前端页面实现倒计时效果的几种方法
2018-12-10 00:11:03倒计时的效果在网站或其他平台剪得很多了吧，今天就让我们来看看实现它的几种方法吧！ 一 ——15分钟倒计时 <html> <head> <meta charset="UTF-8"> <title>15分钟倒计时</title> ... -
双十一倒计时
2021-11-05 19:21:35双十一倒计时 马上双十一了 怎么做一个双十一的倒计时呢？ 在做出这种效果之前,需要掌握的知识有 定时器 和 内置Date对象 一、什么是定时器？ 定时器 : setIterval() 作用: 设置一个定时器,重复执行里面的代码 ... -
vue\uniapp自定义活动倒计时组件
2021-10-23 11:13:58这里写自定义目录标题欢迎使用Markdown编辑新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居... -
用 Python 制作“除夕夜倒计时”海报，新的一年你准备好了么？
2020-01-22 11:24:31本文源于《用Python自动化生成倒计时图片》的想法并结合《python繁琐工作自动化》一书，增添了一些设计元素，制作了新一版本的新年倒计时海报。 000. 效果预览 001.... -
android倒计时控件
2020-12-18 19:18:42仿新浪微盾客户端项目简介五...我这里布局方式用到了帧布局的方式，一个是所谓的表盘的情况，一个是倒计时的秒针， 相应的布局文件如下了：文章laozhu11242016-04-141163浏览量android 特卖列表倒计时卡顿问题在Andr... -
华为手机日历倒计时_万物皆可盲盒，0元抽华为手机 #茂业盛典倒计时5天#
2020-11-21 16:16:28#茂业盛典 倒计时5天# 百万『积分抽奖』 ✔每一次都是惊喜!!! 最高抽华为???? ?? 完美总结???? 推荐阅读▼▼ 钱包请就位！ 茂业年终盛典剧透第一弹！ *活动详情以现场细则为准 *图片源于网络，如侵权请联系 -
andriod-friday-countdown:Android小部件倒计时至周五-源码
2021-05-25 21:44:50Android小工具-周五倒数计时 星期五……所有人都在等待工作周的结束，期待已久的休息时间将到。 毕竟，星期五晚上是最佳时间，因为工作周已经结束，而周末尚未开始。 无论工作带来乐趣还是您希望尽快回家，都没有... -
距离2019年春节还剩多少天 2019春节倒计时多少天
2021-04-29 05:15:56导语：2019春节倒计时多少天?春节离我们越来越近了，那么，今天距离2019年春节还剩多少天呢?按照阳历来算，2019年的春节是2019年2月5日，而今天是2019年1月15日。所以，今年春节距今只剩下21天了。距离2019年春节还... -
Canvas实现绚丽的倒计时效果（动画效果）
2016-11-01 18:06:46HTMLhtml很简单，引入两个文件digit.js：存放每个数字的点阵数据 countdown.js：主要逻辑<!DOCTYPE html>  绚丽的倒计时效果</ti -
【有奖倒计时】带你走进AI应用创新大赛十强背后的故事！
2018-10-29 15:19:4713天来，我们感受到了众多花粉的热情，也感受到了用户们对高质量AI作品的喜爱。为投票准备的543件奖品，仅剩23件。 今天，就让我们再度回顾这些优秀获奖作品，走近开发者，从他们的世界细品应用带来的现实价值与思考... -
一个黑色全屏的计时器_佳作分享最佳倒数计时器设计分析【附原型实例】
2020-12-02 23:47:49视觉效果和动画效果已经成为产品设计中不可或...在我们的日常生活中，会看到各种各样的倒计时设计效果，比如：视频的开头；APP启动页面的右上角；某些电子商务和活动网站的价格区域，等等。毫无疑问，倒计时是非常有... -
【会议邀请】第二十届中国计算语言学大会（CCL 2021）早鸟票倒计时8天！
2021-07-16 01:09:32点击下面卡片，关注我呀，每天给你送来AI技术干货！来自：中国中文信息学会[会议邀请] 第二十届中国计算语言学大会（CCL 2021）早鸟票倒计时8天！NLP学术盛宴等你来！还有讲习班+前沿... -
2018双11倒计时 | 双11十年牧码梦
2018-11-08 19:46:452018年，双11迎来了十周年。十年间，依赖于迅速崛起的互联网技术以及各项新兴技术的沉淀，阿里巴巴缔造了全球数字经济时代的第一“操作系统”。在这个操作系统上，让全球消费者... -
倒计时7天！博客之星虚位以待，Macbook等你来拿
2020-12-25 18:19:58也许你陪伴了CSDN一年的时间刚刚写下自己的第二十篇的原创技术博文也许你是陪伴了CSDN近20年风雨的老码农更新了近千百篇的技术文章也许你还在坚持着“技术输出”也许你已经开始封笔也许你刚... -
纯手工 99 分钟倒计时定时器
2012-05-24 02:15:01封面图片为野比原创，请勿未经允许私自引用 下载源码 注意：因为用了 RTOS 又没有随时 Idle，所以耗电很惊人， 新的 9V 电池大约工作 10~30 分钟，如果你打算用我这个设计， 最好是加上... -
自荐倒计时10天，2019年「EDGE Awards 全球创新评选」火热进行
2019-11-07 21:35:01评选自荐火热进行中，11月7日进入倒计时10天报名收官加速期，点击 阅读原文或识别下方海报二维码 立刻参与自荐！ 评选名单已有各行业知名头部公司参与提名：腾讯、阿里、华为云、字节跳动、爱彼迎、B站等等，同时也... -
倒计时1天| 阅读经典AI论文，解锁复现抱大奖！
2018-08-14 22:26:54经典论文复现，8月15日截止报名，仅剩一天！30篇经典AI论文，配合当下最热的AI趁手利器——PaddlePaddle只要小伙伴们复现成功，就有机会get丰厚奖金、精美... -
倒计时两天丨NeurIPS 2020预讲会：7位智源青年科学家，21场报告
2020-11-25 13:27:13NeurIPS 2020预讲会来了7位智源青年科学家领衔因果与学习、3D视觉神经网络架构设计、自监督与迁移扫码报名，线上会议免费注册第三十四届神经信息处理系统大会（NeurIPS 202... -
倒计时三天丨NeurIPS 2020预讲会：7位智源青年科学家，21场报告
2020-11-25 12:43:53NeurIPS 2020预讲会来了7位智源青年科学家领衔因果与学习、3D视觉神经网络架构设计、自监督与迁移扫码报名，线上会议免费注册第三十四届神经信息处理系统大会（NeurIPS 202... -
B2C电商项目（第十四天、秒杀前端、秒杀商品存入缓存、秒首页实现、时间菜单、倒计时、加载商品列表、抢购...
2020-06-15 09:36:23`title` varchar(100) DEFAULT NULL COMMENT '标题', `small_pic` varchar(150) DEFAULT NULL COMMENT '商品图片', `price` decimal(10,2) DEFAULT NULL COMMENT '原价格', `cost_price` decimal(10,2) DEFAULT ... -
ATEC倒计时15天｜国内首个车险图像定损背后的AI技术（赠门票）
2018-09-04 18:21:38小蚂蚁说： 考虑到加速回报定律，过去20年，科技对日常生活的改变可能比我们...在距离2018年ATEC峰会还有三十天的时候，我们启动这个海报系列，希望通过不同时空下，30个不同场景的对比，讲述科技如何惊艳了时光... -
婚礼倒计时32天
2004-12-29 03:31:00也或者，我应该把这一切归罪于我的没有耐心，仅仅写了四天日记，就快要坚持不下去了，到现在还没混出个人样来，也正是这个原因吧。 不过算来，这算是我在北京度过的第三个没有暖气的冬天吧，比起两年以前，已经是...
