简单的颜色过度条
简单的颜色过度条
开发工具与关键技术：JavaScript
作者：陈希雄
撰写时间：2019/4/4
用JavaScript做一个简单的颜色渐变的过度条，直接看代码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>ysk</title>
</head>
<body>
<h1>简单的颜色过度条</h1>
<div id="div1">
</div>
<script>
for (var i = 10; i < 10000; i++) {
var s = document.createElement("div");//创建div标签
if (i<10)
{
s.style = "background-color:#00" + i + ";width:50px;height:50px;display:inline-block";
} else if (i >= 10 && i < 100) {
s.style = "background-color:#0" + i + ";width:50px;height:50px;display:inline-block";
} else {
s.style = "background-color:#" + i + ";width:50px;height:50px;display:inline-block";
}
if (i % 10 == 0) //获取十的倍数，再换行
{
var s1 = document.createElement("br");
document.getElementById("div1").appendChild(s1);
} else {
document.getElementById("div1").appendChild(s);
}
}
</script>
</body>
</html>
效果图