js动态处理时间

最新推荐文章于 2024-03-27 11:04:39 发布

遥远的理想国

最新推荐文章于 2024-03-27 11:04:39 发布

阅读量252

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_41740463/article/details/108109800

版权

JS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

获取时间

var time = new Date（）
//Wed Aug 19 2020 20:22:12 GMT+0800 (中国标准时间)

var c = new Date().getTime()
//1597839732075

第二个值为毫秒

时间有关的demo–倒计时

样式:
在这里插入图片描述
链接:demo

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				color: #008000;
				font-size: 90px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<p id="p1"></p>
		<script type="text/javascript">
			var wantTime = new Date("2020-12-08 20:00:00")
			function fun(){
				var nowTime = new Date()
				var differ = parseInt((wantTime-nowTime)/1000)
				var day = parseInt(differ/60/60/24)
				day<10?day="0"+day:day
				var hour = parseInt(differ/60/60/24-day/24)
				hour<10?hour="0"+hour:hour
				var minute = parseInt(differ%(60*60)/60)
				minute<10?minute="0"+minute:minute
				var second = parseInt(differ%60)
				second<10?second="0"+second:second
			var str = "距离毕业 还有"+day+"天"+hour+"小时"
			+minute+"分"+second+"秒"
			p1.innerText = str
			}
			fun()
			setInterval(function(){
				fun()
			},1000)
		</script>
	</body>
</html>

该函数实现了对目标日期的倒计时.还添加了显示优化效果.

demo—模拟时钟

该函数实现了一个模拟时钟,添加了计时器,并改变其第二个参数,使其改变的速率大大提升,更加流畅.
地址:demo
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				height: 600px;
				width: 600px;
				margin: 0 auto;
				position: relative;
				background: url(images/clock.jpg);
			}
			img{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="./images/hour.png" id="h">
			<img src="./images/minute.png" id="m">
			<img src="./images/second.png" id="s">
		</div>
		<script type="text/javascript">
		function fn(){
			var time = new Date()
			var hour = time.getHours()
			var minute = time.getMinutes()
			var second = time.getSeconds()
			var ms = time.getMilliseconds()
			s.style.transform = "rotate("+(second+ms/1000 )* 6 +"deg)"
			m.style.transform = "rotate("+(minute+second/60) *6 +"deg)"
			h.style.transform = "rotate("+(hour+minute/60) *30 +"deg)"
		}
			fn()
			setInterval(function(){
					fn()
			},10)
		</script>
	</body>
</html>

遥远的理想国

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js动态处理时间

获取时间var time = new Date（）//Wed Aug 19 2020 20:22:12 GMT+0800 (中国标准时间)var c = new Date().getTime()//1597839732075第二个值为毫秒时间有关的demo–倒计时样式:链接:demo<html> <head> <meta charset="utf-8"> <title></title> <style t
复制链接

扫一扫