JavaScript实现时钟计时

会动的时钟

1.目标

在这里插入图片描述

2.分析

1.最开始页面不显示时间,有两个按钮 开始 暂停。开始按钮是可以点击的,暂停按钮不能点击

2.当点击开始按钮后,设置开始按钮不可用,暂停按钮可用。然后将当前系统时间放到按钮上面。每隔1秒中更新一下页面显示的时间。

3.当点击暂停按钮,设置开始按钮可用,暂停按钮不可用。同时停止时间的走动

3.步骤:

1.创建一个htm页面

2.在页面中书写html标签

3.获取开始按钮的标签对象,并给绑定单击事件,并绑定匿名函数 ??

4.在开始按钮的单击事件绑定的函数中设置开始按钮不可用,暂停按钮可用

5.获取当前系统时间 ???

6.获取显示时间的标签

7.使用显示时间的标签对象调用属性将当前系统时间显示到标签文本中 ??

8.开启定时器,每隔1秒更新文本时间

9.点击暂停,给暂停按钮绑定单击事件,绑定匿名函数

10.在暂停按钮的函数中,设置开始按钮可用,暂停按钮不可用

11.停止时间走动,取消定时器

4.代码实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1 style="color: darkgreen" id="clock">现在的时间</h1>
<hr/>
<input type="button" value="开始" id="btnStart">
<input type="button" value="暂停" id="btnPause" disabled="disabled">
<script type="text/javascript">// 3.获取开始按钮的标签对象,并给绑定单击事件,并绑定匿名函数 ??let timer;document.getElementById('btnStart').onclick = function () {// 4.在开始按钮的单击事件绑定的函数中设置设置开始按钮不可用,暂停按钮可用/*让开始按钮不可用就是给开始按钮标签的disabled属性值使用js代码设置为true,表示开始按钮有disabled即不可用*/document.getElementById('btnStart').disabled = true;/*让暂停按钮可用就是给暂停按钮标签的disabled属性值使用js代码设置为false,表示暂停按钮没有disabled即可用*/document.getElementById('btnPause').disabled = false;// 5.获取当前系统时间let date = new Date();// console.log(date);//5.1将系统时间转换为能够看懂的时间//toLocaleString() 据本地时间格式,把 Date 对象转换为字符串。// console.log(date.toLocaleString());let timeDateStr = date.toLocaleString();// 6.获取显示时间的标签 <h1 style="color: darkgreen" id="clock">现在的时间</h1>// 7.使用显示时间的标签对象调用属性将当前系统时间显示到标签文本中  ??//在js中操作标签的文本使用:标签对象.innerHTML  获取文本值,修改文本值:标签对象.innerHTML=新的值document.getElementById('clock').innerHTML = timeDateStr;// 8.开启定时器,每隔1秒更新文本时间timer = window.setInterval(function () {//每隔1秒就将当期系统时间赋值给h1标签文本一次//new Date().toLocaleString() 获取当前系统时间并转换为字符串document.getElementById('clock').innerHTML = new Date().toLocaleString();}, 1000);};// 9.点击暂停,给暂停按钮绑定单击事件,绑定匿名函数document.getElementById('btnPause').onclick = function () {// 10.在暂停按钮的函数中,// 10.1设置开始按钮可用document.getElementById('btnStart').disabled = false;// 10.2暂停按钮不可用document.getElementById('btnPause').disabled = true;// 11.停止时间走动,取消定时器window.clearInterval(timer);//timer表示定时器返回值};</script>
</body>
</html>

小结:

1.操作某个标签的文本使用:标签对象.innerHTML

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/39561.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

TransMIL:基于Transformer的多实例学习

MIL是弱监督分类问题的有力工具。然而&#xff0c;目前的MIL方法通常基于iid假设&#xff0c;忽略了不同实例之间的相关性。为了解决这个问题&#xff0c;作者提出了一个新的框架&#xff0c;称为相关性MIL&#xff0c;并提供了收敛性的证明。基于此框架&#xff0c;还设计了一…

3.js - 反射率(reflectivity) 、折射率(ior)

没啥太大的感觉 反射率 reflectivity 概念 反射率&#xff1a;指的是&#xff0c;材质表面反射光线的能力反射率&#xff0c;用于控制材质对环境光&#xff0c;或光源的反射程度反射率越高&#xff0c;材质表面反射的光线越多&#xff0c;看起来就越光亮使用 适用于&#xff0…

【OCPP】ocpp1.6协议第5.1章节Cancel Reservation的介绍及翻译

目录 5.1 取消预约Cancel Reservation-概述 Cancel Reservation CancelReservation.req 请求消息 CancelReservation.conf 确认消息 取消预定的流程 应用场景 示例消息 CancelReservation.req 示例 CancelReservation.conf 示例 总结 5.1 取消预约Cancel Reservation…

VScode 常用插件

基础开发插件 Chinese (Simplified)&#xff08;简体中文语言包&#xff09;&#xff1a;这是适用于VS Code的中文&#xff08;简体&#xff09;语言包&#xff0c;适用于英语不太流利的用户。Auto Rename Tag&#xff1a;这个插件可以同步修改HTML/XML标签&#xff0c;当用户修…

【PYG】Cora数据集分类任务计算损失,cross_entropy为什么不能直接替换成mse_loss

cross_entropy计算误差方式&#xff0c;输入向量z为[1,2,3]&#xff0c;预测y为[1]&#xff0c;选择数为2&#xff0c;计算出一大坨e的式子为3.405&#xff0c;再用-23.405计算得到1.405MSE计算误差方式&#xff0c;输入z为[1,2,3]&#xff0c;预测向量应该是[1,0,0]&#xff0…

Dify入门指南

