Html 实现倒计时

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title倒计时title><style>input {width: 40px;height: 20px;}#remainTime{background-color: yellow;margin-top: 30px;font-size: 40px;text-align: center;}#remainTime span {color: red;font-weight: bold;margin-right: 10px;}</style>
</head>
<body><div id="remainTime">倒计时：<span id="one"></span>天<span id="two"></span>时<span id="three"></span>分<span id="four"></span>秒</div>
</body>
<script>(function show() {      //1.设置目的时间var oYear = 2022var oMonth = 0var oDay = 28var oHour = 0var oMinute = 0var oSecond = 0var funtureDate = new Date(oYear, oMonth, oDay, oHour, oMinute, oSecond);// console.log(dateFormat(funtureDate))//2.设置定时器setInterval(function () {//3.获取现在的时间var presentDate = new Date();//4.获取时间戳var funtureTime = funtureDate.getTime();var presenTime = presentDate.getTime();//5.获取剩余的时间戳var allTime = funtureTime - presenTime;          //6.把毫秒转换为秒var allSecond = parseInt(allTime / 1000);//7.获取剩余多少天var day = size(parseInt(allSecond / 3600 / 24));//8.获取剩余多少小时var hour = size(parseInt(allSecond / 3600 % 24));//9.获取剩余多少分钟var minute = size(parseInt(allSecond / 60 % 60));//10.获取剩余多少秒var second = size(parseInt(allSecond % 60));//11.注入：document.getElementById('one').innerHTML = day;document.getElementById('two').innerHTML = hour;document.getElementById('three').innerHTML = minute;document.getElementById('four').innerHTML = second;}, 1000);//如果数>=10,则在前面补0function size(num) {return num < 10 & num >= 0 ? '0' + num : num;}  })()//格式化日期格式 2function dateFormat(data){var date = new Date(data);var YY = date.getFullYear() + '-';var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());return YY + MM + DD;}</script>
</html>

Html 实现倒计时相关推荐

感受hook里useEffect的执行顺序,hook倒计时
本文基于之前创建的react-app脚手架文件 App.tsx import React from 'react'function App() {const [count, setCount] = R ...
js生成随机数函数，倒计时函数
生成xxxx-xxxx-xxxx-xxxx形式的随机数 function randomString(n) {let chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmn ...
CountDownTimer 实现验证码倒计时
先看下完整的代码,如是使用入职过去即可 public class MainActivity extends AppCompatActivity {private TextView code;@Over ...
axure怎么做5秒倒计时_如何用Axure做倒计时，由分到秒？
回答: 1. 将所需元件全部准备好,并按照上图要求设置完毕. 2. 倒计时的持续需要循环的支持,简单来说就是利用动态面板的显示和隐藏事件来实现循环,在面板显示时改变相应数值,然后让面板隐藏激发面板隐藏 ...
html里的swal添加倒计时,使用甜蜜警报插件的setInterval函数倒计时
我试图实现倒计时到sweetAlert.在不活动20分钟后,会弹出甜蜜警报并显示会话即将超时,并且用户有两种选择:注销或继续,这将重新启动空闲计时器.当鼠标移动或点击时,空闲计时器也会重置.我的问题是 ...
【全网最短】实现倒计时：时分秒的功能
//计算时间差毫秒数 let t = Math.abs(new Date("2022-02-25 23:00:00") - new Date());//倒计时格式:天时分秒毫秒 l ...
jquery倒计时插件可自定义多个倒计时间
jquery倒计时插件设置多个自定义倒计时时间,任意设置天.小时.分钟.秒倒计时间功能. 查看演示>> <!DOCTYPE html PUBLIC "-//W3C//DTD ...
android倒计时实现方法,Android实现倒计时方法汇总
Android开发中经常会有倒计时的功能,下面将总结出常见的集中实现方式. 1.直接使用Handler的消息机制来实现 xml布局中文件如下: android:layout_width="m ...
小程序：js获取验证码时（倒计时模块）
代码例子截图最近在上手开发小程序,发现其实小程序要比vue真的要简单太多了,有一套自己的html(WXML),css(WXSS),虽然有些标签不能直接沿用html5的标签来开发,不过内置的标签还是很好 ...
「CSDN 2021年度 IT 技术影响力之星评选」活动报名倒计时！
"CSDN 2021年度IT技术影响力之星评选"活动自2021年12月6日启动以来受到了行业各界的关注以及企业和个人的积极响应,截止目前,已收到上千份参评报名.本次评选活动的第一阶 ...

Html 实现倒计时

Html 实现倒计时相关推荐

最新文章

热门文章