题目

初始为黑色，点击后为红色，再次点击为黑色，以后每次点击一次变色。

分析

  1. 简单的onclick使用。
  2. button的居中可以在外套一个p元素，body中让p居中即可。
  3. 三个DIV块的居中，使用margin和width，注意margin的上下会重叠，但左右不重叠。
  4. 实现多次点击变色，需要进行判断原色，注意一般的方法（ele.style./cssText）只能读取和修改内联样式，故第一次点击时无法访问到样式表中的黑色值。这里使用switch中的default解决。

效果&代码

效果：循环使DIV变色
F12查看代码。

JavaScript小练习3-用循环使三个DIV变色的更多相关文章

  1. 用循环将三个DIV变成红色

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. CSS笔记 - fgm练习 - 三个div变色 - CSS div等分布局

    <title>三个div变红</title> <style> *{margin: 0; padding: 0} body{ text-align: center; ...

  3. javascript小实例，实现99乘法表及隔行变色

    人生短暂,废话不多说,直奔主题! 这个小实例的要求: 实现在页面中输出99乘法表.(要求:以每三行为一组,实现隔行变色(颜色为白,红,黄(也可自己定义)),鼠标滑过每一行,行背景颜色变为蓝色,鼠标离开 ...

  4. python小练习：使用循环和函数实现一个摇骰子小游戏。游戏规则如下：游戏开始，首先玩家选择Big or Small（押大小），选择完成后开始摇三个骰子，计算总值，11<=总值<=18为“大”，3<=总值<=10为“小”。然后告诉玩家猜对或者是猜错的结果。

    python小练习:使用循环和函数实现一个摇骰子小游戏.游戏规则如下:游戏开始,首先玩家选择Big or Small(押大小),选择完成后开始摇三个骰子,计算总值,11<=总值<=18为“ ...

  5. Javascript 小技能

     /* @@截取字符串长度,汉字算2个字符 @@return [string]+'...' */ var subString = function(str, len) {     var newLen ...

  6. 12个非常实用的JavaScript小技巧

    在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是 ...

  7. Javascript并发模型和事件循环

    Javascript并发模型和事件循环 JavaScript的"并发模型"是基于事件循环的,这个并发模型有别于Java的多线程, javascript的并发是单线程的. Javas ...

  8. 11个不常被提及的JavaScript小技巧

    这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是我们又很容易忽略. 1.过滤唯一值 Set类型是在 ES6中新增的,它类似于数组,但 ...

  9. [转]11个教程中不常被提及的JavaScript小技巧

    原文地址: https://www.cnblogs.com/ld1024/p/10723827.html 这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日 ...

随机推荐

  1. Web.py报错：OSError: No socket could be created -- (('0.0.0.0', 8080):

    web.py报错 Python代码: import web urls = ( '/(.*)', 'hello' ) app = web.application(urls, globals()) cla ...

  2. mianxiangduixiang

    package com.hanqi; public class mianxiang { public static void main(String[]args) { Cat c1 =new Cat( ...

  3. 常见的浏览器兼容性问题与解决方案——CSS篇

    1.不同的浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin和padding差异较大. 碰到频率:100% 解决方案:初始化CSS的默认样式,*{ ...

  4. Microsoft Office ->> 完整卸载Office 2007

    今天用GHOST安装了Windows 8.1,结果发现预装了Office 2007,而且这个GHOST系统的Office 2007还不是很正规的安装手法安装的.它没有在注册表中注册.在打开控制面板后发 ...

  5. Oracle数据库从入门到精通 单行函数问题

    视频课程:李兴华 Oracle从入门到精通视频课程 学习者:阳光罗诺 视频来源:51CTO学院 Oracle数据库从入门到精通-单行函数 在数据库中,为了方便用户的数据开发,往往会提供一系列的支持函数 ...

  6. CI框架， 参数验证

    /** * 统一API参数检验方法 * * 调用示例 check_param(array('money' => array('required', 'integer', 'greater_tha ...

  7. C++中虚继承的作用及底层实现原理

    http://blog.csdn.net/bxw1992/article/details/77726390

  8. Dom4j的一个小例子,用于解析xml文件的元素获取方式

    import java.io.File; import java.io.IOException; import javax.xml.parsers.ParserConfigurationExcepti ...

  9. java学习第一步，使用IntelliJ IDEA编写自己的第一个java程序

    首先下载java的jdk,然后说一下IDEA的配置 IntelliJ IDEA目前公认的最好的java开发工具,不过一般的学校的教学还是使用eclipse来进行java的开发.所以老师一般只会教你如何 ...

  10. PostgreSQL的generate_series函数应用

    一.简介 PostgreSQL 中有一个很有用处的内置函数generate_series,可以按不同的规则产生一系列的填充数据. 二.语法 函数 参数类型 返回类型 描述 generate_serie ...