用javascript实现的倒计时

最新推荐文章于 2024-08-04 16:33:59 发布
置顶 最新推荐文章于 2024-08-04 16:33:59 发布
阅读量583 收藏
点赞数
文章标签： javascript function button xhtml 360 action
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhang964761032/article/details/6519963
版权

今天加强了javascript的学习，重新写了一个倒计时的简单案例。希望对初学者的有所帮助！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>倒计时</title>
</head>

<body>
<form action="js.html" id="myForm" name="myForm" method="post">

</form>
<div id="timenum">
  <input type="text" name="num" id="numDao" οnblur="setText1()" size="5:px"/>
</div>
<input type="button" name="but" id="but1" value="开始" οnclick="beginTime()"/>
<input type="button" name="but" id="but2" value="结束" οnclick="endTime()"/>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
 document.getElementById("but1").disabled="false";
 document.getElementById("but2").disabled="false";
 }
var timeConstr = null;
 var sec = null;
 function setText1(){
  var timenum = document.getElementById("numDao").value;
  document.getElementById("but1").removeAttribute("disabled");
  sec=timenum*60;
  }
 function beginTime(){
  var day = Math.floor(sec/3600/24);
  var hour = Math.floor((sec/3600)-24*day);
  var minu = Math.floor((sec-hour*3600-24*day*3600)/60);
  var second = sec-minu*60-hour*3600-24*day*3600;
  if(minu>0 && minu<10){
   minu = "0"+minu;
   } 
  if(second>0 && second<10){
   second = "0"+second;
   }
  document.getElementById("timenum").innerHTML="剩余:"+day+"天"+hour+"小时"+minu+"分钟"+second+"秒";
  if(sec==0){
   alert("表单提交了");
   window.clearTimeout(timeConstr);
   document.forms.item(0).submit();
   }
  document.getElementById("but1").disabled="false";
  document.getElementById("but2").removeAttribute("disabled");
  timeConstr = window.setTimeout('beginTime()',1000);
  sec=sec-1;
  }
 function endTime(){
  window.clearTimeout(timeConstr);
  document.getElementById("but1").removeAttribute("disabled");
  }  
</script>

如有问题，请留言！

