1首先我们还是要养成好习惯,先创建一个属于这个案列的专属文件夹,然后取名为该案列名字,里面再创建属于各个的存放该代码的文件夹
2开始在vs软件操作代码,首先要把HTML框架敲打出来。给它设置一个类class里面设置三个span标签表示时间三个数数字显示,下面给它设置一个无序列表,无序列表里面设置一个span标签一个img标签,给这些标签添加id后面js代码要获取它们属性。
3. 继续给这些框架敲打css样式代码,首先给给页面添加一个背景图片,然后把三个span标签设置样式,还有无序列表里面的span标签和img标签。。
4然后css效果就显示出来了。
5开始进入js代码阶段,先敲打出一个页面加载事件和获取元素。
6然后获取到时间戳和当时时间。
7给start按钮绑定点击事件和添加定时器,这次我们使用的定时器是setInterval间隔性定时器,间隔为1000毫秒调动一次。
8上面获取到效果点击它有可能不是我们理想想要那个展示效果还要添加一个属性。
9.既然添加了定时器那就是要给它复一个值为timer为停止。
10到了这里是有个bug要修复的,就是如果连续点击start按钮,你再想点stop按钮 停止是停不了,因为连续点击它会生成多个start,而你点击stop停止按钮只会停止 最后一个start,这时我们就要添加两个属性给它一个是true,一个是false。
总结一下学到定时器这个功能,可以让我们在关于时间或者动画轮播什么的功能地 方可以有帮助,让我们的代码可以轻松敲打,更加方便。