JS实现点击按钮随机生成可拖动的不同颜色块示例

 更新时间:2019年01月30日 10:07:59   转载 作者:waterDjj  
这篇文章主要介绍了JS实现点击按钮随机生成可拖动的不同颜色块,涉及javascript数值运算与页面元素属性动态操作相关实现技巧,需要的朋友可以参考下

本文实例讲述了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>www.jb51.net 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.jb51.net/code/HtmlJsRun测试上述代码,可得如下运行效果:

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • 小程序实现左右来回滚动字幕效果

    小程序实现左右来回滚动字幕效果

    这篇文章主要为大家详细介绍了小程序实现左右来回滚动字幕效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • 浅谈js原生拖放

    浅谈js原生拖放

    下面小编就为大家带来一篇浅谈js原生拖放。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • js获取当前日期时间及其它日期操作汇总

    js获取当前日期时间及其它日期操作汇总

    这篇文章主要介绍了js获取当前日期时间及其它日期操作汇总,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • js写一个字符串转成驼峰的实例

    js写一个字符串转成驼峰的实例

    写一个字符串转成驼峰的方法,使用js代码实现,具体如下,感兴趣的朋友可以了解下哈
    2013-06-06
  • javascript实现的字符串与十六进制表示字符串相互转换方法

    javascript实现的字符串与十六进制表示字符串相互转换方法

    这篇文章主要介绍了javascript实现的字符串与十六进制表示字符串相互转换方法,涉及javascript字符串转换的相关技巧,在防止SQL注入和XSS中具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • js时间戳与日期格式之间相互转换

    js时间戳与日期格式之间相互转换

    这篇文章主要为大家详细介绍了js时间戳与日期格式之间相互转换,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • webpack配置的最佳实践分享

    webpack配置的最佳实践分享

    在网上看到很多人都写了“webpack最佳实践方案”,适合的才是“最佳”的,在这里总结一下自己在工作过程中总结出来的最佳实践,所以本文主要介绍了关于webpack配置的相关资料,需要的朋友们可以参考借鉴,下面来一起看看吧。
    2017-04-04
  • JS实现百度搜索框关键字推荐

    JS实现百度搜索框关键字推荐

    这篇文章主要为大家详细介绍了JS实现百度搜索框关键字推荐,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • javascript中不提供sleep功能如何实现这个功能

    javascript中不提供sleep功能如何实现这个功能

    javascript中不提供sleep功能,而我们时长会用到这个功能,下面与大家分享个不错的解决方法,而且在不同的机器上的执行速度是一致的
    2014-05-05
  • 用JS实现轮播图效果(二)

    用JS实现轮播图效果(二)

    这篇文章主要介绍了用JS实现轮播图效果(二)的相关资料,需要的朋友可以参考下
    2016-06-06

最新评论