今天,我们来学习如何制作一个简单的时间表吧!
一.首先是布局,我们可以通过设置CSS来对时间表进行设定内容、布局。
在外部设置一个div标签将其他标签包裹起来,就等于是将需要的东西都放进盒子里面。在这里,div标签中放置了span标签(由于span标签是行内标签,因此我们可以在其后面放一个换行标签)和button(按钮)标签。
并且,为了让其好看些许,我们可通过类选择器来选择到需要设置样式的标签进行操作。而这里,我们只需设置div标签的CSS样式即可。
text-alian属性设置的是水平居中,line-height则是内容的行高距离。
然后将写好的代码在浏览器中打开,便可得到下图:
如此,我们的布局便算是完成啦!
二.布局完成之后,就让我们一起来实现它的功能吧!
1.声明变量,获取到HTML中的标签;
2.在onload事件中创建函数、创建日期对象,获取年、月、日、时、分、秒;
3.考虑到0-9是个位数的情况,因此,需要在其前面加上“0”;
4.由于是设置了两个button标签,因此我们还需要为其添加点击事件,
并且在点击事件中为“开始”设置定时器、为“停止”设置停止时间表的功能且添加返回值。
5.点击“开始按钮”之后会执行JS的功能,所以还需要将span标签中的文本用JS重写。可以在“showTime”中写入代码
然后,在浏览器中打开写好的代码,移动鼠标点击“开始”按钮,时间表显示当前电脑时间,再点击“停止”按钮则会停止。
到这里,一个简单的时间表功能便完成了!
Ps:初来乍到,请多多指教,大神勿喷