一.Dify介绍 生成式 AI 应用创新引擎&#xff0c;开源的 LLM 应用开发平台。提供从 Agent 构建到 AI workflow 编排、RAG 检索、模型管理等能力&#xff0c;轻松构建和运营生成式 AI 原生应用&#xff0c;比 LangChain 更易用。一个平台&#xff0c;接入全球大型语言模型。不同…

CesiumJS【Basic】- #050 绘制扫描线(Primitive方式)

文章目录 绘制扫描线(Primitive方式)- 需要自定义着色器1 目标2 代码2.1 main.ts绘制扫描线(Primitive方式)- 需要自定义着色器 1 目标 使用Primitive方式绘制扫描线 2 代码 2.1 main.ts import * as Cesium from cesium;const viewer = new Cesium.Viewer(cesiumConta…

自我反思与暑假及大三上学期规划

又要放暑假了&#xff0c;依稀记得上个暑假一边练车&#xff0c;一边试图拿捏C语言&#xff0c;第一次感觉暑假也可以如此忙碌。但是开学以后&#xff0c;我并没有把重心放在期望自己应该做的事情上&#xff0c;更多的时间花费在了处理学院的相关事务。现在看来&#xff0c;大二…

《昇思 25 天学习打卡营第 9 天 | FCN 图像语义分割 》

活动地址&#xff1a;https://xihe.mindspore.cn/events/mindspore-training-camp 签名&#xff1a;Sam9029 这一章节 出现了一个 深度学习 中经常出现的概念 全卷积网络&#xff08;Fully Convolutional Networks&#xff09; : 官话&#xff1a;FCN 主要用于图像分割领域&…

德璞资本:桥水公司如何利用AI实现投资决策的精准提升?

摘要&#xff1a; 在金融科技的浪潮中&#xff0c;桥水公司推出了一只依靠机器学习决策的创新基金&#xff0c;吸引了大量投资者的关注。本文将深入探讨该基金的背景、AI技术的应用、对桥水公司转型的影响&#xff0c;以及未来发展的前景。 新基金背景&#xff1a;桥水公司的创…

2024年7月2日 (周二) 叶子游戏新闻

老板键工具来唤去: 它可以为常用程序自定义快捷键&#xff0c;实现一键唤起、一键隐藏的 Windows 工具&#xff0c;并且支持窗口动态绑定快捷键&#xff08;无需设置自动实现&#xff09;。 卸载工具 HiBitUninstaller: Windows上的软件卸载工具 经典名作30周年新篇《恐怖惊魂夜…

MyBatis入门案例

实施前的准备工作&#xff1a; 1.准备数据库表2.创建一个新的springboot工程&#xff0c;选择引入对应的起步依赖&#xff08;mybatis、mysql驱动、lombok&#xff09;3.在application.properties文件中引入数据库连接信息4.创建对应的实体类Emp&#xff08;实体类属性采用驼峰…

throw 和return的区别,A函数里面执行B函数 B函数异常后 不再执行A函数

function aFun() {try {bFun();console.log(22222222222);} catch (e) {// 如果bFun中抛出异常&#xff0c;中止aFun的执行console.log(e.message);} }function bFun() {let a 1, b 1;if (a b) {throw new Error(Stopped by bFun); // 抛出异常&#xff0c;停止aFun}// bFun…

python3递归目录删除N天前的文件(带有日志记录)

本来想用linux find去处理,为了装逼,写了py玩玩,删除2w个文件总共用了2毫秒。因为这个脚本有记录删除时间,你可以看到开始时间和最后删除的时间。由于只用了2毫秒,把我吓了一跳以为删错文件了!! #!/usr/bin/env python3 # -*- encoding: utf-8 -*-@File : del_N…

补浏览器环境

一&#xff0c;导言 // global是node中的关键字&#xff08;全局变量&#xff09;&#xff0c;在node中调用其中的元素时&#xff0c;可以直接引用&#xff0c;不用加global前缀&#xff0c;和浏览器中的window类似&#xff1b;在浏览器中可能会使用window前缀&#xff1a;win…

校园水质信息化监管系统——水质监管物联网系统

随着物联网技术的发展越来越成熟&#xff0c;它不断地与人们的日常生活和工作深入融合&#xff0c;推动着社会的进步。其中物联网系统集成在高校实践课程中可以应用到许多项目&#xff0c;如环境气象检测、花卉种植信息化监管、水质信息化监管、校园设施物联网信息化改造、停车…

C++编程(八)多态

文章目录 一、多态&#xff08;一&#xff09;概念1. 多态2. 函数重写3. 虚函数 &#xff08;二&#xff09;实现多态的条件1. 继承关系2. 父类中写虚函数3. 在子类中重写父类的虚函数4.父类的指针或引用指向子类的对象5. 使用示例 &#xff08;三&#xff09;虚析构函数&#…

springboot项目jar包修改数据库配置运行时异常

一、背景 我将软件成功打好jar包了&#xff0c;到部署的时候发现jar包中数据库配置写的有问题&#xff0c;不想再重新打包了&#xff0c;打算直接修改配置文件&#xff0c;结果修改配置后&#xff0c;再通过java -jar运行时就报错了。 二、问题描述 本地项目是springBoot项目…

【计算机图形学 | 基于MFC三维图形开发】期末考试知识点汇总(上)

文章目录 视频教程第一章 计算机图形学概述计算机图形学的定义计算机图形学的应用计算机图形学 vs 图像处理 vs模式识别图形显示器的发展及工作原理理解三维渲染管线 第二章 基本图元的扫描转换扫描转换直线的扫描转换DDA算法Bresenham算法中点画线算法圆的扫描转换中点画圆算法…

Java中的持续集成与持续部署

Java中的持续集成与持续部署 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将深入探讨Java中的持续集成&#xff08;Continuous Integration&#xff…