<!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. RtlWerpReportException failed with status code :-1073741823

    在release下程序运行总是崩溃:debugView输出了这个崩溃信息, 1. 一开始是release看崩溃,各种二分法找崩溃点,太玄没找到: 2. 终于想到可以调试,我草,调试一下瞬间发现某个cl ...

  2. 用find命令查找最近修改过的文件

    Linux的终端上,没有windows的搜索那样好用的图形界面工具,但find命令确是很强大的. 比如按名字查找一个文件,可以用 find / -name targetfilename . 唉,如果只 ...

  3. vue项目打包注意的地方

    打包有两种方式: 第一种方式:1.更改config文件夹下prod.env.js下的地址: 2.将config文件夹下index.js中build下改为 assetsPublicPath: '', 第 ...

  4. Mybatis 接口方式对数据的增删改查 一对一关联查询

    数据库中有两个表 student 和studentInfo student表中的字段和数据 studentInfo表中的字段 ok数据库说完了,开始建立一个项目,对数据库中的数据进行操作吧 新建jav ...

  5. LeetCode OJ：Construct Binary Tree from Preorder and Inorder Traversal（从前序以及中序遍历结果中构造二叉树）

    Given preorder and inorder traversal of a tree, construct the binary tree. Note:You may assume that ...

  6. ZOJ - 3201 Tree of Tree (树形背包)

    题意:有一棵树,树上每个结点都有一个权值,求恰好包含k个结点的子树的最大权值. 设dp[i][j]为以结点i为根的树中包含j个结点的子树的最大权值,则可以把这个结点下的每棵子树中所包含的所有子树的大小 ...

  7. HDU2065"红色病毒"问题【指数型母函数】

    Problem Description 医学界发现的新病毒因其蔓延速度和Internet上传播的"红色病毒"不相上下,被称为"红色病毒",经研究发现,该病毒及其 ...

  8. mapper.xml文件中标签不显示问题

    1.配置mybatis-3-mapper.dtd 2.配置mybatis-3-config.dtd 3.结果所示:

  9. python_根据"词库"进行“词联想”

    输入法中,当你输入一个字的时候,输入法就能猜出你要输入什么词.这就是词联想.现在,再python中简单实现类似这样的功能:根据制定好的词库,输入一个新的词,帮助实现词联想.其中分词用了jieba包. ...

  10. HttpContext是干什么的

    这是MSDN对HttpContext的说明:        HttpContext 类:封装有关个别 HTTP 请求的所有 HTTP 特定的信息. (网上说是上下文信息,啥又叫上下文呢?个人感觉说的不 ...