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 相关文章推荐
用js实现的抽象CSS圆角效果!!
May 03 Javascript
TopList标签和JavaScript结合两例
Aug 12 Javascript
jquery遍历input取得input的name
Apr 27 Javascript
利用javascript实现一些常用软件的下载导航
Aug 03 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
Nov 01 Javascript
基于jquery实现智能表单验证操作
May 09 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 Javascript
JS非行间样式获取函数的实例代码
Jun 05 Javascript
jQuery表单选择器用法详解
Aug 22 jQuery
Javascript数组及类数组相关原理详解
Oct 29 Javascript
一百多行代码实现react拖拽hooks
Mar 23 Javascript
JavaScript实现酷炫的鼠标拖尾特效
Feb 18 Javascript
关于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
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
使用PHP实现二分查找算法代码分享
2011/06/24 PHP
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
yii框架配置默认controller和action示例
2014/04/30 PHP
PHP安装threads多线程扩展基础教程
2015/11/17 PHP
php版微信自动获取收货地址api用法示例
2016/09/22 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
取得传值的函数
2006/10/27 Javascript
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
2014/12/20 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
JavaScript正则表达式之multiline属性的应用
2015/06/16 Javascript
javascript实现禁止复制网页内容汇总
2015/12/30 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
2016/02/27 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
js实现加载更多功能实例
2016/10/27 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
vue 2.0 购物车小球抛物线的示例代码
2018/02/01 Javascript
微信小程序实现自定义modal弹窗封装的方法
2018/06/15 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
微信小程序实现滚动加载更多的代码
2019/12/06 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
对Python中内置异常层次结构详解
2018/10/18 Python
浅析python的优势和不足之处
2018/11/20 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
小学生演讲稿
2014/01/12 职场文书
《云雀的心愿》教学反思
2014/02/25 职场文书
个人作风建设心得体会
2014/10/22 职场文书
自荐信模板大全
2015/03/27 职场文书
MySQL系列之十一 日志记录
2021/07/02 MySQL
python中redis包操作数据库的教程
2022/04/19 Python