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 相关文章推荐
js parseInt(&quot;08&quot;)未指定进位制问题
Jun 19 Javascript
js模拟滚动条(横向竖向)
Feb 22 Javascript
js去除空格的12种实用方法
Nov 08 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
Apr 14 Javascript
jQuery增加、删除及修改select option的方法
Aug 19 Javascript
浅谈js键盘事件全面控制
Dec 01 Javascript
javascript按顺序加载运行js方法
Dec 01 Javascript
js断点调试经验分享
Dec 08 Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
优雅的在React项目中使用Redux的方法
Nov 10 Javascript
vue给对象动态添加属性和值的实例
Sep 09 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详细彻底学习Smarty
2008/03/27 PHP
php 定界符格式引起的错误
2011/05/24 PHP
PHP 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
解析PHP中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
php实现memcache缓存示例讲解
2013/12/04 PHP
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
javascript 处理事件绑定的一些兼容写法
2009/12/24 Javascript
使用SyntaxHighlighter实现HTML高亮显示代码的方法
2010/02/04 Javascript
突发奇想的一个jquery插件
2010/11/19 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
jquery操作select取值赋值与设置选中实例
2017/02/28 Javascript
React入门教程之Hello World以及环境搭建详解
2017/07/11 Javascript
详解mpvue开发小程序小总结
2018/07/25 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
json 带斜杠时如何解析的实现
2019/08/12 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
2020/09/05 Javascript
vue 动态创建组件的两种方法
2020/12/31 Vue.js
CentOS6.5设置Django开发环境
2016/10/13 Python
Python如何快速实现分布式任务
2017/07/06 Python
Python连接Redis的基本配置方法
2018/09/13 Python
对python当中不在本路径的py文件的引用详解
2018/12/15 Python
wxPython实现列表增删改查功能
2019/11/19 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
大学生的网络创业计划书
2013/12/26 职场文书
中国央视网签名寄语
2014/01/18 职场文书
会计工作决心书
2014/03/11 职场文书
答辩状格式范本
2015/05/22 职场文书
企业财务管理制度范本
2015/08/04 职场文书
观看禁毒宣传片后的感想
2015/08/11 职场文书
2019广播稿怎么写
2019/04/17 职场文书
left join、inner join、right join的区别
2021/04/05 MySQL
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang