题目

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

分析

  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. css手风琴

    <style> .box{ width: 1000px; height: 450px; margin:0 auto; overflow: hidden;} .box div{ width: ...

  2. C++ VS编译问题--VS下生成DLL，但没有生成Lib的解决办法

    如果项目生成了.dll文件,但是没有生成.lib文件,这是由于项目的设置错误,应作如下修改: 项目->属性->链接器->输入->模块定义文件,设置你的模块定义文件,默认为lib ...

  3. Redis 实现分布式锁

    前言 分布式锁一般有三种实现方式:1. 数据库乐观锁:2. 基于Redis的分布式锁:3. 基于ZooKeeper的分布式锁.本篇博客将介绍第二种方式,基于Redis实现分布式锁.虽然网上已经有各种介 ...

  4. CSS布局之传统方法

    传统的页面布局依赖于盒模型+流动模型(flow)+浮动模型(float)+层模型(layer)来实现页面的布局,具体方法是通过盒模型+display属性+float属性+position属性来加以实现 ...

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

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

  6. linux第一个C语言和sh脚本

    linux第一个C语言 $ gedit hello_world.c #include <stdio.h> int main(void) { printf("hello world ...

  7. Day04——Python模块

    一.模块简介 模块是实现了某个功能的代码集合,比如几个.py文件可以组成代码集合即模块.其中常见的模块有os模块(系统相关),file模块(文件操作相关) 模块主要分三类: 自定义模块 :所谓自定义模 ...

  8. RabbitMQ 启动

    1.使用Rabbit MQ 管理插件,可以更好的可视化方式查看Rabbit MQ 服务器实例的状态,你可以在命令行中使用下面的命令激活: C:\Program Files\RabbitMQ Serve ...

  9. QT的编译原理

    https://www.cnblogs.com/findumars/p/4948896.html

  10. 合并两个数组 以KEY 作为键

    <?php     $a= array(         array(             'ID'=> 2         ) );   $b= array(         arr ...