在网页上做一个时钟效果，动态时钟效果，每个一秒钟获取一次时间渲染到网页

已于 2022-09-12 16:54:11 修改
阅读量1.8k 收藏 10
点赞数 1
文章标签： javascript 前端 开发语言
于 2022-09-12 16:51:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65792710/article/details/126819256
版权

在网页上做一个时钟效果，动态时钟效果，每个一秒钟获取一次时间渲染到网页

在这里插入图片描述

一、css部分

div{
				width: 400px;
				height: 50px;
				text-align: center;
				margin: 0 auto;
				padding-top: 30px;
				background-color: olive;
				color: aliceblue;
				font-size: 17px;
				border-radius: 100px;
			}

二、body部分

<body>
		
		<div id="cont" >
		</div>
		<script>
			//周期定时器，使得时间可以循环
			var timer=setInterval(()=>{
				//获取当前时间
				var now=new Date()
				//根据本地时间把Date对象转为字符串
				console.log(now.toLocaleString())
				//通过get获取各时间段
				var year=now.getFullYear()
				var month=now.getMonth()+1
				var date=now.getDate()
				var hours=now.getHours()
				var minutes=now.getMinutes()
				var seconds=now.getSeconds()
				//拼接
				var str=`当前时间是：${year}年${month<10? '0'+month:month}月${date<10?'0'+date:date}日     ${hours}时：${minutes}分：${seconds}秒`
				//渲染到网页
				cont.innerHTML=str	
			},1000)
		</script>
	</body>
#小裁
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
实现电子时钟，每隔一秒更新一个显示
11-19 3621
实现平台：VS 2013，不同的平台，头文件可能会有所不同，在此处注意Windows下清屏为“cls”，睡眠为Sleep（）等。 头文件部分#define _CRT_SECURE_NO_WARNINGS 1 #include <iostream> using namespace std; #include<time.h> #include<iomanip> #include<windows.h>时
js实现数字时钟，按钮实现暂停开始
tfsun的博客
09-02 4222
用JS实现一个时钟，用一个按钮实现暂停开始时钟 <button id="clockBtn" onclick="StopStartClock()">暂停</button> //时钟 //这个变量是清除计时方法的参数，必须是全局变量 var myInterval=setInterval("TimeClock()",1000); function TimeClock() { var d=new Date(); v.
实现电子时钟效果，要求每隔一秒获取一次当前时间，并提供一个按钮控制电子时钟是否停止
weixin_45730641的博客
12-22 1422
【代码】实现电子时钟效果，要求每隔一秒获取一次当前时间，并提供一个按钮控制电子时钟是否停止。
html--动态时钟
最新发布
stqer的博客
05-12 808
【代码】html--动态时钟。
编写程序，实现电子时钟自动走动的效果并提供一个按钮控制电子时钟是否停止走动。
热门推荐
加辣椒了吗?的博客
10-31 1万+
题目： 编写程序，实现电子时钟自动走动的效果并提供一个按钮控制电子时钟是否停止走动。 代码解释： chance_str(n)函数：对获取的时间格式化，即对不足两位数的一位数补零。 time()函数：获取时间，新建Date对象返回当日的日期和时间。其中setTimeout一秒刷新一次时间。 chance()函数：控制按钮 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>
编写程序，实现电子时钟自动走动的效果，并提供一个按钮控制电子时钟是否停止走动。
m0_73145804的博客
10-27 2825
电子时钟自动走动的效果
js时钟自动一秒钟执行一次，获取当前时间
有问题可关注公众号：前端研究院 后台输入问题回复
12-24 2228
<html> <head> <script type="text/javascript"> function Clock() { var date = new Date(); this.year = date.getFullYear(); this.month =...
HTML写一个网页动态时钟
09-28
本文通过实例代码给大家介绍了HTML写一个网页动态时钟效果，需要的的朋友参考下吧
js实现一个简单的数字时钟效果
10-20
本文主要介绍了js实现一个简单的数字时钟效果的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
用HTML5的canvas实现一个炫酷时钟效果
09-28
HTML5的canvas元素是网页开发中的一个重要组成部分，它允许开发者在网页上绘制图形，实现动态交互的效果。在本文中，我们将探讨如何利用canvas实现一个炫酷的时钟效果。 首先，我们有两个canvas元素：一个用于绘制...
JS实现的网页倒计时数字时钟效果
10-24
主要介绍了JS实现的网页倒计时数字时钟效果,是一款非常实用的javascript倒计时特效,具有一定参考借鉴价值,需要的朋友可以参考下
javascript用js简单的实现电子时钟
qq_43502384的博客
08-06 3902
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>Document</title> <!--给div一个简单样式--> &lt...
Python编写电子时钟程序
m0_74180664的博客
01-11 1829
Python&电子时钟&图形用户界面
C51--BigTask 电子钟设计
weixin_68175518的博客
08-28 2425
基于51核心板，设计一个具有实用价值的电子钟。要求能够在串口助手上每间隔1秒打印一 次日期与时间，格式为：年-月-日 时:分:秒 星期 此外，加入： 1.为电子钟添加流水灯功能 2.能在数码管上显示当前的小时、分钟值，并能够使用按键切换显示为月、日... 3.能将断电时的日期与时间保存至 EEPROM，并且能够在重新上电后恢复断电前的日期与时间，继续计时
JS项目—电子时钟的设计与实现
代号006
08-11 5784
一款简单的电子时钟，可以显示当前的时分秒，并且可以每秒更新一次，实现动态效果。
用JS每秒刷新一次时间实现当前时间
Cheans
12-18 5827
有一个每秒走一次的效果，直接贴代码： jQuery实现北京时间 $(function () { setInterval(function(){ $("span").html(date("Y-m-d H:i:s")); },1000); }); 北京时间： 主要的功能是functions.js文件里面实现了date方法，方
html5：canvas实现炫酷时钟
critans的博客
11-12 705
1.使用canvas的.arc()方法实现每毫秒时钟进度时分秒的绘制2.通过定时器每一毫秒绘制一次时钟，实现时钟的动画效果。
14款超时尚的HTML5时钟动画
delishcomcn的博客
07-19 1027
时钟动画在网页应用中也非常广泛，在一些个人博客中，我们经常会看到一些相当个性化的HTML5时钟动画。今天我们向大家分享了14款形态各异的超时尚HTML5时钟动画，其中有圆盘时钟、3D时钟、个性化时钟等，强大的HTML5为时钟动画增添了不少精彩，希望能给大家带来帮助。
JavaScript——在页面上实现一个显示当前时间的动态时钟
weixin_67658096的博客
09-24 2007
js 动态时钟
js实现电子时钟效果，要求每隔一秒获取当前时间，并提供一个按钮暂停
09-21
### 回答1： 你可以使用以下代码实现一个基本的电子...以上代码会实现一个具有电子时钟效果的页面，每隔一秒钟会自动获取当前时间并更新时钟的显示。同时，通过点击"暂停"按钮可以停止时钟的运行。 希望对您有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值