<!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. python基础4 - 判断（if）语句

    6. 判断(if)语句 6.1 if 判断语句基本语法 在 Python 中,if 语句 就是用来进行判断的,格式如下: if 要判断的条件: 条件成立时,要做的事情 …… 注意:代码的缩进为一个 t ...

  2. 《Advanced Bash-scripting Guide》学习（十四）：HERE Document和cat <<EOF

    本文所选的例子来自于<Advanced Bash-scripting Gudie>一书,译者 杨春敏 黄毅 #here document cat <<EOF \z EOF ca ...

  3. JetBrains 系列软件

    JetBrains http://www.jetbrains.com/ 工具的路径也下载页面与下面第一个的idea类似,支持mac和windows平台的也都支持Linux平台. IntelliJ ID ...

  4. Windows7 如何关闭系统更新

    我们点击开始菜单,找到控制面板这个选项,如图:  然后进入操作中心,如图:  然后选择如图所示的选项,如图:  然后选择更改设置选项,如图:  然后我们选择从不检查更新并点击确定按钮,如图:

  5. SFTP 利用对称公钥免密码的方法

    在客户端的操作: #cd .ssh             进入.ssh目录 #ssh-keygen -t rsa   执行创建密钥对命令 Generating public/private rsa ...

  6. LeetCode OJ：Basic Calculator（基础计算器）

    Implement a basic calculator to evaluate a simple expression string. The expression string may conta ...

  7. Microsoft Visual Studio Ultimate 2013 RC 离线安装程序

    Microsoft Visual Studio Ultimate 2013 RC 离线安装程序 ☆ 微软官网地址:☆ http://www.microsoft.com/en-us/download/d ...

  8. 如何选择MySQL数据库的安装方式

     MySQL数据库安装有yum安装,rpm安装,二进制编译安装,cmake,或者make安装,但是选择什么样的安装方式则全看实际应用场景. 下为网友总结安装方式选择:   若是对数据库要求不太高的场景 ...

  9. Azure新建的CentOS设置root账户的密码

    前言:Azure在新建VM的时候的账户使用的是自定义的用户名和密码或者自定义的用户名使用公钥 1.使用自定义的用户名登录到服务器. 2.设置root的密码: sudo passwd root 3.按照 ...

  10. python之ConfigParser的使用。

    一.ConfigParser简介 ConfigParser 是用来读取配置文件的包.配置文件的格式如下:中括号“[ ]”内包含的为section.section 下面为类似于key-value 的配置 ...