js如何设置一个倒计时

//申明一个定时器

let endInterval;

//结束时间(毫秒数,这里是距离 1970 年 1 月 1 日至今的毫秒数)

let endSeconds;

//结束时间差

const ENDTIME = 10 * 1000;

window.onload = function () {

  //当页面加载的时候,获取当前加载页面时刻的当前时间,再加上我们需要的倒计时间,注意这里全都是毫秒数,。

  endSeconds= new Date().getTime() + ENDTIME;

  //开始定时器

  endInterval = setInterval(timeItev, 500);

}

function timeItev() {

  //计算时间差,在定时器里面不停获取到新的new Date(),用end-new这个值就会一直变小

  let nowDate=new Date(endSeconds - new Date().getTime());

  //转化为分钟和秒钟

  let min = nowDate.getMinutes();

  let sec = nowDate.getSeconds();

  //把时间设置到你需要的标签 上面

  $("#time").html(`${min}:${sec}`)

  if(min==0 && sec==0){

    clearInterval(endInterval)

    console.log("定时器结束")

  }

}

时间: 2024-12-15 07:10:07

js如何设置一个倒计时的相关文章

Js写的一个倒计时效果实例

我们经常会看到某些网站在注册的时候喜欢搞个按钮倒计时的效果,就是多少秒之后注册这个按钮才可以点击,其目的就是强迫你去看他的注册注意事项,这是一个很实用的效果:另外当我们进行在线考试的时候也必定会碰到答题倒计时的效果,这种倒计时效果是如何实现的呢?下面我们就用Js来实现一个倒计时效果,具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf

JS 代码编一个倒时器

有时候在生活中,你需要一个JavaScript倒计时时钟,而不是一个末日装置设备.不管你是否有一次约会,销售.促销.或者游戏,你可以受益于使用原生JavaScript构建一个时钟,而不是拿到一个现成的插件.虽然有许多很棒的时钟插件,但如果使用原生 JavaScript 实现,那你将得到以下好处: 代码将是轻量级的,因为它没有依赖关系. 你的网站会表现得更好,因为你不需要加载外部脚本和样式表. 你将会有更高的可控性,因为你将按照想要的时钟行为的方式来创建它(而不是找一个趋向你想法的插件). 所以事

18 行 JS 代码编一个倒时器

有时候在生活中,你需要一个JavaScript倒计时时钟,而不是一个末日装置设备.不管你是否有一次约会,销售.促销.或者游戏,你可以受益于使用原生JavaScript构建一个时钟,而不是拿到一个现成的插件.虽然有许多很棒的时钟插件,但如果使用原生 JavaScript 实现,那你将得到以下好处: 代码将是轻量级的,因为它没有依赖关系. 你的网站会表现得更好,因为你不需要加载外部脚本和样式表. 你将会有更高的可控性,因为你将按照想要的时钟行为的方式来创建它(而不是找一个趋向你想法的插件). 所以事

闪购活动js 【一个倒计时接一个倒计时活动】

封装倒计时js -闪购活动(一个倒计时接一个倒计时活动) 闪购活动 上个活动结束 下个活动接着开始 以此类推[技术要点:时间的连续]的js代码 应用场景:手机端商城,几分钟活动,手指左右滑动界面到另一个倒计时活动(要求:第一个倒计时活动后,第二个倒计时活动才开始,以此类推) 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD

js简单时分秒倒计时

最近做浏览器界面倒计时,用js就实现,两种方式: 一:设置时长,进行倒计时.比如考试时间等等 代码如下: 1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>简单时长倒计时</title> 5 <SCRIPT type="text/javascript"> 6 var maxtime = 60 * 60; //一个小时,按秒计算,自己调整! 7

[jQuery编程挑战]006 生成一个倒计时效果

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"/> <title>生成一个倒计时效果</title> <style type="text/css"> body{ margin:0; padding:0; background: orange; width: 100%; height: 10

原生js写的一个弧形菜单插件

弧形菜单是一种半弧式或者全弧形菜单,是一种不同于传统横向或者竖向菜单形式的菜单.最近在网上看到好多人写出了这种效果,于是也尝试自己写了一个. 实现方式:原生态js 主要结构: 1.参数合并 1 var defaultPra = { 2 mainMenuId: "ArcMenu",//主菜单id 3 menuBoxId:"menuBox",//菜单包裹id 4 position: "",//弧形菜单 5 customPosition:"0

用node.js express设置路径后 子路径下的页面访问静态资源路径出问题

在routes/news_mian.js 设置了访问news_main.html 的路径 '/',通知设置一个访问news-page.html的子路径'/newspage'子路径.但是在访问loaclhost:3000/news/newspage时静态资源路径前多了一个/news导致不能找到静态资源 app.js var express=require('express'); var app=express(); var path=require('path'); var http=requir

node.js 创建第一个web应用

安装node.js   从http://nodejs.org/ 下载安装程序进行安装. 安装后从开始菜单启动: Node.js command prompt 安装web开发框架Express 如果需要代理访问网络,先用下面的命令设置代理: > npm config set proxy=http://192.168.1.1:8080 运行下面命令进行安装express: > npm install express 执行下面命令,安装可执行程序: > npm install -g [emai