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 图片上传预览-兼容标准
Jun 01 Javascript
javascript中使用css需要注意的地方小结
Sep 01 Javascript
js实现身份证号码验证的简单实例
Feb 19 Javascript
jquery序列化表单去除指定元素示例代码
Apr 10 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 Javascript
webpack搭建vue 项目的步骤
Dec 27 Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 Javascript
js 计算图片内点个数的示例代码
Apr 04 Javascript
Vue的路由及路由钩子函数的实现
Jul 02 Javascript
js原生map实现的方法总结
Jan 19 Javascript
Js图片点击切换轮播实现代码
Jul 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
延长phpmyadmin登录时间的方法
2011/02/06 PHP
php和mysql中uft-8中文编码乱码的几种解决办法
2012/04/19 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
一个关于javascript匿名函数的问题分析
2012/03/30 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
jquery、js操作checkbox全选反选
2014/03/12 Javascript
javascript+html5实现仿flash滚动播放图片的方法
2015/04/27 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
2016/09/17 Javascript
微信小程序 MINA文件结构
2016/10/17 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
在Vue组件中使用 TypeScript的方法
2018/02/28 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
2018/10/01 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
2019/04/04 Javascript
详解iframe跨域的几种常用方法(小结)
2019/04/29 Javascript
Postman环境变量全局变量使用方法详解
2020/08/13 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
[06:45]DOTA2-DPC中国联赛 正赛 Magma vs LBZS 选手采访
2021/03/11 DOTA
Python 的 Socket 编程
2015/03/24 Python
Python中title()方法的使用简介
2015/05/20 Python
python使用MySQLdb访问mysql数据库的方法
2015/08/03 Python
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
很酷的python表白工具 你喜欢我吗
2019/04/11 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
python 实现关联规则算法Apriori的示例
2020/09/30 Python
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
日常奢侈品,轻松购物:Verishop
2019/08/20 全球购物
一些PHP的面试题
2015/05/06 面试题
法律专业自我鉴定
2013/10/03 职场文书
个人自我鉴定范文
2013/10/04 职场文书
大学生怎样进行自我评价
2013/12/07 职场文书
社区党务公开实施方案
2014/03/18 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
家庭贫困证明书(3篇)
2014/09/15 职场文书