该代码示例展示了如何通过JavaScript实现点击HTML页面时在点击位置生成大小和颜色随机的正方形。通过绑定点击事件，获取鼠标坐标，创建div元素并设置绝对定位，随机生成大小和RGB颜色，最后将div添加到页面中。调试和自我总结是提升编程技能的关键。
需求：点击屏幕会产生大小不一颜色不一的正方形小块
思路：
给文档绑定点击事件（onclick）
获取鼠标点击的位置 （clientX，clientY）
在页面生成div （document.createElement('div')）
给div设置定位 （position：absolute left top ）
随机出大小（div.style.width，div.style.height）
随机出颜色（div.style.background 下面有随机颜色函数）
追加到页面中（appendchild）
随机数的生成（数学函数）
函数随机颜色（RGB）
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 绑定事件
document.οnclick=function(eve){
// 获取鼠标位置
var cx=eve.clientX;
var cy=eve.clientY;
// 生成div
var div =document.createElement('div')
// 设置定位
div.style.position= 'absolute';
div.style.left=cx+ 'px'
div.style.top=cy+ 'px';
// 随机出大小
var tmpWH=rand(80,120);
div.style.width=tmpWH+"px";
div.style.height=tmpWH+"px";
// 随机出颜色
div.style.background=getColor();
// 追加到页面
document.body.appendChild(div)
}
// 随机数生成
function rand(min,max){
return Math.round(Math.random()*(max -min)+min)
}
// 随机颜色
function getColor(){
return`RGB(${rand(0,255)},${rand(0,255)},${rand(0,255)})`
}
</script>
</body>
</html>
总结
其实这个程序并不难，而且写法有很多种，比如在随机出颜色的函数那不仅仅能用RGB还能用16进制来产生随机颜色，还有在随机出大大小，他们的前缀都是div.style XXX，其实也可以写到一块。
写代码先明白需求，再理清思路，然后写下自己的思路并一步一步实现
难免会有bug，其实找bug是一件幸福的事情，就是在bug中不断成长的，学会调式，确定bug类型和范围，对症下药！
写完代码，学会自我总结，找出不足并弥补，巩固基础知识点
寄语
愿我们在代码的道路上越走越宽，越走越远。也欢迎大家来批评指正哟，加油！！！！！加油！！！！！
扫一扫
1273
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
