51Testing软件测试论坛

 找回密码
 (注-册)加入51Testing

QQ登录

只需一步,快速开始

微信登录,快人一步

查看: 1144|回复: 1

我写的这段html不知道哪里出现了问题

[复制链接]

该用户从未签到

发表于 2018-11-28 13:19:04 | 显示全部楼层 |阅读模式
本帖最后由 gyz644 于 2018-11-28 13:20 编辑

需求:点击下载按钮,进度条会在2s时前进至50%,4s时前进至70%,6s时前进至100%
我写的这段html不知道哪里出现了问题,点击下载按钮,进度条没有前进,请老师指点一下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function changetime(){
var t1=setTimeout("document.getElementById("1").value='50'",2000);
var t2=setTimeout("document.getElementById("1").value='70'",4000);
var t3=setTimeout("document.getElementById("1").value='100'",6000);
}
</script>

</head>
<body>
<form>
<progress value="25" max="100" id="1"></progress>
<button>下载</button>
</form>

</body>
</html>


在学课程:
Web前端必备HTML5教程

回复

使用道具 举报

该用户从未签到

发表于 2018-11-28 14:23:22 | 显示全部楼层
<!DOCTYPE html>

<html>

    <head>
        <meta charset="UTF-8">
        <title>Insert title here</title>
        <script>
            function changetime(e){   
                e.preventDefault();

                var t1=setTimeout(
                    function(){
                                    document.getElementById("1").value = "50";
                                },2000);

                var t2=setTimeout(
                    function(){
                                       document.getElementById("1").value = "70";
                                },4000);

                var t3=setTimeout(
                    function(){
                                    document.getElementById("1").value = "100";
                                },6000);
            }
        </script>
    </head>
    <body>
        <form>
            <progress value="25" max="100" id="1"></progress>
            <button onclick="changetime(event)">下载</button>
        </form>
    </body>
</html>
同学你好,编辑时需要注意HTML5本身的缩进结构;

另外document.getElementById("1").value = "70" 需要以一个方法function的形式来获取返回值,而非直接作为参数;

另外此处e.preventDefault()表示默认表单是不被提交的

回复 支持 反对

使用道具 举报

本版积分规则

关闭

站长推荐上一条 /1 下一条

小黑屋|手机版|Archiver|51Testing软件测试网 ( 沪ICP备05003035号 关于我们

GMT+8, 2024-3-29 04:59 , Processed in 0.062048 second(s), 23 queries .

Powered by Discuz! X3.2

© 2001-2024 Comsenz Inc.

快速回复 返回顶部 返回列表