拿来即用的网页倒计时组件
2024-05-09 08:58:28
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>倒计时组件by TCF_JingFeng</title>
</head><style>.listtime {width: 800px;padding: 100px 0 0 0;font-family: fontb;margin: 0 auto;display: block;}.listtime li {width: 50px;float: left;font-size: 38px;color: #494eff;line-height: 40px;text-align: center;margin-right: 6px;list-style: none;}.listtime li.day {margin-right: 6px;}.listtime li.hour {margin-right: -1px;}.listtime li.minute {margin-right: 1px;}
</style>
<body>
<ul class="listtime"><!--<li class="year">年</li>--><!--<li>:</li>--><!--<li class="month">月</li>--><!--<li>:</li>--><li class="day">日</li><li>:</li><li class="hour">时</li><li>:</li><li class="minute">分</li><li>:</li><li>秒</li>
</ul>
<ul class="listtime"><!--<li id="year" class="year"></li>--><!--<li>:</li>--><!--<li id="month" class="month"></li>--><!--<li>:</li>--><li id="day" class="day"></li><li>:</li><li id="hour" class="hour"></li><li>:</li><li id="minute" class="minute"></li><li>:</li><li id="second"></li>
</ul>
<script>var fnTimeCountDown = function (d, o) {return new Promise((resolve, reject) => {var f = {zero: function (n) {var n = parseInt(n, 10);if (n > 0) {if (n <= 9) {n = "0" + n;}return String(n);} else {return "00";}},dv: function () {d = d || Date.UTC(2050, 0, 1, 0, 0, 0); //如果未定义时间，则设定倒计时日期是2050年1月1日0时var future = new Date(d), now = new Date();//现在将来秒差值var dur = Math.round((future.getTime() - now.getTime()) / 1000) + future.getTimezoneOffset() * 60, pms = {sec: "00",mini: "00",hour: "00",day: "00",/* month: "00",year: "00"*/};if (dur > 0) {pms.sec = Math.floor((dur)) > 0 ? f.zero(Math.floor(dur % 60)) : "00";pms.mini = Math.floor((dur / 60)) > 0 ? f.zero(Math.floor((dur / 60)) % 60) : "00";pms.hour = Math.floor((dur / 3600)) > 0 ? f.zero(Math.floor((dur / 3600)) % 24) : "00";pms.day = Math.floor((dur / 86400)) > 0 ? f.zero(Math.floor((dur / 86400))) : "00";
/* //月份，以实际平均每月秒数计算pms.month = Math.floor((dur / 2629744)) > 0 ? f.zero(Math.floor((dur / 2629744)) % 12) : "00";//年份，按按回归年365天5时48分46秒算pms.year = Math.floor((dur / 31556926)) > 0 ? Math.floor((dur / 31556926)) : "00";*/}if (pms.day == "00" && pms.hour == "00" && pms.mini == "00" && pms.sec == "00") {resolve("结束了")}return pms;},ui: function () {if (o.sec) {o.sec.innerHTML = f.dv().sec;}if (o.mini) {o.mini.innerHTML = f.dv().mini;}if (o.hour) {o.hour.innerHTML = f.dv().hour;}if (o.day) {o.day.innerHTML = f.dv().day;}
/* if (o.month) {o.month.innerHTML = f.dv().month;}if (o.year) {o.year.innerHTML = f.dv().year;}*/setTimeout(f.ui, 1000);}};f.ui();})};
</script><script>// 倒计时var djs = {$: function (id) {return document.getElementById(id);},futureDate: Date.UTC(2022, 0, 0, 0, 0, 0),//年，月0 ~ 11，日1 ~ 31，时 0 ~ 23，分0 ~ 59，秒0 ~ 59，毫秒0 ~ 999obj: function () {return {sec: djs.$("second"),mini: djs.$("minute"),hour: djs.$("hour"),day: djs.$("day"),/* month: djs.$("month"),year: djs.$("year")*/}}};fnTimeCountDown(djs.futureDate, djs.obj()).then((data) => {console.log(data);//结束回调函数});
</script>
</body>
</html>拿来即用的网页倒计时组件相关推荐
- vue 倒计时 插件_vue中实现倒计时组件与毫秒效果
时分秒倒计时组件 template {{ getHours1 }} {{ getHours2 }} : {{ getMinutes1 }} {{ getMinutes2 }} : {{ getSeco ...
- 【重构】微信小程序倒计时组件
回想在4个月前刚刚进入公司实习时,我封装了一个应用于小程序的倒计时组件. 链接在这里:微信小程序之倒计时组件 以现在的视角再去看之前的实现可以说是一坨看不下去的烂代码.所以也借此机会,将之前的组件重构 ...
- java调用浏览器组件来_Java 网页浏览器组件介绍
在使用 Java 开发客户端程序时,有时会需要在界面中使用网页浏览器组件,用来显示一段 HTML 或者一个特定的网址.本文将介绍在界面中使用浏览器组件的四种方法,给出示例的代码,并且分析每种方法的优点 ...
- chrome浏览器无法加载百度网页启动组件怎么办
chrome浏览器无法加载百度网页启动组件怎么办 chrome浏览器无法加载百度网页启动组件怎么办?chrome浏览器百度打不开提示无法加载百度网页启动组件怎么办?使用chrome浏览器打开百度的时候 ...
- Flex-iframe在SWF中嵌入网页的组件（推荐）
Flex-iframe在SWF中嵌入网页的组件(推荐) 以前就使用过IFrame组件嵌入网页了,当时是因为要使用已经做好的网页,就上网查找相关资料,就发现了IFrame,当时版本还是1.3.2啦,勉强 ...
- html 倒计时字体消失,最简单的一个网页倒计时代码 时间到期后会显示出提醒内容 收藏版...
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 很多时候我们都是需要提醒自己做什么事情的,像我这么健忘的,更加需要倒计时之类的记录来提醒自己,这是我找到最简单简介的代码了! 最简单的一个网页倒计时代码 ...
- 手把手带你分解 Vue 倒计时组件
大家好,我是漫步,今天来分享一个Vue 组件的内部,喜欢记得关注我并设为星标. 一.前言 前端开发博客 入职的第一个需求是跟着一位前端大佬一起完成的一个活动项目. 由于是一起开发,当然不会放过阅读大佬 ...
- 基于Vue.js活动倒计时组件
vue2-countdown vue活动倒计时组件及遇到的坑 基于vue2.x的活动倒计时组件 主要是最近为了公司做一个倒计时活动才找到了这个组件使用的.于是去github上翻看了文档结果是一年多没更 ...
- Vue回炉重造之封装防刷新考试倒计时组件
你好,我是Vam的金豆之路,可以叫我豆哥.2019年年度博客之星.技术领域博客专家.主要领域:前端开发.我的微信是 maomin9761,有什么疑问可以加我哦,自己创建了一个微信技术交流群,可以加我邀 ...
最新文章
- 【剑指offer-Java版】42翻转单词顺序VS左旋转字符串
- 用工具批量下载哔哩哔哩视频并且将内容转换成pdf
- 字符串转为小数点，乘以一个数以后，转换为科学计数法，再把科学计数法转化为字符串
- Qt Creator编码
- python的5种高级用法
- CentOS 6.0安装ipvsadm 1.26错误笔录
- c#中使用XSLT将xml文档转换为html文档方法
- android学习总结
- putty, puttycm区别
- 按季度分类汇总_2019年纯碱行业相关上市公司季报 与半年报情况汇总
- 升级win11-需要开启主板的tpm2.0
- hdu 1452 因子和 + 逆元素+ 快速幂
- C语言（从入门到精通）
- cad字体安装_为什么CAD图纸打开后会显示很多问号“？？？”，该怎么解决
- 如何通过树莓派/Python/smtp发送电子邮件
- ANSYS Workbench仿真（ADD）：应力奇异点VS应力集中
- 4、（四）外汇学习基础篇之银行间外汇远期交易
- scikit-learn学习之K-means聚类算法与 Mini Batch K-Means算法
- flex-shrink如何如何分配容器收缩空间
- 英语学习真的需要思考