iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > html >JavaScript如何利用Date实现简单的倒计时
  • 882
分享到

JavaScript如何利用Date实现简单的倒计时

2024-04-02 19:04:59 882人浏览 泡泡鱼
摘要

这篇文章将为大家详细讲解有关javascript如何利用Date实现简单的倒计时,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。介绍Date对象,是操作日期和时间的对象。D

这篇文章将为大家详细讲解有关javascript如何利用Date实现简单的倒计时,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

介绍

Date对象,是操作日期和时间的对象。Date对象对日期和时间的操作只能通过方法。Date在js中和Array类似,都是拥有自己的特殊方法的特殊对象。

创建 Date 对象的语法:

var myDate=new Date() //Date 对象会自动把当前日期和时间保存为其初始值。

获取倒计时之前,我们不妨先来看怎样获取当前时间吧!!!

function time(){ var oDate = new Date(); var year = oDate.getFullYear(); var month = oDate.getMonth() + 1 ; var dDate = oDate.getDate(); var day = oDate.getDay(); var house = oDate.getHours(); var minu = oDate.getMinutes(); var sec = oDate.getSeconds(); switch(day){ case 1: day = '星期一'; break; case 2: day = '星期二'; break; case 3: day = '星期三'; break; case 4: day = '星期四'; break; case 5: day = '星期五'; break; case 6: day = '星期六'; break; case 0: day = '星期日'; break; } function double( t ){ if( t < 10 ){ t = '0' + t; } return t; } document.body.innerhtml = year + '年' + month +'月'+ dDate + '日 ' + day + ' ' + double(house) +':'+ double(minu) +':' + double(sec); } time(); setInterval(time,1000);

获取倒计时

     1、实现倒计时功能

     2、倒计时结束按钮可被点击,之前不可被点击

实例代码:

<!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><div id="lastTime"> <span>0天 </span> <span>00: </span> <span>00: </span> <span>00 </span></div><br /><br /><style type="text/CSS">#btn{ text-decoration: none; display: block; width: 100px; height: 35px; background: #ccc; text-align: center; line-height: 35px; color: #666;}#btn.btn{ background: red; color: #fff; font-size: 20px; font-weight: bold;}</style><a href="javascript:;" id="btn">即将开抢!</a><script type="text/javascript"> var oLt = document.getElementById("lastTime"); var oBtn = document.getElementById("btn"); time(); var timer = setInterval( time , 1000 ); function time(){ var endTime = new Date('2017/01/13 00:00:00');//结束日期不得在当前日期之前 var nowTime = new Date(); var splus = endTime.getTime() - nowTime.getTime(); //天 时 分 秒 if( splus <= 1 ){ clearInterval( timer ); oBtn.className = 'btn'; oBn.innerHTML = '开始秒杀!'; oBtn.href = 'http://www.baidu.com'; return; }else{ oBtn.className = ''; } var day = Math.floor( splus / 1000 / 60 / 60 / 24 ); var hours = Math.floor( splus / 1000 / 60 / 60 % 24 ); var min = Math.floor(splus / 1000 / 60 % 60); var sec = Math.floor(splus / 1000 % 60); oLt.innerHTML = day + '天 ' + double( hours ) + ':' + double( min ) + ':' + double( sec ); function double( n ){ if( n < 10 ){ n = '0' + n; } return n; } }</script></body></html>

关于“JavaScript如何利用Date实现简单的倒计时”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

--结束END--

本文标题: JavaScript如何利用Date实现简单的倒计时

本文链接: https://www.lsjlt.com/news/88962.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

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

