更好地实现这段代码的效果的写法

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
	#container div{
		width: 50px;
		height: 50px;
		background-color: red;
		position: absolute;
		top: 40px;
		left: 0px;
		margin-right: 10px;
	}
	#container .on{
		background-color: yellow;
		
	}
</style>
<script>
window.onload = function () {
	
	var btn1 = document.getElementsByTagName('button')[0];
	var container = document.getElementById('container');
	var box = container.getElementsByTagName('div');
	var str = '';
	for (var i = 0; i < 10; i++) {
		str += '<div></div>';
	};
	container.innerHTML = str;

	for (var i = 0; i < box.length; i++) {
		box[i].style.left = 80*i + 'px';
	}

	btn1.onclick = go;

	var num = 0;
	function go() {
		//if (num < 10) {
			clearInterval(box.timer);
			box.timer = setInterval( function () {
				for (var i = 0; i < box.length; i++) {
					box[i].className = '';
				};
				box[num].className = 'on';
				num++;

				if (num >= 10) {
					clearInterval(box.timer);
					num = 0;
					num1 = 9;
					go1();
				};
				//box[num-1].className = 'on';
				//num %= box.length;//循环

			}, 100);
		//}
		
	};
	//var num1 = 9;
	function go1() {
		if (num1 >= 0) {
			clearInterval(box.timer);
			box.timer = setInterval( function () {
				for (var i = 0; i < box.length; i++) {
					box[i].className = '';
				};
				box[num1].className = 'on';
				num1--;

				if (num1 == -1) {
					clearInterval(box.timer);
					//num1 = 9;
				};
			}, 100);
		}
		
	};
};
</script>

</head>

<body>
<button>go</button>
<div id="container"></div>
</body>
</html>

觉得这么写很麻烦，求更简单的实现法子

啊啊啊啊123

浏览 1502回答 1

1回答

随时随地看视频慕课网APP

更好地实现这段代码的效果的 写法

1回答

更好地实现这段代码的效果的写法