<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

.stage{

width: 210px;

height: 250px;

margin: 50px auto;

}

#box{

margin-top: 20px;

width: 210px;

height:210px;

background: red;

}

</style>

</head>

<body>

<div class="stage">

<span>点击盒子变换颜色额！！</span>

<div id="box" onclick="changecolor()"></div>

</div>

</body>

<script type="text/javascript">

var box=1;

function changecolor(){

var a=document.getElementById("box");

switch(box){

case 1:a.style.backgroundColor="yellow";box++;break;

case 2:a.style.backgroundColor="cyan";box++;break;

case 3:a.style.backgroundColor="tomato";box++;break;

case 4:a.style.backgroundColor="purple";box++;break;

case 5:a.style.backgroundColor="cornflowerblue";box++;break;

case 6:a.style.backgroundColor="darksalmon";box++;break;

case 7:a.style.backgroundColor="red";box=1;break;

}

}

</script>

</html>

用JS 写一个简单的程序，切换七彩盒子背景的更多相关文章

  1. 用JS写一个简单的程序,算出１００中７的倍数的最大值

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. JS写一个简单的程序，输入两个整数，打印这两个数的和，差，积，余数

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. JS写一个简单的程序，判断年份是平年还是闰年

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  5. JS写一个简单日历

    JS写一个日历,配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  6. [NodeJS]使用Node.js写一个简单的在线聊天室

    声明:教程来自<Node即学即用>.源代码案例均出自此书.博文仅为个人学习笔记. 第一步:创建一个聊天server. 首先,我们先来写一个Server: var net = require ...

  7. js写一个简单的日历

    思路:先写一个结构和样式,然后写本月的时间,之后计算上下月份的关系 <!DOCTYPE html> <html lang="en"> <head> ...

  8. 用node.js写一个简单爬虫，并将数据导出为 excel 文件

    引子 最近折腾node,最开始像无头苍蝇一样到处找资料,然而多数没什么卵用,都在瞎比比.在一阵瞎搞后,我来分享一下初步学习node的三个过程: 1 撸一遍NODE入门,对其有个基本的了解: 2 撸一遍 ...

  9. DuiLib学习笔记2——写一个简单的程序

    我们要独立出来自己创建一个项目,在我们自己的项目上加皮肤这才是初衷.我的新建项目名为:duilibTest 在duilib根目录下面有个 Duilib入门文档.doc 我们就按这个教程开始入门 首先新 ...

随机推荐

  1. JMeter常用的调试工具

    JMeter常用的调试工具有如下五种: 1.View Tree:查看结果树.含请求信息.响应信息等,请求头信息中的cookie信息一般默认不会显示,可通过修改JMeter配置参数进行显示.日常大家用的 ...

  2. ActiveMq 高级特性的使用

    消费者的 destination 可以使用 wildcards 生产者的 destination 可以使用 composite destinations VirtualTopic 真是一大利器,当初读 ...

  3. MySQL复制：主从和双主配置

    对比Replication和Cluster 应用层中间件的负载均衡 异步的复制过程 MySQL官方使用Replication场景

  4. java:system根据输入的内容，然后输出（字节流）

    把输入的内容输出来:根据system.in的内容System.out.println输出出来 都是字节流,的形式: //限制读取的字符长度 //字节流 InputStream ips = System ...

  5. Linux 系统实时监控 —— Glances

    早些时候,我们提到过有很多可以用来监视系统性能的 Linux 系统监视工具. 但我们估计,或许更多的用户会倾向与绝大多数 Linux 发行版都带的工具 (top 命令). top 命令是 Linux ...

  6. 完成一个servlet 就要在web.xml里面配一个映射,这样就有一个路径供我们 使用????? servlet从页面接收值?

    最后,最容易忘记的是:在dao层中 调用xml里的删除sql语句 后面需要人为加上事务提交.一定要! sqlSession.commit();//jdbc是自动提交,但是mybatis中不是自动提交的 ...

  7. Effective C++ 条款10

    令operator=返回一个reference to *this 将operator=返回一个reference是为了什么呢?答案很简单,就是为了实现连锁形式. 什么是连锁形式,如int x,y,z: ...

  8. UVALive - 4270 Discrete Square Roots (扩展欧几里得)

    给出一组正整数$x,n,r$,使得$r^2\equiv x(mod\: n)$,求出所有满足该等式的$r$. 假设有另一个解$r'$满足条件,则有$r^2-r'^2=kn$ 因式分解,得$(r+r') ...

  9. POJ2411Mondriaan's Dream（DP+状态压缩 or 插头DP）

    问题: Squares and rectangles fascinated the famous Dutch painter Piet Mondriaan. One night, after prod ...

  10. Network Saboteur （深搜递归思想的特殊使用）

    个人心得:对于深搜的使用还是不到位,对于递归的含义还是不太清楚!本来想着用深搜构成一个排列,然后从一到n分割成俩个数组,然后后面发现根本实现不了,思路太混乱.后来借鉴了网上的思想,发现用数组来标志,当 ...