下载Word文档
猜你喜欢
  • JavaScript如何利用Date实现简单的倒计时
    这篇文章将为大家详细讲解有关JavaScript如何利用Date实现简单的倒计时,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。介绍Date对象,是操作日期和时间的对象。D...
    99+
    2024-04-02
  • JavaScript如何实现简单的倒计时效果
    这篇文章主要介绍了JavaScript如何实现简单的倒计时效果的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇JavaScript如何实现简单的倒计时效果文章都会有所收获,下面我们一起来看看吧。具体代码如下<...
    99+
    2023-07-02
  • javascript实现简单倒计时效果
    本文实例为大家分享了javascript实现倒计时效果的具体代码,供大家参考,具体内容如下 实现思路: 1、页面创建好天、小时、分、秒的标签元素,定义好样式 2、js获取天、小时、分...
    99+
    2024-04-02
  • JavaScript实现简单的倒计时效果
    本文实例为大家分享了JavaScript实现简单倒计时效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html>     <...
    99+
    2024-04-02
  • javascript怎么实现简单页面倒计时
    小编给大家分享一下javascript怎么实现简单页面倒计时,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!具体如下:<!DOCTYPE html><html><head>&nb...
    99+
    2023-06-06
  • python如何实现简单倒计时功能
    这篇文章给大家分享的是有关python如何实现简单倒计时功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。python的五大特点是什么python的五大特点:1.简单易学,开发程序时,专注的是解决问题,而不是搞明...
    99+
    2023-06-14
  • 如何利用JavaScript实现春节倒计时效果
    这篇文章给大家分享的是有关如何利用JavaScript实现春节倒计时效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。效果预览html部分<!DOCTYPE html><!--geya...
    99+
    2023-06-26
  • javascript如何实现倒计时
    这篇“javascript如何实现倒计时”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“javascript如何实现倒计时”文...
    99+
    2023-07-02
  • python实现简单倒计时功能
    使用python实现简单倒计时exe,供大家参考,具体内容如下 使用tkinter制作界面实现倒计时功能。 使用time.sleep(1)实现 秒级 倒计时 使用...
    99+
    2024-04-02
  • JS实现简单网页倒计时器
    制作一个简单的网页倒计时器(js原生代码),供大家参考,具体内容如下 实现一个简单的网页倒计时(距离xx年x月x日还剩多少时间),效果是这样的 首先HTML代码部分,我们需要简单编...
    99+
    2022-11-13
    JS网页倒计时器 JS倒计时器 JS网页倒计时
  • 如何利用redis实现倒计时任务
    这篇文章主要介绍“如何利用redis实现倒计时任务”,在日常操作中,相信很多人在如何利用redis实现倒计时任务问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何利用redi...
    99+
    2024-04-02
  • javascript如何实现数字倒计时
    这篇文章主要介绍了javascript如何实现数字倒计时的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇javascript如何实现数字倒计时文章都会有所收获,下面我们一起来看看吧。JavaScript是一种非常...
    99+
    2023-07-06
  • JavaScript实现简单计时器
    本文实例为大家分享了JavaScript实现简单计时器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"&g...
    99+
    2024-04-02
  • JavaScript利用Canvas实现粒子动画倒计时
    目录canvas 粒子动画介绍何为canvas粒子动画是啥canvas定义初始变量初始化canvas和数字文本创建一定数量的点倒计时倒计时文本绘画循环绘制点动画效果图canvas 粒...
    99+
    2022-12-09
    JavaScript Canvas粒子动画倒计时 JavaScript  粒子动画倒计时 JavaScript Canvas 倒计时 JavaScript 倒计时
  • 微信小程序如何实现简单倒计时功能
    本篇内容介绍了“微信小程序如何实现简单倒计时功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!任务描述:计时器任务要求:案例描述:设计一个实...
    99+
    2023-06-30
  • 利用JavaScript实现简单的网页时钟
    目录一、效果展示二、使用的技术三、日期对象1.指定时间2.获取目前时间三、源代码前言: 今天带大家使用JavaScript定制一款网页时钟 一、效果展示 二、使用的技术 主要使用了...
    99+
    2024-04-02
  • JavaScript如何实现验证码倒计时
    小编给大家分享一下JavaScript如何实现验证码倒计时,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! ...
    99+
    2024-04-02
  • 小程序实现简单验证码倒计时
    本篇文章主要讲关于小程序验证码倒计时的功能实现,供大家参考,具体内容如下 首先是wxml部分 <form bindsubmit="regist">     <v...
    99+
    2024-04-02
  • js如何通过Date对象实现倒计时动画效果
    小编给大家分享一下js如何通过Date对象实现倒计时动画效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!js通过Date对象实...
    99+
    2024-04-02
  • 微信小程序实现简单倒计时功能
    本文实例为大家分享了微信小程序实现简单倒计时的具体代码,供大家参考,具体内容如下 任务描述: 计时器 任务要求: 案例描述:设计一个实现倒计时功能的小程序,小程序运行后,首先显示空白...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作