这个小例子我是用纯Js实现的，这个例子主要用到了random()产生随机数的方法和onmouse等鼠标事件以及获取元素和视口坐标来实现了可以在网页上拖拽的积木效果，可以帮学习javascript的同学一些小小的启发，话不多说，先给大家看效果图：
这个html代码就很简单了，我们写一个按钮来实现点击事件即可：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body id="bg">
<input type="button" value="生成积木" id="drag"/>
</body>
</html>
然后我们来分析一个随机生成网页积木所需的步奏，首先我们要为页面上的这个按钮设置点击事件来让它可以生成随机的小方块:
<script>
document.getElementById("drag").onclick =function (){
var ids = getRandom();
var num1 = getRandom();
var num2 = getRandom();
var num3 = getRandom();
var divs = "<div id=‘"+ids+"‘ style=‘position: absolute;width: 100px;height: 100px;background: rgb("+num1+","+num2+","+num3+");float: left‘></div>" //生成随机颜色的div
document.getElementById("bg").insertAdjacentHTML("beforeEnd",divs);
drag(ids); //调用下面的拖拽函数方法
}
function getRandom(){
return parseInt(Math.random() * 255);
}
</script>
点击事件就已经加上了，然后我们实现可以随意拖拽的积木效果，在这里使用了多个鼠标事件和获取页面以及元素坐标来实现，我在这里是封装了一个函数方法，代码如下：
function drag(id){
var obj = document.getElementById(id);
var disX = 0;
var disY = 0;
obj.onmousedown = function (event){
disX = event.clientX - obj.offsetLeft; //offsetLeft元素相对于父元素的左边距
disY = event.clientY - obj.offsetTop;
document.onmousemove = function (event){
obj.style.left = event.pageX - disX +‘px‘;
obj.style.top = event.pageY - disY +‘px‘;
}
document.onmouseup = function (){
document.onmousemove = null;
document.onmouseup = null;
}
}
return false;
}
好了，一个简单的彩色积木例子就实现了，如果想了解更多关于获取浏览器视口和显示器宽度以及高度的方法请看我的博客，谢谢大家，吃好喝好回见。
时间： 2024-11-05 17:31:00