<!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. Springboot- Caused by: org.hibernate.AnnotationException: No identifier specified for entity:

    错误与异常: Caused by: org.hibernate.AnnotationException: No identifier specified for entity: 原因:引用了不对的包, ...

  2. 配置标准的 ActiveMQ 组件

    简单地说,使用 ActiveMQ 的方式是固定且直接的:启动 ActiveMQ 服务器,发送消息,接收消息.但你并未理解 ActiveMQ 背后运作的详情.在一些要求更高的场景里,需要理解并有能力自定 ...

  3. Beautifusoup

    text = soup.find('div', {'class': 'mulu'}) #查找目录,坑死我了.就这个东西,知乎上看别人写的爬取网络小说,这个最适合我.我一开始老是使用beautifuls ...

  4. Maven知识点简要

      1.依赖管理 <dependencies> <dependency> <groupId>net.sf.json-lib</groupId> < ...

  5. nyoj-155-求高精度幂(java大数)

    题目链接 import java.util.*; import java.math.*; public class Main{ public static void main(String[] arg ...

  6. .net remoting和wcf自托管——一个bug引发的警示

    一.解决问题,需要深入,并从细节入手,多从代码找原因,不能认为代码是死的,不会出错: 之前代码都运行良好,突然某一天,在我电脑上出问题了.出了问题,那就应该找出原因.其实这个问题,本身并不难,好歹给你 ...

  7. bzoj 3887: Grass Cownoisseur Tarjan+Topusort

    题目: 给一个有向图,然后选一条路径起点终点都为1的路径出来,有一次机会可以沿某条边逆方向走,问最多有多少个点可以被经过?(一个点在路径中无论出现多少正整数次对答案的贡献均为1) 题解: 首先考虑简单 ...

  8. C++中rand()函数的用法

    1.rand()不需要参数,它会返回一个从0到最大随机数的任意整数,最大随机数的大小通常是固定的一个大整数. 2.如果你要产生0~99这100个整数中的一个随机整数,可以表达为:int num = r ...

  9. Android UI--提高Android UI体验

    1,自定义虚拟键盘 当一个用户被要求在一个文本框输入时希望又怎样的体验?  从用户需求来看,虚拟键盘应该改变以帮助用户输入的数据.这里是一些例子: 如果一个视图是一个电子邮件地址,一个键盘的“@”符号 ...

  10. 学习动态性能表(17)--v$segstat&v$segment_statistics

    学习动态性能表 第17篇-(1)-V$SEGSTAT  2007.6.13 本视图实时监控段级(segment-level)统计项,支持oracle9ir2及更高版本 V$SEGSTAT中的常用列 T ...