js实现点击生成随机div


Posted in Javascript onJanuary 16, 2020

本文实例为大家分享了js实现点击生成随机div的具体代码,供大家参考,具体内容如下

描述:

鼠标点击页面,在哪里点击就在那个位置创建一个div,宽高50,
颜色随机,div在鼠标点击的正中间

效果:

js实现点击生成随机div

实现:

js:

var Method=(function () {
  return {
    EVENT_ID:"event_id",
    loadImage:function (arr) {
      var img=new Image();
      img.arr=arr;
      img.list=[];
      img.num=0;
//      如果DOM对象下的事件侦听没有被删除掉,将会常驻堆中
//      一旦触发了这个事件需要的条件,就会继续执行事件函数
      img.addEventListener("load",this.loadHandler);
      img.self=this;
      img.src=arr[img.num];
    },
    loadHandler:function (e) {
      this.list.push(this.cloneNode(false));
      this.num++;
      if(this.num>this.arr.length-1){
        this.removeEventListener("load",this.self.loadHandler);
        var evt=new Event(Method.EVENT_ID);
        evt.list=this.list;
        document.dispatchEvent(evt);
        return;
      }
      this.src=this.arr[this.num];
    },
    $c:function (type,parent,style) {
      var elem=document.createElement(type);
      if(parent) parent.appendChild(elem);
      for(var key in style){
        elem.style[key]=style[key];
      }
      return elem;
    },
    divColor: function () {
      var col="#";//这个字符串第一位为# 颜色的格式
      for(var i=0;i<6;i++){
        col+=parseInt(Math.random()*16).toString(16);//rondom*16后的随机值即为0-1*16==0-16;  toString(16)为转化为16进制
      }
      return col;//最后返回一个七位的值 格式即为#nnnnnn 颜色的格式
    },
    random:function (min,max) {
      max=Math.max(min,max);
      min=Math.min(min,max);
      return Math.floor(Math.random()*(max-min)+min);
    },
    dragElem:function (elem) {
      elem.addEventListener("mousedown",this.mouseDragHandler);
      elem.self=this;
    },
    removeDrag:function (elem) {
      elem.removeEventListener("mousedown",this.mouseDragHandler);
    },
    mouseDragHandler:function (e) {
      if(e.type==="mousedown"){
        e.stopPropagation();
        e.preventDefault();
        document.point={x:e.offsetX,y:e.offsetY};
        document.elem=this;
        this.addEventListener("mouseup",this.self.mouseDragHandler);
        document.addEventListener("mousemove",this.self.mouseDragHandler);
      }else if(e.type==="mousemove"){
        this.elem.style.left=e.x-this.point.x+"px";
        this.elem.style.top=e.y-this.point.y+"px";
      }else if(e.type==="mouseup"){
        this.removeEventListener("mouseup",this.self.mouseDragHandler);
        document.removeEventListener("mousemove",this.self.mouseDragHandler);
      }
    }
  }
})();

html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<script src="js/Method.js"></script>
<body>
  <script>
    init();
    function init() {
      document.addEventListener("mousedown",mouseHandler);
    }
 
    function mouseHandler(e) {
      var randomDiv=Method.$c("div",document.body,{
        width: "50px",
        height: "50px",
        position: "absolute",
        backgroundColor:divColor()
      })
      randomDiv.style.left=e.clientX-randomDiv.offsetWidth/2+"px";
      randomDiv.style.top=e.clientY-randomDiv.offsetHeight/2+"px";
/*      top:e.clientY-this.offsetHeight/2+"px",//原因 设置为了X...xbl
//      removeEventListener(randomDiv);*/
    }
 
    function divColor() {
      var col="#";//这个字符串第一位为# 颜色的格式
      for(var i=0;i<6;i++){
        col+=parseInt(Math.random()*16).toString(16);//rondom*16后的随机值即为0-1*16==0-16;  toString(16)为转化为16进制
      }
      return col;//最后返回一个七位的值 格式即为#nnnnnn 颜色的格式
    }
  </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
有趣的JavaScript数组长度问题代码说明
Jan 20 Javascript
基于jquery的一个拖拽到指定区域内的效果
Sep 21 Javascript
jquery中ajax学习笔记一
Oct 16 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
Nov 07 Javascript
JavaScript中Date对象的常用方法示例
Oct 24 Javascript
基于Javascript实现的不重复ID的生成器
Dec 25 Javascript
JS中的作用域链
Mar 01 Javascript
ReactNative Image组件使用详解
Aug 07 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
Sep 28 Javascript
解决LayUI数据表格复选框不居中显示的问题
Sep 25 Javascript
Vue如何获取数据列表展示
Dec 11 Javascript
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
Jan 16 #Javascript
JS实现可视化音频效果的实例代码
Jan 16 #Javascript
js实现div色块碰撞
Jan 16 #Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
Jan 16 #Javascript
vue列表数据发生变化指令没有更新问题及解决方法
Jan 16 #Javascript
使用Karma做vue组件单元测试的实现
Jan 16 #Javascript
js实现div色块拖动录制
Jan 16 #Javascript
You might like
帖几个PHP的无限分类实现想法~
2007/01/02 PHP
php download.php实现代码 跳转到下载文件(response.redirect)
2009/08/26 PHP
Yii2中使用asset压缩js,css文件的方法
2016/11/24 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
JavaScript 拖拉缩放效果
2008/12/10 Javascript
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
Jquery实战_读书笔记2 选择器
2010/01/22 Javascript
jquery CSS选择器笔记
2010/03/29 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
2014/02/24 Javascript
JS、DOM和JQuery之间的关系示例分析
2014/04/09 Javascript
兼容主流浏览器的JS复制内容到剪贴板
2014/12/12 Javascript
详解JavaScript对象和数组
2015/12/03 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
EasyUI学习之Combobox下拉列表(1)
2016/12/29 Javascript
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
JS常见构造模式实例对比分析
2018/08/27 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
小程序实现录音功能
2020/09/22 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
python操作 hbase 数据的方法
2016/12/18 Python
定制FileField中的上传文件名称实例
2017/08/23 Python
Python3安装Scrapy的方法步骤
2017/11/23 Python
对Python3.6 IDLE常用快捷键介绍
2018/07/16 Python
Django choices下拉列表绑定实例
2020/03/13 Python
基于Python实现下载网易音乐代码实例
2020/08/10 Python
html5 学习简单的拾色器
2010/09/03 HTML / CSS
美国职棒大联盟的官方手套、球和头盔:Rawlings
2020/02/15 全球购物
2014年庆元旦活动方案
2014/02/15 职场文书
3分钟演讲稿
2014/04/30 职场文书
旅游专业毕业生自荐书
2014/06/30 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
react如何快速设置文件路径别名
2021/04/28 Javascript
小程序wx.getUserProfile接口的具体使用
2021/06/02 Javascript