JS秒表

最新推荐文章于 2024-09-23 23:30:08 发布

梦想做程序员的剪辑师

最新推荐文章于 2024-09-23 23:30:08 发布

阅读量169

点赞数

本文链接：https://blog.csdn.net/straw_/article/details/104842544

版权

效果图：
在这里插入图片描述

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
				*{margin:0 ;padding: 0;font-size: 40px;}
				#div1{
					width: 300px;
					height: 500px;
					border: #000000 1px solid;
					margin: 100px auto;
					position: relative;
					background-image:url(imgs/timg.jpg);
					background-size: 840px 500px ;
					background-repeat: no-repeat;
					border-radius: 30px;
					box-shadow: #000000 5px 5px 20px ; 
				}
				
				/* 秒表的样式 */
				a{
					background:linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
					width: 200px;
					height: 60px;
					position: absolute;top:100px;left:50px;
					border-radius: 30px;
					font-size: 24px;
					text-decoration: none;
					text-align: center;
					text-transform: uppercase;
					line-height: 60px;
					font-family: "arial rounded mt bold";
					color: #FFFFFF;
					background-size: 400%;
					z-index: 1;
					
				}
				@keyframes change{
					0%{background-position: 0%;}
					100%{background-position: 400%;}
				}
				
				a:before{
					content: "";
					background:linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
					width: 200px;
					height: 60px;
					position: absolute;top: 0px;right: 0px;bottom:0px;left: 0px;
					border-radius: 40px;
					z-index: -1;
					background-size: 400%;
					transition: 1s;
					opacity: 0;
				}
				a:hover{
					animation: change 8s linear infinite;
				}
				a:hover:before {
					animation: change 8s linear infinite;
					filter: blur(20px);
					opacity: 1;
				}
				#count{
					width: 300px ;
					height: 50px;
					color: white;
					position: absolute;top: 230px;left: 0px;
					text-align: center;
					line-height: 50px;
					font-family:"宋体" ;
				}
				#Button{
					width:300px ;
					height: 400px;
					position: absolute;top: 100px;
				}
				#start{
					position: absolute;top: 260px;left: 180px;
					display: block;
					color: #ffffff;
					border: #da7b06 2px solid;
					width: 80px;
					height: 80px;
					border-radius: 50px;
					background:rgba(247, 160, 37, 0.5);
					outline: none;
					font-size: 24px;
				}
				#pause{
					position: absolute;top: 260px;left: 180px;
					display: none;
					color: #ff7375;
					border: #C95858 2px solid;
					width: 80px;
					height: 80px;
					border-radius: 50px;
					background:rgba(185, 0, 3,0.5);
					outline: none;
					font-size: 24px;
				}
				#stop{
					position: absolute;top: 260px;left: 40px;
					color:#98f2ff;
					border: #4a85ac 2px solid;
					width: 80px;
					height: 80px;
					border-radius: 50px;
					background:rgba(103, 184, 238, 0.5);
					outline: none;
					font-size: 24px;
				}

		</style>
		<script type="text/javascript">
			//可以将查找标签节点的操作进行简化
			function $(id) {
				return document.getElementById(id);
			}
			window.onload = function(){
				var count = 0;//ms计数
				var timer = null;
				$("start").onclick = function(){
					//点击隐藏开始按钮，显示开始按钮
					$("start").style.display="none";
					$("pause").style.display="block";
					//秒表的样式
					$("name").style.animation="change 8s linear infinite" ;
					
					
					timer = setInterval(function(){
						count++;
						$("id_MS").innerHTML =TwoNumber(count% 100) ;
						$("id_S").innerHTML =TwoNumber(parseInt(count/100)%60);
						$("id_M").innerHTML =TwoNumber(parseInt(count/6000)%60);
						$("id_H").innerHTML =TwoNumber(parseInt(count/360000));
					},10)
				}
				$("pause").onclick = function(){
					//暂停计时
					clearInterval(timer);
					//暂停后秒表动画关闭
					$("name").style.animation="none" ;
					//
					$("start").style.display="block";
					$("pause").style.display="none";
				}
				$("stop").onclick = function(){
					clearInterval(timer);
					$("id_MS").innerHTML = "00";
					$("id_S").innerHTML = "00";
					$("id_M").innerHTML = "00";
					$("id_H").innerHTML = "00";
					count = 0;
					//点击复位按钮，隐藏暂停按钮，显示开始按钮
					$("pause").style.display="none";
					$("start").style.display="block";
					//暂停后秒表动画关闭
					$("name").style.animation="none" ;
				}
				
				
				function TwoNumber (num) {
					if(num < 10) {
						return "0"+num;
					}
					if(num >= 10){
						return num;
					}
				}
			}
		</script>
		</head>
		
	</head>
	<body>
		
		<div id="div1">
			<a id="name" href="#">秒表</a>
			<div id="count">
				<span id="id_H">00</span>:
				<span id="id_M">00</span>:
				<span id="id_S">00</span>:
				<span id="id_MS">00</span>
			</div>
			<div id="Button">
				<input type="button" id="start" value="开始" />
				<input type="button" id="pause" value="暂停" />
				<input type="button" id="stop" value="复位" />
			</div>
			
		</div>
	</body>
</html>