JS实现点击按钮随机生成可拖动的不同颜色块示例

本文实例讲述了射流研究…实现点击按钮随机生成可拖动的不同颜色块。分享给大家供大家参考，具体如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title www .JB 51。net JS点击生成随机颜色块/title style type=' text/CSS ' div { width : 100 px；高度： 100像素；背景-颜色：红色；绝对位置：左边距left: 10px向左浮动：}/style/headbody id='body1 '按钮onclick='btn()'创建div/buttonscript函数BTN(){ var id；//动态创建元素var str=文档。创建元素(' div ')；//元素的背景色随机的字符串。风格。背景色=GetColorRandom()；//将生成的差异追加到身体中document.getElementById('body1 ').appendChild(字符串);//随机生成的编号设置为动态创建的差异的id字符串。id=' items ' Parseint(Math。random()* 10000)；//获取动态生成的差异的id var obj=文档。getelementbyid(str。id)；var DIsX=0；var DIsy=0；//鼠标点击落下事件物体。onmousedown=函数(事件){ DIsX=事件。客户端x-obj。offsetleftdisY=事件。客户-对象。偏移；//鼠标移开事件文件。onmousemove=function(ev){ obj。风格。左=ev。client x-DIsX ' px '；物体。风格。top=ev。client y-DIsy ' px '；} //鼠标松开事件文件。onmouseup=function(){ document。onmousemove=nulldocument.onmouseup=null} } //生成随机颜色函数getcolorandom(){ var c=' # '；var cArray=['0 '，' 1 '，' 2 '，' 3 '，' 4 '，' 5 '，' 6 '，' 7 '，' 8 '，' 9 '，' A '，' B '，' C '，' D '，' E '，' F ']；for(var I=0；i6；I){ var cIndex=数学。圆(数学。random()* 15)；c=Carray[CinDex]；}返回c .} }/脚本/正文/html这里使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试上述代码，可得如下运行效果：

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript页面元素操作技巧总结》 、 《JavaScript操作DOM技巧总结》 、 《JavaScript切换特效与技巧总结》 、 《JavaScript动画特效与技巧汇总》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。