关于js时钟向上滑动效果

执着的兔子 2018-03-10 03:37:48
想做一个数字时钟,当秒数增加时,秒针位上的数字也会不断向上滑动,想请各位前辈给个思路
...全文
402 1 打赏 收藏 转发到动态 举报
写回复
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
天际的海浪 2018-03-10
  • 打赏
  • 举报
回复

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
.p {
	width: 30px;
	height: 40px;
	overflow: hidden;
	display: inline-block;
}
.p div {
	width: 30px;
	height: 40px;
	background-color: #000;
	color: #fff;
	font-size: 30px;
	line-height: 40px;
	text-align: center;
	border-radius: 4px;
	margin-bottom: 2px;
	margin-top: 0px;
}
.p.tra div:first-child {
	transition: margin-top 300ms;
	margin-top: -42px;
}
</style>
</head>
<body>

<div id="s" class="p tra">
	<div></div>
	<div>0</div>
</div>
<script type="text/javascript">
setInterval(function(){
	var os = document.getElementById("s");
	var osd = os.getElementsByTagName("div");
	osd[0].innerText = osd[1].innerText;
	osd[1].innerText = (parseInt(osd[1].innerText, 10)+1)%10;
	os.className = "p";
	setTimeout(function(){
		os.className = "p tra";
	}, 0);
}, 1000);
</script>
</body>
</html>
相关推荐

87,717

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告