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 相关文章推荐
基于Jquery与WebMethod投票功能实现代码
Jan 19 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
Mar 05 Javascript
JQuery创建DOM节点的方法
Jun 11 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
Sep 06 Javascript
Angularjs 实现移动端在线测评效果(推荐)
Apr 05 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
Nov 22 Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
react native 获取地理位置的方法示例
Aug 28 Javascript
JS实现图片切换效果
Nov 17 Javascript
低门槛开发iOS、Android、小程序应用的前端框架详解
Oct 16 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 array_intersect比array_diff快(附详细的使用说明)
2011/07/03 PHP
php使用Cookie控制访问授权的方法
2015/01/21 PHP
PHP面向对象程序设计之对象生成方法详解
2016/12/02 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
Firefox outerHTML实现代码
2009/06/04 Javascript
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
js文件包含的几种方式介绍
2014/09/28 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
深入浅出ES6之let和const命令
2016/08/25 Javascript
利用Javascript开发一个二维周视图日历
2017/12/14 Javascript
async/await地狱该如何避免详解
2018/05/10 Javascript
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
VUE前后端学习tab写法实例
2019/08/06 Javascript
浅谈vue项目,访问路径#号的问题
2020/08/14 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
Python Web服务器Tornado使用小结
2014/05/06 Python
python3.4用函数操作mysql5.7数据库
2017/06/23 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
python matplotlib库的基本使用
2020/09/23 Python
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
蔻驰法国官网:COACH法国
2018/11/14 全球购物
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
我的applet原先好好的, 一放到web server就会有问题,为什么?
2016/05/10 面试题
人力资源行政经理自我评价
2013/10/23 职场文书
环保倡议书500字
2014/05/15 职场文书
2015年国际护士节演讲稿
2015/03/18 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书
java设计模式--三种工厂模式详解
2021/07/21 Java/Android
MySQL数据库必备之条件查询语句
2021/10/15 MySQL
Java线程的6种状态与生命周期
2022/05/11 Java/Android
JavaScript前端面试组合函数
2022/06/21 Javascript