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


Posted in Javascript onJanuary 30, 2019

本文实例讲述了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>3water.com 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.3water.com/code/HtmlJsRun测试上述代码,可得如下运行效果:

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

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

Javascript 相关文章推荐
Array.prototype.slice 使用扩展
Jun 09 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
Dec 09 Javascript
javascript小数四舍五入多种方法实现
Dec 23 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
Jan 30 Javascript
利用毫秒减值计算时长的js代码
Sep 22 Javascript
jquery选择器之内容过滤选择器详解
Jan 27 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
Jul 18 Javascript
javascript的函数作用域
Nov 12 Javascript
浅谈JavaScript实现面向对象中的类
Dec 09 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
Mar 13 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
May 21 Javascript
Vue打包后访问静态资源路径问题
Nov 08 Javascript
JS实现的新闻列表自动滚动效果示例
Jan 30 #Javascript
谈谈为什么你的 JavaScript 代码如此冗长
Jan 30 #Javascript
JS实现头条新闻的经典轮播图效果示例
Jan 30 #Javascript
AJAX在JQuery中的应用详解
Jan 30 #jQuery
JS实现换肤功能的方法实例详解
Jan 30 #Javascript
js实现ATM机存取款功能
Oct 27 #Javascript
详解基于electron制作一个node压缩图片的桌面应用
Jan 29 #Javascript
You might like
PHP的面试题集
2006/11/19 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
用js做一个小游戏平台 (一)
2009/12/29 Javascript
javascript之学会吝啬 精简代码
2010/04/25 Javascript
jQuery UI 应用不同Theme的办法
2010/09/12 Javascript
jquery 卷帘效果实现代码(不同方向)
2013/02/05 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
2013/02/25 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
2014/06/24 Javascript
JavaScript中获取样式的原生方法小结
2014/10/08 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
JavaScipt选取文档元素的方法(推荐)
2016/08/05 Javascript
js接收并转化Java中的数组对象的方法
2016/08/11 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
浅谈jquery中使用canvas的问题
2016/10/10 Javascript
详解Vue整合axios的实例代码
2017/06/21 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
js实现简单的随机点名器
2020/09/17 Javascript
Python中关于字符串对象的一些基础知识
2015/04/08 Python
Python实现包含min函数的栈
2016/04/29 Python
Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例
2018/01/15 Python
python实现得到当前登录用户信息的方法
2019/06/21 Python
Django视图、传参和forms验证操作
2020/07/15 Python
英国顶级水晶珠宝零售商之一:Tresor Paris
2019/04/27 全球购物
Wolford法国官网:奥地利奢侈内衣品牌
2020/08/11 全球购物
俄罗斯连接商品和买家的在线平台:goods.ru
2020/11/30 全球购物
What is the purpose of Void class? Void类的作用是什么?
2016/10/31 面试题
几个数据库方面的面试题
2016/07/01 面试题
班主任工作经验材料
2014/02/02 职场文书
《恐龙》教学反思
2014/04/27 职场文书
2014年向国旗敬礼活动总结
2014/09/27 职场文书
2016年校园植树节广播稿
2015/12/17 职场文书
详解python的内存分配机制
2021/05/10 Python