[第六季]9.定时器与进度条案例_vs定时器进度条-优快云博客

本文介绍了一个简单的进度条动画实现过程，包括使用HTML创建结构、CSS进行样式设计以及JavaScript编写动态更新宽度的函数。通过定时器控制进度条的推进速度，并在达到最大宽度时停止动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

4.复习笔记(这个就是课后习题以及课程所呈现的需求)

①编辑外框和内框,外框设置边框,里面设计进度条.
②设计进度条增加的函数show,然后写好调用时间和关闭时间的函数start(),stop()
③最后设置打印进度条,查看两个宽度属性的区别.

5.自测代码

2.课堂笔记

(1)编辑两个div并设置格式
(2)外面那个边框是固定,黑色,1个像素宽度,背景色为白色.
宽度为1004像素,高度为54像素.离上面的距离为100px.
其实说白了也就是一个黑色的长条边框.
(3)里面的设置为背景色为红色,宽度为0,高度为50像素,离

左边和上面的宽度均为2个像素.

body设置
<body>
<div id="outer">
<div id="inner">

</div>
</div>

</body>

style设置
<style type="text/css">
#outer
{
    border:solid black 1px;
    background-color::white;
    width:1004px;
    height:54px;
    margin-top:100px;
}


#inner
{
    background-color:red;
    width:0px;
    height:50px;
    margin-left:2px;
    margin-top:2px;

}
</style>
(2)写好会改变宽度的函数
<script language="javascript">
function show()
{
    if(document.getElementById

("inner").offsetWidth<1000)
    {
        document.getElementById

("inner").style.width=
        document.getElementById

("inner").style.width+50+"px";
    }
    else
    {
        document.getElementById

("inner").style.width=1000+"px";
    }
}

</script>

(3)定时器调用,并修改时间
var timmer;
function start()
{
    timmer=window.setInterval(show,200);
}

function stop()
{
    window.clearInterval(timmer);
}
</script>
(4)打印进度条的长度
function show()
{
    if(document.getElementById

("inner").offsetWidth<1000)
    {
        document.getElementById

("inner").style.width=
        document.getElementById

("inner").offsetWidth+50+"px";
        console.log

(document.getElementById("inner").offsetWidth);
        console.log

(document.getElementById("inner").style.width);
    }
    else
    {
        document.getElementById

("inner").style.width=1000+"px";
        stop();
    }
}