Javascript点击按钮随机改变数字与其颜色


Posted in Javascript onSeptember 01, 2016

先来看看效果图

Javascript点击按钮随机改变数字与其颜色Javascript点击按钮随机改变数字与其颜色

实例代码

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    #box {
      margin: 100px auto;
      width: 200px;
      height: 150px;
      line-height: 150px;
      letter-spacing: 10px;
      text-align: center;
      font-size: 30px;
      font-weight: bolder;
      border: 2px solid palegreen;
      word-wrap: break-word;
      border-radius: 5px;;
      position: relative;
    }
    #btn{
      position: absolute;
      left:50%;
      top:280px;
    }
  </style>
</head>
<body>
<div id="box">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
</div>
<input type="button" id="btn" value="我变了哟!"/>
<script>
  //提取标签
  var box=document.getElementById("box");
  var span=document.getElementsByTagName("span");
  var btn=document.getElementById("btn");
  var color="";
  var str="0123456789abcdef";
  btn.onclick=function(){
    for(var i=0;i<span.length;i++){//生成四位数
      for(var j=0;j<6;j++){//随机改变每个数字的颜色
        color+=str.substr(parseInt(Math.random()*str.length),1);//取颜色(循环,每次提取一位,进行拼接组成6为颜色的值)
      }
      span[i].innerHTML=parseInt(Math.random()*10);//生成随机数
      span[i].style.color=("#"+color);//随机改变每个span的颜色
      color="";
    }
  }
</script>
</body>
</html>

以上就是这篇文章的全部内容,实现代码很简单,希望对大家能有一定的帮助,如果有问题可以留言交流,小编会尽快给大家回复的。

Javascript 相关文章推荐
改进:论坛UBB代码自动插入方式
Dec 22 Javascript
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
Jan 22 Javascript
JS原型链怎么理解
Jun 27 Javascript
js本地图片预览实现代码
Oct 09 Javascript
Jquery中attr与prop的区别详解
May 27 jQuery
Angular2.js实现表单验证详解
Jun 23 Javascript
echarts饼图扇区添加点击事件的实例
Oct 16 Javascript
Vue高版本中一些新特性的使用详解
Sep 25 Javascript
angularJs利用$scope处理升降序的方法
Oct 08 Javascript
vue 中 beforeRouteEnter 死循环的问题
Apr 23 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
Aug 20 Javascript
vue 全局环境切换问题
Oct 27 Javascript
AngularJs 指令详解及示例代码
Sep 01 #Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
Sep 01 #Javascript
JS实现列表的响应式排版(推荐)
Sep 01 #Javascript
利用Jquery队列实现根据输入数量显示的动画
Sep 01 #Javascript
JavaScript中子对象访问父对象的方式详解
Sep 01 #Javascript
浅谈JavaScript 数据属性和访问器属性
Sep 01 #Javascript
老生常谈JavaScript 函数表达式
Sep 01 #Javascript
You might like
PHP Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
PHP 快速排序算法详解
2014/11/10 PHP
PHP实现实时生成并下载超大数据量的EXCEL文件详解
2017/10/23 PHP
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
详解jQuery中的事件
2016/12/14 Javascript
Node.js 基础教程之全局对象
2017/08/06 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
JS从非数组对象转数组的方法小结
2018/03/26 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
node.js基于socket.io快速实现一个实时通讯应用
2019/04/23 Javascript
ES6中Set和Map用法实例详解
2020/03/02 Javascript
详解Python中的多线程编程
2015/04/09 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
Python中将变量按行写入txt文本中的方法
2018/04/03 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
django框架cookie和session用法实例详解
2019/12/10 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
如何使用Python自动生成报表并以邮件发送
2020/10/15 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
门卫人员岗位职责
2013/12/24 职场文书
本科毕业生专业自荐书范文
2014/02/05 职场文书
公司合作意向书
2014/04/01 职场文书
三好学生演讲稿范文
2014/04/26 职场文书
新闻工作者先进事迹
2014/05/26 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
处罚决定书范文
2015/06/24 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
怎样评估创业计划书是否有可行性?
2019/08/07 职场文书