原生js进度条动画

Html

Css

0%

.up {
	width:300px;
	height:30px;
	line-height:30px;
	border:1px solid #ccc;
}
.content {
	width:0px;
	text-align:center;
	background:red;
}
.button {
	margin-top:10px;
}
.down {
	width:150px;
	height:150px;
	margin-left:30%;
	margin-top:10%;
	border:1px solid #ccc;
	visibility:hidden;
}
.active {
	visibility:visible;
}

window.onload = function() {
    //获取dom对象
    var content = document.getElementsByClassName('content');
    content = content[0];
    var up = document.getElementById('strat');
    console.log(document.getElementsByTagName('button'));

var stop = document.getElementById('stop');
    var go; //设置定时的名字
    var flag = true; //用于判断是否点击了按钮
    var down = document.getElementsByClassName('down')[0];
    up.onclick = function() {
        if (flag) {
            //如果点击了就改为false
            flag = false;
            go = setInterval(function() {
                if (content.offsetWidth < 298) {
                    content.style.width = content.offsetWidth + 3 + 'px';

content.innerHTML = parseInt(content.offsetWidth / 3) + '%';
                } else {
                    content.style.backgroundColor = 'green';
                    setTimeout(function() {

content.innerHTML = '加载完成';

clearInterval(go);
                    }, 100);
                }

}, 100)
        }
    }
    stop.onclick = function() {
        flag = true;
        clearInterval(go);
    }

}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

原生js进度条动画



代码描述：进度条动画可以开始停止

注释详细,可自行阅读

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

??

相关代码

原生js进度条动画

最新