HTML+CSS+JS一个简易的计时器

最新推荐文章于 2024-10-15 13:45:00 发布

南有樛木。

最新推荐文章于 2024-10-15 13:45:00 发布

阅读量1.2w

点赞数 6

分类专栏： js HTML+CSS

本文链接：https://blog.csdn.net/qq_35310623/article/details/81100679

版权

一个粗糙的计时器，

HTML部分：

<div class="wrap">
    <div id="timer">
        <span id="hours">00</span>
        <span>:</span>
        <span id="minute">00</span>
        <span>:</span>
        <span id="second">00</span>
    </div>

    <div id="btn">
        <button id="begin">开始</button>
        <button id="pause">暂停</button>
    </div>
</div>

CSS部分：

*{
	margin:0;
	padding:0;
}

.wrap{
	width:300px;
	height:300px;
	border-radius:50%;
	position:absolute;
	top:calc(50% - 150px);
	left:calc(50% - 150px);
	box-shadow: 0 0 9px red;
}


#timer{
	position:absolute;
	top:90px;
	left:60px;
	font-size:38px;
}

#btn{
	position:absolute;
	top:180px