js网页倒计时功能(天,时,分,秒)
1.给定任意一个时间,然后实现现在到那个时间的倒计时。
下面的例子是显示现在到2021年1月1号0时0分的倒计时:
- function showTime() {
- //获取目的日期
- var myyear = 2021; //年
- var mymonth = 1 - 1; //月 只需要填写 - 前面的数字,这里是八月
- var myday = 0; //天
- var myhour = 00; //时
- var myminute = 00; //分
- var mysecond = 00; //秒
- //以上综合填入的时间是 2021年1月1号0时0分;
- var time = Number(new Date(myyear, mymonth, myday, myhour, myminute, mysecond));
- // var time=new Date(myyear,mymonth,myday,myhour,myminute,mysecond).getTime();
- //获取当前时间
- var nowTime = Date.now();
- // var nowTime = new Date().getTime();
- //获取时间差
- var timediff = Math.round((time - nowTime) / 1000);
- //获取还剩多少天
- var day = parseInt(timediff / 3600 / 24);
- //获取还剩多少小时
- var hour = parseInt(timediff / 3600 % 24);
- //获取还剩多少分钟
- var minute = parseInt(timediff / 60 % 60);
- //获取还剩多少秒
- var second = timediff % 60;
- //输出还剩多少时间
- console.log(timerFilter(day)+"天"+timerFilter(hour)+"时"+timerFilter(minute)+"分"+timerFilter(second)+"秒")
- setTimeout(showTime, 1000);
- //给小于10的数值前面加 0
- function timerFilter(params) {
- if (params - 0 < 10) {
- return '0' + params
- } else {
- return params
- }
- }
- }
2.当前时间到当天23:59:59倒计时。(按F12在控制台执行函数就可以见到效果)
- function showLeft() {
- //获取当前时间
- var nowTime = Date.now();
- // var nowTime = new Date().getTime();
- //获取当天 23:59
- var endTime = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1
- //获取时间差
- var timediff = Math.round((endTime - nowTime) / 1000);
- //获取还剩多少小时
- var hour = parseInt(timediff / 3600 % 24) + parseInt(timediff / 3600 / 24) * 24;
- //获取还剩多少分钟
- var minute = parseInt(timediff / 60 % 60);
- //获取还剩多少秒
- var second = timediff % 60;
- //输出还剩多少时间
- hour = timerFilter(hour);
- minute = timerFilter(minute);
- second = timerFilter(second);
- console.log(hour + "时" + minute + "分" + second + "秒")
- setTimeout(showLeft, 1000);
- //给小于10的数值前面添加 0
- function timerFilter(params) {
- if (params - 0 < 10) {
- return '0' + params
- } else {
- return params
- }
- }
- }
js网页倒计时功能(天,时,分,秒)的更多相关文章
- js倒计时demo 天/时/分/秒
<html><head> <meta charset="UTF-8"> <title>js简单时分秒倒计时</title> ...
- JS实现倒计时(天数,时,分,秒)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" > <titl ...
- js网页倒计时精确到秒级
网页实时倒计时,精确到秒级,和天数倒计时原理一样. 一个很好用的js倒计时!网页实时倒计时,精确到秒级,和天数倒计时原理一样.js倒计时一般用于商城网站团购,特卖,很多地方都可用到!希望能够给大家带来 ...
- (转)js实现倒计时效果(年月日时分秒)
原文链接:http://mengqing.org/archives/js-countdown.html 之前做的活动页面很多都用到了倒计时功能,所以整理下下次直接用.(用的是张鑫旭写的一个倒计时,稍作 ...
- jQuery UI Datepicker&Datetimepicker添加 时-分-秒 并且,判断
jQuery UI Datepicker时间(年-月-日) 相关代码: <input type="text" value="" name="ad ...
- 网页倒计时,动态显示"××年还剩××天××时××分××秒"
var target = document.getElementById('target'); function getTimeString(){ // 要计算任意两个日期的时间差只要修改curren ...
- JavaScript/js把秒或者毫秒换算成xx-xx-xx 时-分-秒的形式
function MillisecondToDate(msd) { // var time = parseFloat(msd) / 1000; var time=msd; if (null != ti ...
- js计算两个时间差 天 时 分 秒 毫秒
// 计算两个时间差 dateBegin 开始时间 function timeFn(dateBegin) { //如果时间格式是正确的,那下面这一步转化时间格式就可以不用了 var dateEnd = ...
- JS将秒转换为 天-时-分-秒
记录一下,备忘.. function SecondToDate(msd) { var time =msd if (null != time && "" != tim ...
随机推荐
- ZIP:GZIP
GZIPInputStream: GZIPInputStream(InputStream in) :使用默认缓冲区大小创建新的输入流. GZIPInputStream(InputStream in, ...
- Excel催化剂开源第48波-Excel与PowerBIDeskTop互通互联之第二篇
前一篇的分享中,主要谈到Excel透视表连接PowerBIDeskTop的技术,在访问SSAS模型时,不止可以使用透视表的方式访问,更可以发数据模型发起DAX或MDX查询,返回一个结果表数据,较透视表 ...
- 个人永久性免费-Excel催化剂功能第32波-空行空列批量插入和删除
批量操作永远是效率提升的王道,也是Excel用户们最喜欢能够实现的操作虽说有些批量操作不一定合适Excel的最佳实践操作,但万千世界,无奇不有,特别是在国人眼中领导最大的等级森严的职场环境下.Exce ...
- C#3.0新增功能09 LINQ 基础05 使用 LINQ 进行数据转换
连载目录 [已更新最新开发文章,点击查看详细] 语言集成查询 (LINQ) 不只是检索数据. 它也是用于转换数据的强大工具. 通过使用 LINQ查询,可以使用源序列作为输入,并通过多种方式对其进 ...
- 《VR入门系列教程》之5---应用方向
VR应用方向 面向消费者的虚拟现实才发展了几年,就出现了大量应用程序,虚拟现实抓住了人们对未来的渴望.开发者甚至想要把整个现实世界都做成虚拟现实,这些都是可以理解的. 但是,现在仍然没 ...
- Chrome离线安装包+谷歌访问助手
Chrome离线安装包+谷歌访问助手 所有chrome版本离线安装包下载地址 谷歌访问助手v2.3.0.crx(需要修改主页) 谷歌上网助手v1.4.3.crx(不用修改主页,需要注册) 两个插件为2 ...
- Java--重载与重写的区别
1.重写必须继承,重载不用.2.重写的方法名,参数数目相同,参数类型兼容,重载的方法名相同,参数列表不同.3.重写的方法修饰符大于等于父类的方法,重载和修饰符无关.4.重写不可以抛出父类没有抛出的一般 ...
- spark 源码分析之八--Spark RPC剖析之TransportContext和TransportClientFactory剖析
spark 源码分析之八--Spark RPC剖析之TransportContext和TransportClientFactory剖析 TransportContext 首先官方文档对Transpor ...
- 19.包 logging 的使用
包 什么是包: ---文件夹下具有__init__.py文件就是一个包 推荐使用 from . import 包的导入; from ss.bake.api.policy import func --- ...
- .NET Core on K8S学习实践系列文章索引(Draft版)
一.关于这个系列 自从去年(2018年)底离开工作了3年的M公司加入X公司之后,开始了ASP.NET Core的实践,包括微服务架构与容器化等等.我们的实践是渐进的,当我们的微服务数量到了一定值时,发 ...