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 相关文章推荐
在textarea文本域中显示HTML代码的方法
Mar 06 Javascript
javascript的switch用法注意事项分析
Feb 02 Javascript
炫酷的js手风琴效果
Oct 13 Javascript
jQuery  ready方法实现原理详解
Oct 19 Javascript
jQuery中用on绑定事件时需注意的事项
Mar 19 Javascript
node中使用es5/6以及支持性与性能对比
Aug 11 Javascript
利用ES6实现单例模式及其应用详解
Dec 09 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 Javascript
js blob类型url的视频下载问题的解决
Nov 29 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
Apr 29 Javascript
vue 使用lodash实现对象数组深拷贝操作
Sep 10 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
MySQL GBK→UTF-8编码转换
2007/05/24 PHP
PHP 截取字符串函数整理(支持gb2312和utf-8)
2010/02/16 PHP
PHP访问Google Search API的方法
2015/03/05 PHP
PHP环境中Memcache的安装和使用
2015/11/05 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
php微信公众号开发(2)百度BAE搭建和数据库使用
2016/12/15 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
用JS剩余字数计算的代码
2008/07/03 Javascript
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
javascript Firefox与IE 替换节点的方法
2010/02/24 Javascript
jquery下checked取值问题的解决方法
2012/08/09 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
2013/01/23 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
详解ES6中的三种异步解决方案
2018/06/28 Javascript
Vue实现6位数密码效果
2018/08/18 Javascript
微信小程序实现的一键连接wifi功能示例
2019/04/24 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
JS自定义滚动条效果
2020/03/13 Javascript
夯基础之手撕javascript继承详解
2020/11/09 Javascript
JavaScript 防盗链的原理以及破解方法
2020/12/29 Javascript
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
简明 Python 基础学习教程
2007/02/08 Python
下载给定网页上图片的方法
2014/02/18 Python
Python使用py2exe打包程序介绍
2014/11/20 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
python删除某个目录文件夹的方法
2020/05/26 Python
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
美国标志性加大尺码时装品牌:Ashley Stewart
2016/12/15 全球购物
南京迈特望C/C++面试题
2012/07/09 面试题
医疗器械售后服务承诺书
2014/05/21 职场文书
企业员工薪酬方案
2014/06/04 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
婚内分居协议书范文
2014/11/26 职场文书
三八红旗手先进事迹材料(2016推荐版)
2016/02/25 职场文书
「约定的梦幻岛」作画发布诺曼生日新绘
2022/03/21 日漫