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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.jb51.net JS点击生成随机颜色块</title>
<style type="text/css">
div{
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  margin-left: 10px;
  float: left;
}
</style>
</head>
<body id="body1">
<button onclick="btn()">创建div</button>
<script>
  function btn(){
    var id;
    //动态创建元素
    var str=document.createElement("div");
    //元素的背景色随机的
    str.style.backgroundColor=getColorRandom();
    //将生成的div追加到body中
    document.getElementById("body1").appendChild(str);
    //随机生成的id设置为动态创建的div的id
    str.id="items"+parseInt(Math.random()*10000);
    // 获取动态生成的div的id
    var obj=document.getElementById(str.id);
    var disX=0;
    var disY=0;
    //鼠标点击落下事件
    obj.onmousedown=function (event){
      disX=event.clientX-obj.offsetLeft;
      disY=event.clientY-obj.offsetTop;
      //鼠标移开事件
      document.onmousemove=function(ev){
        obj.style.left=ev.clientX-disX+"px";
        obj.style.top=ev.clientY-disY+"px";
      }
      //鼠标松开事件
      document.onmouseup= function () {
        document.onmousemove=null;
        document.onmouseup=null;
      }
    }
    //生成随机颜色
    function getColorRandom(){
      var c="#";
      var cArray=["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"];
      for(var i=0;i<6;i++){
       var cIndex= Math.round(Math.random()*15);
        c+=cArray[cIndex];
      }
      return c;
    }
  }
</script>
</body>
</html>

这里使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码，可得如下运行效果：

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

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • js随机颜色代码的多种实现方式

    JS随机颜色有很多地方要用到:比如大家看到很多标签连接都是五颜六色.那就需要到这个了.下面开始: 方法思路总共有二.一是准备一组漂亮的候选颜色,二是随机生成颜色. 实现1 复制代码 代码如下: var getRandomColor = function(){ return  '#' +        (function(color){        return (color +=  '0123456789abcdef'[Math.floor(Math.random()*16)])       

  • js获取随机颜色值的函数

    收集一个函数:获取随机颜色值 复制代码 代码如下: function getRandomColor(){ return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6); } 说明: 1.16777215为16进制的颜色ffffff转成10进制的数字 2.>>数字取整 3.转成16进制不足6位的以0来补充 在线演示代码: js随机颜色 document

  • JavaScript随机生成颜色的方法

    废话不多说了直接给大家贴js代码了,具体代码如下所述: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <button id="btn1">调用第一种</button> <button

  • JS实现随机颜色的3种方法与颜色格式的转化

    前言 相信大家都知道在前端的颜色表示方式有多种,一种是以3个或6个十六进制的数子表示,一种是RGB的数字形式,还有一种是直接以颜色的英文来表示.这三种都是不支持透明色的.所以还有RGBA的表式方式,在RGB的的基础上加入了Alpha透明,使网页可以展现更加复杂绚丽的效果. 随机颜色 在平时的码农日常中,经常会用到求随机颜色的地方,下面是我总结的几种简单的实现随机颜色的方式: 十六进制格式(#000000-#FFFFFF) 第一种是比较简单的方法,这种方法是先随机生成ffffff以内16进制数,然

  • js生成随机颜色方法代码分享（三种）

    话不多说,请看代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <button id="btn1">调用第一种</button> <button id="bnt2&quo

  • JavaScript实现简单生成随机颜色的方法

    JavaScript实现简单生成随机颜色的方法

    本文实例讲述了JavaScript实现简单生成随机颜色的方法.分享给大家供大家参考,具体如下: 如果要做出如下效果,每次刷新网页则产生一种颜色 其实非常简单,产生随机颜色的根本核心就是随机构造出一个六位数,JavaScript的随机数的问题 而且这个六位数的每一个数位0~f之内,因此就有了如下的方法: 1.首先是一个HTML布局,p标签是是用来放当前颜色的,div的背景颜色就是这个颜色 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN&quo

  • js随机生成网页背景颜色的方法

    本文实例讲述了js随机生成网页背景颜色的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <HTML> <HEAD> <TITLE>随机生成网页背景颜色的JS特效</TITLE> <STYLE> .30pt{font-size:30pt;color:#de3076} </STYLE> <SCRIPT LANGUAGE="JavaScript"> <!-- color=new A

  • js从10种颜色中随机取色实现每次取出不同的颜色

    昨天在做js 从10种颜色中随机取色,并每次取出的颜色不同的时候,考虑了很多,最终用如下来实现: 复制代码 代码如下: var colorList = ["#FFFF99","#B5FF91","#94DBFF","#FFBAFF","#FFBD9D","#C7A3ED","#CC9898","#8AC007","#CCC007"

  • 基于JavaScript实现拖动滑块效果

    基于JavaScript实现拖动滑块效果

    本文实例为大家分享了js拖动滑块效果的具体代码,供大家参考,具体内容如下 效果: 代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content=&q

  • js网页中随意拖动的小方块实现代码

    function divBlock_event_mousedown(e){ var e, obj, temp; obj=document.getElementById("divBlock"); e=window.event?window.event:e; obj.startX=e.clientX-obj.offsetLeft; obj.startY=e.clientY-obj.offsetTop; document.onmousemove=document_event_mousemov

  • javascript生成随机颜色示例代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

随机推荐