我的编程空间,编程开发者的网络收藏夹
学习永远不晚

javascript 学习笔记(四) 倒计时程序代码

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

javascript 学习笔记(四) 倒计时程序代码

首先看全部完整代码:

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

html部分代码:
可在文本框中输入倒计时的时间,如果当前时间小于截止时间,则正常返回,反之,则返回距离截止日期到现在的时间
复制代码 代码如下:

<p>
<label for="deadline">截止日期</label>
<input type="text" value="2011-06-11" id="deadline" />
<input type="button" value="开始倒计时" onclick="window.setInterval('countDown(\'deadline\')', 1000)" />
</p>
<p id="showTime"></p>

javascript部分代码:
复制代码 代码如下:

function countDown(endDate) {
var now = new Date();
var deadtime = document.getElementById(endDate);
var deadline = new Date(deadtime.value);
//本地时间与格林威治标准时间 (GMT) 的分钟差
var timeDiff = now.getTimezoneOffset();
//此处有些不解,如果把分钟差转化成毫秒应该是timeDiff*60*1000,但是这样返回的数据不正确!
var leave = Math.abs(deadline.getTime() - now.getTime() + timeDiff*60);
var minute = 1000 * 60;
var hour = minute * 60;
var day = hour * 24;
var countDay = Math.floor(leave/day);
//var countHour = Math.floor((leave - day*countDay)/hour); 两种计算思路
var countHour = Math.floor(leave/hour - countDay*24);
var countMinute = Math.floor(leave/minute) - countDay*24*60 - countHour*60;
var countSecond = Math.floor(leave/1000) - countDay*24*60*60 - countHour*60*60 - countMinute*60;
var outStr = "";
if(deadline < now) {
outStr = "距离"+deadtime.value+"已有"+countDay+"天"+countHour+"小时"+countMinute+"分"+countSecond+"秒";
} else {
outStr = "距离"+deadtime.value+"还差"+countDay+"天"+countHour+"小时"+countMinute+"分"+countSecond+"秒";
}
var showTime = document.getElementById("showTime");
showTime.innerHTML = outStr;
}

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

javascript 学习笔记(四) 倒计时程序代码

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

下载Word文档

猜你喜欢

javascript 学习笔记(四) 倒计时程序代码

javascript 学习笔记(四) 倒计时程序代码,需要的朋友可以参考下。
2022-11-21

javascript学习笔记(三)显示当时时间的代码

主要是为了熟悉javascript中在date对象,大家可以看下。
2022-11-21

MongoDB学习笔记:应用程序设计

本文更新于2021-12-11,使用MongoDB 4.4.5。目录范式化与反范式化优化数据操作一致性管理模式迁移范式化与反范式化范式化(normalization)将数据分散到多个集合,不同集合之间相互引用数据。反范式化(denormalization)将每
MongoDB学习笔记:应用程序设计
2020-10-15

《JavaScript高级程序设计》学习笔记(表单和数据完整性)

表单和数据完整性创建表单元素是为了满足用户向服务器发送数据的需求。 表单基础HTML表单通过元素来定义特性:method 属性 设置或获取如何将表单数据发送到服务器action 属性 设置或获取表单内容要发送处理的 URLenctype 属
2023-06-03

javascript学习笔记(二) 鼠标经过时,改变div块的背景色的代码

javascript学习笔记(二) 鼠标经过时,改变div块的背景色的实现代码,当然也可以用css实现。
2022-11-21

好程序员web前端培训分享JavaScript学习笔记SASS

  好程序员web前端培训分享JavaScript学习笔记SASS,世界上最成熟、最稳定、最强大的专业级CSS扩展语言!· sass 是一个 css 的预编译工具· 也就是能够 更优雅 的书写 css· sass 写出来的东西 浏览器不认识
2023-06-03

好程序员web前端培训分享JavaScript学习笔记之ES5

  好程序员web前端培训分享JavaScript学习笔记之ES5,我们所说的 ES5 和 ES6 其实就是在 js 语法的发展过程中的一个版本而已  比如我们使用的微信  最早的版本是没有支付功能的  随着时间的流逝,后来出现了一个版本,
2023-06-03

javascript 学习笔记(六)浏览器类型及版本信息检测代码

由于各浏览器对css以及js支持的差异性,我们在做前端开发时,经常需要先检测浏览器的类型及版本,然后会对各自的差异性来写代码!
2022-11-21

好程序员web前端教程分享JavaScript学习笔记之Event事件二

  好程序员web前端教程分享JavaScript学习笔记之Event事件二,今天来聊一聊事件的执行机制。  什么是事件的执行机制呢?  思考一个问题?  当一个大盒子嵌套一个小盒子的时候,并且两个盒子都有点击事件你点击里面的小盒子,外面的
2023-06-03

​好程序员web前端培训分享node学习笔记系列之四十一

好程序员web前端培训分享node学习笔记系列之四十一一、手动封装body-parser中间件 cookie-parser中间件1、封装axios请求方式body-parserconst qs = require("querystring"
2023-06-03

好程序员分享JavaScript学习笔记ES5中常见的数组方法

  好程序员分享JavaScript学习笔记ES5中常见的数组方法,ES5中常见的数组常用方法之前我们讲过的数组常用方法都是ES3的方法,今天来说一些ES5中的方法。indexOf· indexOf 用来找到数组中某一项的索引· 语法: i
2023-06-03

好程序员web前端培训分享JavaScript学习笔记闭包与继承

  好程序员web前端培训分享JavaScript学习笔记闭包与继承,闭包:闭包是我们函数的一种高级使用方式,在聊闭包之前我们要先回顾一下 函数函数的两个阶段我们一直说函数有两个阶段定义阶段调用阶段开辟一个 存储空间把函数体内的代码一模一样
2023-06-03

好程序员web前端培训分享JavaScript学习笔记ajax及ajax封装

  好程序员web前端培训分享JavaScript学习笔记ajax及ajax封装,ajax 全名 async javascript and XML  是前后台交互的能力  也就是我们客户端给服务端发送消息的工具,以及接受响应的工具  是一个
2023-06-03

编程热搜

目录