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 相关文章推荐
extjs grid取到数据而不显示的解决
Dec 29 Javascript
IE本地存储userdata的一个bug说明
Jul 01 Javascript
jQuery数据显示插件整合实现代码
Oct 24 Javascript
js原型链原理看图说明
Jul 07 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
Feb 05 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
Jun 01 Javascript
AngularJS基础 ng-submit 指令简单示例
Aug 03 Javascript
jQuery数组处理函数整理
Aug 03 Javascript
vue 动态修改a标签的样式的方法
Jan 18 Javascript
js实现按钮开关单机下拉菜单效果
Nov 22 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 生成唯一id的几种解决方法
2013/03/08 PHP
使用PHP导出Word文档的原理和实例
2013/10/21 PHP
php文件扩展名判断及获取文件扩展名的N种方法
2015/09/12 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
PHP实现QQ快速登录的方法
2016/09/28 PHP
JavaScript 编程引入命名空间的方法
2007/06/29 Javascript
Javascript实现返回上一页面并刷新的小例子
2013/12/11 Javascript
Javascript浅谈之引用类型
2013/12/18 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
2014/04/15 Javascript
简介JavaScript中fixed()方法的使用
2015/06/08 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
JavaScript实现简单的树形菜单效果
2017/06/23 Javascript
如何测量vue应用运行时的性能
2019/06/21 Javascript
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
深入解析Python中的线程同步方法
2016/06/14 Python
Python操作csv文件实例详解
2017/07/31 Python
Python实现求数列和的方法示例
2018/01/12 Python
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
python字典嵌套字典的情况下找到某个key的value详解
2019/07/10 Python
在Django下测试与调试REST API的方法详解
2019/08/29 Python
Python文件操作模拟用户登陆代码实例
2020/06/09 Python
python中format函数如何使用
2020/06/22 Python
详解HTML5表单新增属性
2016/12/21 HTML / CSS
亚瑟士美国官网:ASICS美国
2017/02/01 全球购物
澳大利亚药房在线:ThePharmacy
2017/10/04 全球购物
医学院学生求职简历的自我评价
2013/10/24 职场文书
建筑专业毕业生推荐信
2013/11/21 职场文书
美发店5.1活动方案
2014/01/24 职场文书
土地转让协议书
2014/04/15 职场文书
平安建设汇报材料
2014/12/29 职场文书
学生退学证明
2015/06/23 职场文书
网络研修随笔感言
2015/11/18 职场文书