<!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. js模板方法

    模板方法模式,定义一个操作中的算法的骨架,而将一些步骤延迟到子类中.模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤.模板方法模式把不变行为搬到超类中,从而去除了子类中的重复代码 ...

  2. <a>标签点击不跳转

    HTML中的<a></a>标签点击不跳转的方法 一.<a href="####" ></a> 使用这个方法我们会发现<a hr ...

  3. django 使用多说 评论系统

    效果图 方法:登录多说网站,创建站点.然后有下面的提示 ************************************************* 复制以下代码,并粘帖到您网页代码<bo ...

  4. 通过Intent 打开系统级应用

    众所周知,各个手机厂商由于对Android 原生系统定制的原因,会造成系统级应用packname 和activityname 不同的现象,就拿时钟软件来说,魅族2的activityname 是[com ...

  5. NoSQL四种——kv存储（memcache，Riak），列存储（Cassandra，Hbase），文档类（mongoDB，CouchDB），图数据库（neo4j）

    见:https://software.intel.com/sites/default/files/Configuration_and_Deployment_Guide_for_Cassandra_on ...

  6. Tomcat部署项目后有括号的处理方法

    常见的问题,收录整理了一下,方便查找. 如下3个地方都修改为一致即可解决. 1,右键项目名 --> properties --> 输入web project settings --> ...

  7. 第三方开源--Android Image Cropper--图片裁剪

    github下载地址:https://github.com/ArthurHub/Android-Image-Cropper 有两种使用方式: 第一种:Activity用法 1.添加 CropImage ...

  8. 201621123014《Java程序设计》第七周学习总结

    1. 本周学习总结 1.1 思维导图:Java图形界面总结 答: 1.2 可选:使用常规方法总结其他上课内容. 答:1.Swing组件主要分为容器组件和其他组件. 2.JFrame和JPanel都可以 ...

  9. nyoj-451-光棍节的快乐（错排公式）

     题目链接 /* Name:nyoj-451-光棍节的快乐 Copyright: Author: Date: 2018/4/25 16:44:47 Description:D(n)=(n-1)*(D( ...

  10. Codeforces Round #277.5 (Div. 2)D Unbearable Controversy of Being （暴力）

    这道题我临场想到了枚举菱形的起点和终点,然后每次枚举起点指向的点,每个指向的点再枚举它指向的点看有没有能到终点的,有一条就把起点到终点的路径个数加1,最后ans+=C(路径总数,2).每两个点都这么弄 ...