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+JSP checkBox 全选具体实现
Jan 02 Javascript
js中的如何定位固定层的位置
Jun 15 Javascript
jquery实现图片按比例缩放示例
Jul 01 Javascript
jQuery淡入淡出元素让其效果更为生动
Sep 01 Javascript
js计算德州扑克牌面值的方法
Mar 04 Javascript
AngularJS身份验证的方法
Feb 17 Javascript
基于jQuery的checkbox全选问题分析
Nov 18 Javascript
Express框架之connect-flash详解
May 31 Javascript
jQuery自动或手动图片切换效果
Oct 11 jQuery
Vue项目全局配置页面缓存之按需读取缓存的实现详解
Aug 01 Javascript
layui监听单元格编辑前后交互的例子
Sep 16 Javascript
javascript实现超好看的3D烟花特效
Jan 01 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引用计数器进行垃圾收集机制介绍
2012/09/19 PHP
php中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
php打印一个边长为N的实心和空心菱型的方法
2015/03/02 PHP
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
实例讲解PHP中使用命名空间
2019/01/27 PHP
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
JS判断客户端是手机还是PC的2个代码
2014/04/12 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
JavaScript String 对象常用方法总结
2016/04/28 Javascript
Angular实现下载安装包的功能代码分享
2017/09/05 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
Vue filter介绍及详细使用
2018/04/04 Javascript
JS基于ES6新特性async await进行异步处理操作示例
2019/02/02 Javascript
layui监听工具栏的实例(操作列表按钮)
2019/09/10 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
2020/08/17 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
2020/11/16 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
[08:44]DOTA2发布会群星聚首 我们都是刀塔人
2014/03/21 DOTA
[00:05]ChinaJoy现场 DOTA2玩家高呼“CN DOTA BEST DOTA”
2019/08/04 DOTA
使用Python编写简单的端口扫描器的实例分享
2015/12/18 Python
使用python实现tcp自动重连
2017/07/02 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
Python pandas用法最全整理
2019/08/04 Python
Python爬虫简单运用爬取代理IP的实现
2020/12/01 Python
澳大利亚最大的女装零售商:Millers
2017/09/10 全球购物
日本小田急百货官网:Odakyu
2018/07/19 全球购物
大学四年个人总结
2015/03/03 职场文书
小学教师工作总结2015
2015/04/07 职场文书
导游词之贵州织金洞
2019/10/12 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers
利用ajax+php实现商品价格计算
2021/03/31 PHP
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers