请分析这段代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button id="but">点击</button> <div id="div1"></div> <script> init(); function init(){ var div1=document.getElementById("div1"); but.onclick=clickHeadler; } function clickHeadler(){ var size=random(101.20); var color="#"; for(i=0;i<6;i++){ color+=parseInt(random(16)).toString(16); } var str="<div style='"; str+="width:"+size+"px;"; str+="height:"+size+"px;"; str+="background:"+color+";"; str+="position:absolute;" str+="left:"+random(1000)+"px;"; str+="top:"+random(1000)+"px;"; str+="'>"+"</div>"; div1.innerHTML+=(str); } function random(a,b){ if(b===undefined) b=0; return parseInt(Math.random()*(a-b)+b); } </script> </body> </html>
时间: 2024-03-09 19:44:24 浏览: 19
这段代码实现了一个随机生成彩色方块的功能,点击按钮时会在指定范围内随机生成不同颜色、大小、位置的方块,并添加到页面上。
代码分析:
1. HTML 部分:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="but">点击</button>
<div id="div1"></div>
<script>
// ...
</script>
</body>
</html>
```
这段 HTML 代码包含一个按钮和一个空的 div 容器,用于显示生成的方块。
2. JavaScript 部分:
```javascript
function init() {
var div1 = document.getElementById("div1");
but.onclick = clickHeadler;
}
function clickHeadler() {
var size = random(101.20);
var color = "#";
for (i = 0; i < 6; i++) {
color += parseInt(random(16)).toString(16);
}
var str = "<div style='";
str += "width:" + size + "px;";
str += "height:" + size + "px;";
str += "background:" + color + ";";
str += "position:absolute;"
str += "left:" + random(1000) + "px;";
str += "top:" + random(1000) + "px;";
str += "'>" + "</div>";
div1.innerHTML += (str);
}
function random(a, b) {
if (b === undefined) b = 0;
return parseInt(Math.random() * (a - b) + b);
}
init();
```
这段 JavaScript 代码分为三部分:
- `init()` 函数:用于初始化页面,获取 div 容器的元素并为按钮添加点击事件。
- `clickHeadler()` 函数:为按钮点击事件的回调函数,随机生成方块的大小、颜色和位置,并将其添加到 div 容器中。
- `random()` 函数:用于生成指定范围内的随机整数。
在 `clickHeadler()` 函数中,通过随机生成方块的大小、颜色和位置等样式,将其拼接成一个字符串,并通过 div 容器的 innerHTML 属性将该字符串添加到 div 容器中,从而实现在指定范围内随机生成方块的功能。
需要注意的是,生成的方块是绝对定位的,因此需要在 CSS 样式中设置 div 容器的 position 属性为 relative 或 absolute。