首页 > 其他分享 >关于 js制作网页上的倒计时

关于 js制作网页上的倒计时

时间:2022-12-22 01:44:30浏览次数:55  
标签:function 60 网页 js 倒计时 jishiqi var

最近在初学js。遇到定时器这个函数,就想想可以做一个十分钟的倒计时功能。(变量命名不规范,见谅见谅。。)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
window.onload = function() {
var odiv = document.getElementById('div');

//将总时间以秒为单位进行计算10*60
var time = 600;

//设每秒减1
var sp = -1;
var btn = document.getElementById('ee');
function jishiqi(){
time += sp;

//总时间除以60取整即可以得到当前分钟数
var min = parseInt(time/60);

//同理,总的时间取余就是当前的秒数
var sec = time%60;
var sTr = '现在剩余时间是:'+ min+ '分:'+ sec +'秒';

//让div标签中显示这个字符串
odiv.innerHTML = sTr;
}

btn.onclick = function() {

//当前运行一次是因为刚打开网页后,计时器会延迟一秒显示,所以必须先运行一次,让网页无延迟显示
jishiqi();

//然后利用定时器每隔一秒运行一次
var timer = setInterval(jishiqi,1000);
}

}
</script>
<style>
.ww{
font-size: 30px;

}
</style>
<body>
<input type="button" value="dianjiwo" id="ee">
<div id="div" class="ww"></div>
</body>
</html>

标签:function,60,网页,js,倒计时,jishiqi,var
From: https://www.cnblogs.com/pythonwsf/p/16997518.html

相关文章

  • #yyds干货盘点#【愚公系列】2022年12月 微信小程序-three.js绘制球体
    前言Three.js是一款运行在浏览器中的3D引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。一个典型的Three.js程序至少要包括渲染器(Renderer)、场......
  • MVC_jsp演示历史以及MVC详解
    MVC_jsp演示历史jsp演变历史1、早期只有servlet,只能使用response输出标签数据,非常麻烦2、后来有jsp,简化了Servlet的开发,如果过度使用jsp,在jsp中即写大量的java......
  • Json字符串,JsonObject,Java对象相互转换
    Json字符串,JsonObject,Java对象相互转换1、Java对象类 publicclassUser{privateStringname;privateIntegerage;publicUser(){}publicUse......
  • 【Python】爬虫笔记-TypeError: Object of type 'method' is not JSON serializable
    最近尝试对b站做数据分析,自己边学边造轮子。b站的api返回的格式都是json,在对数据进行格式转换的过程中遇到一个令人哭笑不得的问题,特此记录下来。0x01首先获得b站的api......
  • Node.js(笔记02) - fs文件系统模块
    fs 文件系统模块fs 模块是 Node.js 官方提供的,用来操作文件的模块。提供了一系列的方法和属性,用来满足用户对文件的操作需求;例如:fs.readFile() 方法,用来读取指定文件中......
  • js 中常用函数汇总(含示例)
    〇、前言js在日常开发中还是比较常用的,本文将常用的js方法简单汇总一下,希望对你我有一点帮助。一、重复/延迟操作1.设置固定时间间隔,重复执行(setInterval(funcRef,......
  • 如何利用JS加密工具来压缩体积
    JavaScript是一种常用的网页编程语言,它可以用来在网页中执行各种功能。有时候,我们可能会需要对JavaScript代码进行解密,以便了解其中的逻辑或者修改其中的内容。那么,JavaScri......
  • 复习js小知识点之decodeURIComponent与decodeURI
    临近年底了,最近有了点空闲的时间,所以复习了一下js今天看到书上介绍了encodeURIComponent与encodeURI的区别,区别主要如下1、encodeURI只会编码空格,用%20代替,而而encodeURI......
  • Node.js(笔记01) - 初识Node.js
    本次学习目录:1)初识 Node.js2)fs 文件系统模块3)path 路径模块4)http 模块初识Node.js 回顾与思考1)前端需要掌握的基本技术:HTML、CSS和JAVASCRIPT2)浏览器中的 Javascri......
  • model_config = json.loads(model_config.decode('utf-8')) AttributeError: 'str' ob
    tensorflow_core/python/keras/saving/hdf5_format.py",line166,inload_model_from_hdf5   model_config=json.loads(model_config.decode('utf-8'))Attribute......