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比较文档位置
Apr 08 Javascript
JavaScript 克隆数组最简单的方法
Feb 12 Javascript
jQuery 1.3 和 Validation 验证插件1.5.1
Jul 09 Javascript
Jquery拖拽并简单保存的实现代码
Nov 28 Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 Javascript
简易的投票系统以及js刷票思路和方法
Apr 07 Javascript
Javascript将JSON日期格式化
Aug 23 Javascript
JS禁止查看网页源代码的实现方法
Oct 12 Javascript
详解Vue.js搭建路由报错 router.map is not a function
Jun 27 Javascript
VsCode新建VueJs项目的详细步骤
Sep 23 Javascript
详解vue-admin和后端(flask)分离结合的例子
Feb 12 Javascript
javascript实现点击按钮切换轮播图功能
Sep 23 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
IStream与TStream之间的相互转换
2008/08/01 PHP
PHP源码之 ext/mysql扩展部分
2009/07/17 PHP
php在数据库抽象层简单使用PDO的方法
2015/11/03 PHP
Use Word to Search for Files
2007/06/15 Javascript
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
js动态删除div元素基本思路及实现代码
2014/05/08 Javascript
Node.js中对通用模块的封装方法
2014/06/06 Javascript
javascript几个易错点记录
2014/11/26 Javascript
js中利用cookie实现记住密码功能
2020/08/20 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
Angular2库初探
2017/03/01 Javascript
Vue 2.x教程之基础API
2017/03/06 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
浅谈Angular路由守卫
2017/08/26 Javascript
jQuery创建折叠式菜单
2019/06/15 jQuery
vue动态绘制四分之三圆环图效果
2019/09/03 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
2019/09/27 Javascript
vue 动态表单开发方法案例详解
2019/12/02 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
el-table表头根据内容自适应完美解决表头错位和固定列错位
2021/01/07 Javascript
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
[01:03:50]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第二场 2月7日
2021/03/11 DOTA
python将list转为matrix的方法
2018/12/12 Python
python爬虫超时的处理的实例
2018/12/19 Python
详解django2中关于时间处理策略
2019/03/06 Python
Python实现隐马尔可夫模型的前向后向算法的示例代码
2019/12/31 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
Python实现京东抢秒杀功能
2021/01/25 Python
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
HTML5移动端手机网站开发流程
2016/04/25 HTML / CSS
《狼》教学反思
2014/03/02 职场文书
销售团队激励口号
2014/06/06 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书