上图:

主段代码:

<script type="text/javascript">

var getRandomColor = function(){

    return (function(m,s,c){

    return (c ? arguments.callee(m,s,c-1) : '#') +

      s[m.floor(m.random() * 16)]

    })(Math,'0123456789abcdef',5)

}

var btnArr = document.getElementsByTagName("button");

var main = document.getElementById("main");

for (var i = 0; i < btnArr.length; i++) {

btnArr[i].onclick = function() {

for (var i = 0; i < btnArr.length; i++) {

btnArr[i].style.backgroundColor = "darkgray";

}

this.style.backgroundColor = "#FF0000";

main.innerHTML = "第" + this.innerHTML + "个盒子";

main.style.backgroundColor = getRandomColor();

}

}

</script>

不足之处,请多指点

自己做的一个小demo的更多相关文章

  1. java线程间通信:一个小Demo完全搞懂

    版权声明:本文出自汪磊的博客,转载请务必注明出处. Java线程系列文章只是自己知识的总结梳理,都是最基础的玩意,已经掌握熟练的可以绕过. 一.从一个小Demo说起 上篇我们聊到了Java多线程的同步 ...

  2. 模仿京东顶部搜索条效果制作的一个小demo

    最近模仿京东顶部搜索条效果制作的一个小demo,特贴到这里,今后如果有用到可以参考一下,代码如下 #define kScreenWidth [UIScreen mainScreen].bounds.s ...

  3. FMX相当于在界面上自己又做了一个小操作系统

    FMX的自画界面我也不看好,比如复制粘贴,太丑了,系统做得很好很精细的复制粘贴界面,就是无法调出,比如MIUI,复制粘贴还能有个放大镜,可以选择到屏幕边缘的文字,可以选择剪贴板内多个可粘贴的文字:还有 ...

  4. Visual Studio 2017 - Windows应用程序打包成exe文件(2)- Advanced Installer 关于Newtonsoft.Json,LINQ to JSON的一个小demo mysql循环插入数据、生成随机数及CONCAT函数 .NET记录-获取外网IP以及判断该IP是属于网通还是电信 Guid的生成和数据修整(去除空格和小写字符)

    Visual Studio 2017 - Windows应用程序打包成exe文件(2)- Advanced Installer   Advanced Installer :Free for 30 da ...

  5. 从一个小demo开始,体验“API经济”的大魅力

    写在前面 “API经济”这个词是越来越火了,但是"API经济"具体指的是什么,相信很多人还没有个明确的认识.不过今天我可不打算长篇大论的去讲解一些概念,我们就以“电话号码归属地查询 ...

  6. 学习react,动手实现一个小demo(仿知乎问答)

    学习react也有一周的时间,最近自己做了个仿知乎问答的小demo,项目源码在github上:https://github.com/yang302/reactQa 使用技术:bower+gulp+re ...

  7. 一周一个小demo — 前端后台的交互实例

    这一周呢,本K在大神的指导下,完成了一个利用ajax与php文件上传处理相结合的一个留言板功能的小实例,下面就让本K来带大家瞅瞅如何实现这一种功能. 一.界面概览 首先我们来看一下这个小demo的具体 ...

  8. 原生JS写了一个小demo,根据输入的数字生成不同背景颜色的小方块儿~

    昨天练习写了这个小demo,个人觉得通过设置定位元素left和top的值,来实现换行的功能,这种方法很巧妙~ 另外,如下代码中的随机颜色的获取,还请各位前辈多多指教:需要改进的地方:或者有没有更好的方 ...

  9. 写一个小demo过程中遇到的各种问题 学生管理考勤系统(网页模拟)

    添加与新增一些小玩意的1.0.3版本:传送门 各位带哥,这不是你们要的c++.java.c#作业哈 课上要求做个小作业,学生管理考勤系统,原本想着是个练手的好机会,结果只证实了我还是个弟中弟. 设想的 ...

随机推荐

  1. SGU 275 To xor or not to xor 高斯消元求N个数中选择任意数XORmax

    275. To xor or not to xor   The sequence of non-negative integers A1, A2, ..., AN is given. You are ...

  2. HDU 1561 The more, The Better 树形DP

    The more, The Better Problem Description   ACboy很喜欢玩一种战略游戏,在一个地图上,有N座城堡,每座城堡都有一定的宝物,在每次游戏中ACboy允许攻克M ...

  3. loj1011 状态压缩

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1011 思路:最近的开始做dp了...很明显的一道状态压缩题,dp[n][state]表 ...

  4. merge布局

    当LayoutInflater遇到这个标签时,它会跳过它,并将<merge />内的元素添加到<merge />的父元素里.迷惑了吗?让我们用<merge />来替 ...

  5. scrollTo 和 scrollBy

      涉及到滑动,就涉及到VIEW,大家都知道,Android的UI界面都是由一个一个的View以及View的派生类组成,View作为基类,而常用的布局里面的各种布局就是它派生出来的ViewGroup的 ...

  6. Java 程序 ——感想

    也许大家也有过这样的经历,我这的是受够了: 我们的专业选修课java课上老师留了一个作业,说做完了这个,就不用参加考试了,侥幸于懒惰的心理带领着我,光荣地接受了这个任务,而且按着老师的要求,不断地完善 ...

  7. vim 标准环境的配置

    最近刚刚从IDE转到了vim,很多习惯不一致,特地配置了一下vim环境.在网上找了大神的帖子,怕忘记了,特此纪念. 传送门     http://www.cnblogs.com/ma6174/arch ...

  8. for的冒泡排序练习题

    这是一个冒泡排序的方法,请汲取其中的思想.有一组数: 1,2,3,4,5,6请将这组数用降序排列.我们可以将数组里面的数两两相比,如果第二个数比第一个数大,那么将第二个数值与第一个数值交换,然后让其循 ...

  9. css3 -- 浏览器支持

    浏览器支持的前缀: 1.浏览器兼容前缀 -webkit-transform:rotate(-3deg); /*为Chrome/Safari*/ -moz-transform:rotate(-3deg) ...

  10. 8611 大牛之路I

    时间限制:500MS  内存限制:1000K 提交次数:157 通过次数:62 题型: 编程题   语言: C++;C Description 要成为ACM大牛,要掌握很多必需的知识点.某些知识点可以 ...