<!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. 电影_Z

    1. 西施叨叨叨 西施叨叨叨 2015 第21期 : <<指环王>>系列, <<冰与火之歌>>系列(权力的游戏 将正统史诗奇幻剧搬在电视网上的首部电视剧 ...

  2. Linux系统memcached安装

    [memcached安装] Linux系统安装memcached可以自动安装,也可以手动编译安装,这里使用手动编译安装 1.Linux系统安装memcached,首先要先安装libevent库. 下载 ...

  3. IIS7配置PHP简要说明

    1. IIS7 安装的时候 要注意三个地方打得勾 万维网服务->应用程序开发功能->CGI ->ISAPI扩展 ->ISAPI筛选器 注:   CGI  会在IIS7+PHP_ ...

  4. 关于一家大型互联网公司的.NET面试

    上周去了一家大型的互联网公司去面试!四个面试官提的问题整理下!以后会注明答案! 1.关于垃圾回收的过程!GC的过程 其中包含:什么是根,Finalize与Dispose的区别,什么时候用到!IDisp ...

  5. scrum meeting 1st

    现状分析 这是一个新项目,在之前的阶段中,基本完成了用户需求分析,在具体实现方面,团队大部分处于初学阶段,需要时间学习试验,预计刚开始项目进展较慢,alpha阶段时间相对紧迫,打算先实现网站的基本功能 ...

  6. Linux-Crontab服务

    1.安装并检查Crontab服务 检查cron服务: 检查Crontab工具是否安装:crontab -l 检查crond服务是否启动:service crond status 安装cron: yum ...

  7. 剑指offer--21.链表中倒数第k个结点

    定义两个指针,当一个指针指到第K个结点时,第二个指针开始向后移动 -------------- 时间限制:1秒 空间限制:32768K 热度指数:602826 本题知识点: 链表 题目描述 输入一个链 ...

  8. HDU - 5307 ：He is Flying （分治+FFT）（非正解）

    JRY wants to drag racing along a long road. There are nn sections on the road, the ii-th section has ...

  9. java-05String课堂练习

    1.阅读以下代码查看输出结果 public class StringPool { public static void main(String args[]) { String s0="He ...

  10. 简洁的Jquery弹出窗插件

    做项目时,很多时候都需要弹窗提示.如果要求不是很严格的项目,直接使用alert就可以搞定.对于需要高度定制化的项目,而且要求比较高的时候,就需要设计符合整体风格的弹出层,这种有美工帮忙,也比较好搞定. ...