题目

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

分析

  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. SpringBoot - Starter

    If you work in a company that develops shared libraries, or if you work on an open-source or commerc ...

  2. 07_zookeeper的客户端工具curator_基本api

    [zk原生api的不足之处] * 不能自动超时重连,需要手动操作 * watcher事件注册一次后就会失效 * 不支持递归创建节点 [ Apache curator ] * 解决了watcher的注册 ...

  3. Spring3实战第二章第二小节 IOC依赖注入 list和map集合

    Spring有多种依赖注入的形式,本篇文章仅介绍Spring通过xml进行IOC配置的方式. 1.Set注入 2.构造器注入 平常的Java开发中,程序员在某个类中需要依赖其它类的方法. 通常是new ...

  4. C++ 构造转换函数和强制转换函数

    http://blog.csdn.net/chenyiming_1990/article/details/8862497 1.对于系统的预定义基本类型数据,C++提供了两种类型转换方式:隐式类型转换和 ...

  5. javaEE版本的eclipse中导入工程，发现server里面找不到工程，根本发布不了也不能运行

    原文:http://www.cnblogs.com/sxmcACM/p/3674545.html 1.具体解决方法 首先确保,你导入的工程所用的JDK版本和你的机器上安装的版本是同一版本, 如果不同做 ...

  6. python requests实现windows身份验证登录

    1.安装ntlm  https://github.com/requests/requests-ntlm pip install requests_ntlm 2.使用 import requests f ...

  7. java word转pdf 工具类

    package com.elitel.hljhr.comm.web.main.controller; import java.io.File; import java.io.FileOutputStr ...

  8. 深入解读TPC-C指标

    深入解读TPC-C指标 TPC(Transactionprocessing Performance Council,事务处理性能委员会)是由数十家会员公司创建的非盈利组织,总部设在美国.TPC的成员主 ...

  9. Access 64-bit HKLM\Software Registry by 32-bit C#.NET Application

    http://www.codeproject.com/Articles/1003177/Access-bit-HKLM-Software-Registry-by-bit-Csharp-NE While ...

  10. 装有多个版本 office，选择默认的版本 打开文件

    以下以office 2013 64位为例: 一.先打开运行窗口,Win + R 键: 二. 把office安装路径:"C:\Program Files\Microsoft Office\Of ...