<!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. CSS3之超出隐藏

    html <td ><a class="link" href="{$vo.link}" target="_blank"&g ...

  2. python常见的PEP8规范

    1. 括号中使用垂直隐式缩进或使用悬挂缩进 缩进 每级缩进用4个空格 示例: (垂直隐式缩进)对准左括号 def function_name(var_one,var_two, var_three,va ...

  3. 在openstack环境中安装rackspace private cloud --1 环境准备

    在一个openstack环境中安装rackspace private cloud, 环境准备: 在good-net网络中创建3个虚拟机vm Network Detail: good-net Netwo ...

  4. utf-8编码汉字转换成对于的16进制 10进制对于的值

    http://www.mytju.com/classcode/tools/encode_utf8.asp

  5. 井眼轨迹的三次样条插值 （vs + QT + coin3d）

    井眼轨迹数据的测量值是离散的,根据某些测斜公式,我们可以计算出离散的三维的井眼轨迹坐标,但是真实的井眼轨迹是一条平滑的曲线,这就需要我们对测斜数据进行插值,使井眼轨迹变得平滑,我暂时决定使用三次样条进 ...

  6. C++初始化小问题

    #include<; } 发现,没有对string进行初始化,就已经默认可以使用,并且是空串,一直用java,对c++不熟悉.搜索了下,发现在c++中,只要对对象进行了定义,如果没有初始化,就会 ...

  7. java: InputStreamReader将字节的输入流变成字符的输入流，OutputStreamWriter将字符的输出流变成字节的输出流

    InputStreamReader:将字节的输入流变成字符的输入流, OutputStreamWriter:将字符的输出流变成字节的输出流 //将缓冲区的内容读取,可以一次读取 //可以接收键盘的输入 ...

  8. FunnelWeb 开源Blog引擎介绍

    FunnelWeb is an open source blog engine, built by developers for developers. Instead of fancy quotes ...

  9. 论文笔记 — MatchNet: Unifying Feature and Metric Learning for Patch-Based Matching

    论文:https://github.com/ei1994/my_reference_library/tree/master/papers 本文的贡献点如下: 1. 提出了一个新的利用深度网络架构基于p ...

  10. 五一清北学堂培训之Day 3之DP

    今天又是长者给我们讲小学题目的一天 长者的讲台上又是布满了冰红茶的一天 ---------------------------------------------------------------- ...