<!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. DB2导入数据时乱码问题

    1.由于导入import导入数据时乱码,一直找不到解决办法,于是就用load导入 LOAD后,发现某些表检查挂起( 原因码为 "1",所以不允许操作 SQLSTATE=57016  ...

  2. OpenGL的镶嵌

    镶嵌(tessellation)是将凹边形分割或者是凸边形相交边组成的多边形.因为OpenGL只接受凸多边形的渲染,这些非凸多边形必须在绘制前进行镶嵌. 上图分别为凹四边形.中间有洞及自交的多边形. ...

  3. Android环境配好的标志

    Window —> preference —> android

  4. selenium定位多个嵌套iframe

    一. driver.switch_to.frame(id):可以通过id切换到iframe 之前学习了selenium切换到iframe的方法,代码如下 from selenium import we ...

  5. python中利用正则表达式匹配ip地址

    现在有一道题目,要求利用python中re模块来匹配ip地址,我们应如何着手? 首先能想到的是ip地址是数字,正则表达式是如何匹配数字的呢? \d或[0-9] 对于这个问题,不要一下子上来就写匹配模式 ...

  6. 2015 Benelux Algorithm Programming Contest (BAPC 15)E - Excellent Engineers

    这题想了很久没思路,不知道怎么不sort维护二维的最小值 emmmm原来是线段树/树状数组,一维sort,二维当成下标,维护三维的最小值 #include<bits/stdc++.h> # ...

  7. Python文件练习

    练习内容: 使用Python管理ini文件:实现查询,添加,删除,保存操作. 练习目的: 1.掌握文件基本操作 2.认识ini文件 3.了解ConfigParser: ini配置文件格式: 节:[se ...

  8. 应该是实例化对象的没有对属性赋值时，自动赋值为null，但不是空指针对象引用

    此时会输出两个null. Users类的实例是myUsers,但是由于javabean的作用范围是page,所以前面页面传送的javabean的设置的属性全部不能接收到.所以对象myUsers属性为自 ...

  9. Leetcode 976. Largest Perimeter Triangle

    送分题 class Solution(object): def largestPerimeter(self, A): """ :type A: List[int] :rt ...

  10. 学习动态性能表(8)--v$lock&v$locked_object

    学习动态性能表 第八篇-(1)-V$LOCK  2007.5.31 这个视图列出Oracle 服务器当前拥有的锁以及未完成的锁或栓锁请求.如果你觉着session在等待等待事件队列那你应该检查本视图. ...