zhang964761032
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
javaScript实现倒计时功能
qq_65715980的博客
07-08 1万+
目录一、主要思路二、css样式三、html代码四、js内容五、完整代码展示六、效果展示1.通过内置时间函数实例化日期对象获取当前时间 new Date。2.因为时间无法减去时间，有可能生成负数，所以采用时间戳的方法得到毫秒数形式的剩余时间，然后再把剩余时间转换为天、时、分、秒格式。3.最后把所获得的内容赋值给定义的变量。主要为了内容在页面展示美观，稍微美化一下。 三、html代码 定义一个默认格式为JavaScript引入定义变量。 四、js内容 1.首先获取html里面的spans里的全部标签
Javascript实现日期时间的倒计时
大爱无疆
01-28 959
var target=[]var time_id=[]function ShowDateTime(){    setTimeout("ShowDateTime()", 1000);for (var i=0,j=target.length;i{    var today=new Date();    timeold=target[i]-today.getTime();   //共多少毫秒  
javascript 实现倒计时
滴水穿石的专栏
03-04 963
<br /><br /> <script type="text/javascript"><br />     var addTimer = function () {<br />     var list = [],<br />         interval;<br /><br />         return function (id, time) {<br />             if (!interval)<br />                 interval = s
jQuery实现表单验证 点击验证码，倒计时60秒
jinchunzhao的博客
07-12 3926
当用户单击“获取验证码”按钮后，会从59秒开始计时。显示效果图HTML部分代码:&lt;a class="tableText fr" href="#"&gt;获取验证码&lt;/a&gt;jQuery代码:$(".tableText").click(function () { var time = 60; var timer = setInterval(function(){ ...
js实现漂亮的倒计时功能
勤奋的asialee的博客
05-15 2143
      打算写几篇博客总结下近来做的一个东西：www.eccpitbj.org/chitec2014         项目中要用到倒计时，找了几个，发现有比较漂亮的，当不支持ie6/ie7，后来没办法就做了兼容。现在将兼容方案介绍下： 在网上找了一个比较漂亮的javascript倒计时功能，效果如下：              用法就比较简单了，官网上都有，就不详细介绍了。...
JavaScript实现倒计时
KJ.JK，正在火热更新全网最新最全的华为OD题库
04-11 361
 实现多少秒可以直接设置        效果图 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value="一分半钟倒计时" onclick="d
用Javascript实现倒计时效果
茂茂的博客
02-07 381
用Javascript实现倒计时效果 正在学习大前端中，有代码和思路不规范不正确的地方往多多包涵，感谢指教 在某些商城网站中，我们常常可以看见其网站或者app上有一个区域放的是倒计时，来用来提醒用户还有多少时间将会发生什么事情，下面我们用代码来对其进行实现 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</ti
JavaScript实现倒计时案例
幸愉编程·信奥编程私教1v1
01-19 1201
JavaScript 实现倒计时案例
用javaScript实现倒计时案例
ryyzxf的博客
06-16 265
用javaScript实现倒计时案例先看效果上代码 先看效果 上代码 下面展示一些 内联代码片。 // html <div> <span class="hour">1</span> <span class="minute">2</span> <span class="second">3</span> </div> // css <style> div {
Javascript技术：怎样使用Javascript实现倒计时效果？
zy1992As的博客
10-31 777
上述代码中，第2行的+new Date()是new Date().getTime()代码的简写，返回当前时间戳，单位是毫秒。第4行代码计算剩余毫秒数，需要转换为秒数，转换规则为1秒/1000毫秒。倒计时的核心算法是输人的时间减去现在的时间，得出的剩余时间就是要显示的倒计时时间，这需要把时间都转化成时间戳(毫秒数)来进行计算，把得到的毫秒数转换为天数、小时、分数、秒数。在一些电商网站的活动页上会经常出现折扣商品的倒计时标记，显示离活动结束还剩x天x小时X分X秒，像这样的倒计时效果就可以利用日期对象来实现。
javascript实现倒计时跳转页面
10-22
本文给大家介绍了如何使用javascript实现倒计时跳转到其他页面的方法以及实现原理，非常的简单实用，有需要的小伙伴可以参考下。
javascript 实现网页 倒计时 代码
01-08
在JavaScript中实现网页倒计时是一项常见的任务，尤其在创建活动页面、竞赛倒计时或者定时发布内容等场景中非常实用。本篇文章将详细介绍如何利用JavaScript编写一个网页倒计时功能，并结合提供的`index.html`和`js`...
JavaScript实现网页跨年倒计时
01-18
JavaScript网页–跨年倒计时，供大家参考，具体内容如下 最近学弟在追一个学妹，我在帮学弟出谋划策。 学妹告诉学弟，我怕我们之间是因为这段时间接触多了你才喜欢我的。等跨年的时候，如果你还喜欢我，那个时候我再...
javascript实现倒计时并弹窗提示特效
10-24
倒计时的功能在我们做项目的时候会经常遇到，这里给大家分享的是个人编写的一个简易的效果代码，有需要的小伙伴可以参考下
牛客JS题（二十一）数组扁平化
最新发布
不起眼小菜菜的博客
08-04 835
注释很详细，直接上代码……
SpringBoot+Vue图书(图书借阅)管理系统-附项目源码与配套文档
m0_74283290的博客
08-03 1261
本论文阐述了一套先进的图书管理系统的设计与实现，该系统采用Java语言，结合现代Web开发框架和技术，旨在为图书馆提供高效、灵活且用户友好的资源管理解决方案。系统利用Spring Boot框架为核心，整合MyBatis ORM工具，以及MySQL数据库，构建了一个高性能、可扩展的后端服务。前端界面则采用了Vue.js框架，以提供流畅的用户交互体验。论文首先进行了详尽的需求分析，确定了系统的核心功能，包括图书的添加、编辑、删除、查询，读者的注册、登录、个人信息管理，以及图书的借阅、归还、续借流程。
vite静态资源处理，处理vite项目中src和url路径问题
WanweI897的博客
08-02 513
处理vite项目中src和url路径问题
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 2919
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
使用JavaScript实现倒计时功能。
06-06
以下是使用 JavaScript 实现倒计时功能的示例代码： ```html <!DOCTYPE html> 倒计时示例 <h1 id="countdown"></h1> // 目标日期 var targetDate = new Date("2022-01-01T00:00:00Z"); // 更新倒计时...
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值