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 相关文章推荐
用JavaScript页面不刷新时全选择,全删除(GridView)
Apr 14 Javascript
Javascript学习笔记6 prototype的提出
Jan 11 Javascript
用innerhtml提高页面打开速度的方法
Aug 02 Javascript
javascript实现禁止复制网页内容
Dec 16 Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 Javascript
jQuery给多个不同元素添加class样式的方法
Mar 26 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
JavaScript实现自动切换图片代码
Oct 11 Javascript
Jquery获取radio选中的值
May 05 jQuery
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
Oct 12 Javascript
详解JavaScript中精度失准问题及解决方法
Feb 04 Javascript
微信小程序自定义胶囊样式
Dec 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
收听短波不可能有声音清晰的品质吗
2021/03/01 无线电
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
js拼接html注意问题示例探讨
2014/07/14 Javascript
Bootstrap的Refresh Icon也spin起来
2016/07/13 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
Vue实现virtual-dom的原理简析
2017/07/10 Javascript
微信小程序实现拖拽功能
2019/09/26 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
2019/12/04 Javascript
vue使用screenfull插件实现全屏功能
2020/09/17 Javascript
深入浅析Python中join 和 split详解(推荐)
2016/06/30 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
对Python中列表和数组的赋值,浅拷贝和深拷贝的实例讲解
2018/06/28 Python
解决Python 中英文混输格式对齐的问题
2018/07/16 Python
Python实现端口检测的方法
2018/07/24 Python
浅谈Python大神都是这样处理XML文件的
2019/05/31 Python
python安装scipy的方法步骤
2019/06/26 Python
Django配置MySQL数据库的完整步骤
2019/09/07 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
python2和python3哪个使用率高
2020/06/23 Python
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
巴西最大的家电和百货零售商:Casas Bahia
2016/11/22 全球购物
耐克波兰官方网站:Nike波兰
2019/09/03 全球购物
运动会通讯稿200字
2014/02/16 职场文书
管理提升方案
2014/06/04 职场文书
校园广播稿100字
2014/10/06 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
学生检讨书如何写
2014/10/30 职场文书
回门宴新娘答谢词
2015/09/29 职场文书
2016年寒假见闻
2015/10/10 职场文书
Python加密技术之RSA加密解密的实现
2022/04/08 Python