2021-05-01使用JavaScrip制作一个计时器

最新推荐文章于 2023-07-24 10:37:30 发布

码外狂徒——张三

最新推荐文章于 2023-07-24 10:37:30 发布

阅读量222

点赞数 1

文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_57726512/article/details/116322139

版权

本文介绍了如何使用HTML、CSS和JavaScript制作一个网页计时器。通过HTML布局，CSS设置样式，JavaScript处理标签事件来实现计时功能。文章详细讲解了布局选择、样式设置、JavaScript事件绑定以及计时器的实现逻辑。

摘要由CSDN通过智能技术生成

制作一个网页计时器需要以下的HTMl标签

<div></div>
<button></button>
<span></span>

网页计时器并不难制作，只是其过程较为复杂。首先用HTML标签进行布局。

我们可以用六个span标签来布局也可以直接在span标签中写所有样式，直接在span标签中写所有样式会使HTML页面更加简介，代码运行更加流畅，缺点是会显得比较突兀。一个span标签写一个样式则代码运行速度较慢，代码量较多，好处是可以任意修改其中某一个的样式。

我们用第二种写法，用一个div标签包裹一个span标签，在span标签中填写我们所需的样式。在用另一个div标签包裹button标签，button标签是一个按钮，使用button标签而不使用div标签是因为button标签本身就是一个按钮，不用改变元素，而使用div标签则需要在CSS中去设置他的样式。,基本布局已经完成现在就是修改样式。

（下图为作者所说的两种布局）

<div>
	<span>0000</span>年
	<span>00</span>月
	<span>00</span>日
	<span00</span>:
	<span>00</span>:
	<span>00</span>
	</div>
	<div>
	<button>开始</button>
	<button>暂停</button>
	</div>



<div>
		<span>2021年03月28日 08时00分00秒</span>
	&l