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 动态参数判空操作
Dec 22 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
Sep 11 Javascript
jquery操作select元素和option的实例代码
Feb 03 Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 Javascript
jQuery实现联动下拉列表查询框
Jan 04 Javascript
用jQuery实现圆点图片轮播效果
Mar 19 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
Sep 11 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
Feb 09 Javascript
js控制随机数生成概率代码实例
Mar 21 Javascript
vue实现节点增删改功能
Sep 26 Javascript
JS实现电脑虚拟键盘打字测试
Jun 24 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
PHP设计模式之模板模式定义与用法详解
2018/12/20 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
2009/04/10 Javascript
Javascript 圆角div的实现代码
2009/10/15 Javascript
子页向父页传值示例
2013/11/27 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
jQuery实现图片文字淡入淡出效果
2015/12/21 Javascript
nodeJs爬虫获取数据简单实现代码
2016/03/29 NodeJs
js添加绑定事件的方法
2016/05/15 Javascript
JavaScript组合模式学习要点
2016/08/26 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
Bootstrap3下拉菜单的实现
2017/02/22 Javascript
fetch 使用及如何接收JS传值
2017/11/11 Javascript
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
vue props 单项数据流实例分享
2020/02/16 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
Python单链表的简单实现方法
2014/09/23 Python
Python 专题五 列表基础知识(二维list排序、获取下标和处理txt文本实例)
2017/03/20 Python
浅谈Python基础之I/O模型
2017/05/11 Python
python构建深度神经网络(续)
2018/03/10 Python
python实现俄罗斯方块
2018/06/26 Python
Python 爬虫之Beautiful Soup模块使用指南
2018/07/05 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
Python使用jupyter notebook查看ipynb文件过程解析
2020/06/02 Python
美国最流行的男士时尚网站:Touch of Modern
2018/02/05 全球购物
AJAX的全称是什么
2012/11/06 面试题
节能环保演讲稿
2014/08/28 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
招商银行工作证明
2015/06/17 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书
Python基础知识之变量的详解
2021/04/14 Python
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers