题目

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

分析

  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. 2-4 Sass的函数功能-颜色函数

    RGB颜色函数-RGB()颜色函数 在 Sass 的官方文档中,列出了 Sass 的颜色函数清单,从大的方面主要分为 RGB , HSL 和 Opacity 三大函数,当然其还包括一些其他的颜色函数, ...

  2. 解决Maven 报 Return code is: 400 , ReasonPhrase:Repository version policy: SNAPSHOT does not allow version: 2.1.0.RELEASE. 的错误

    最近在搭建公司的基础框架,业务需求用到elasticsearch,所以需要整合到基础框架里,供各业务线使用同时也便于管理,但在整合的过程中,出现了莫名的问题,同时maven的提示也不够明确. 我的版本 ...

  3. keras 联合训练

    转自: https://blog.csdn.net/Yan_Joy/article/details/62235704

  4. silverlight generic.xaml 包含中文 编译错误的问题

    发现我在一个dll工程里面新建一个xaml文件起名成generic.xaml 如果这个xaml里面存在中文则会编译错误,发现这样建立的xaml使用的是gb2312编码 果断文件-另存为-编码另存为 u ...

  5. 微信小程序——小程序的能力

    小程序启动 通过app.json里pages字段可以获得页面路径,而写在 pages 字段的第一个页面就是这个小程序的首页(打开小程序看到的第一个页面),就像下面的代码中,小程序启动后的第一个页面就是 ...

  6. 微软Azure虚拟机备份服务在中国发布

    近期,Azure虚拟机备份服务在微软智能云上发布. 相关功能阐述: Azure IaaS虚拟机备份服务针对Windows操作系统,提供了应用一致性的备份技术:同时针对Linux操作系统,提供了文件系统 ...

  7. golang rest api example

    package main import ( "net/http" "github.com/gin-gonic/gin" "github.com/jin ...

  8. Oracle物化视图详解

    现实工作中会有多个数据源同步到一个数据库完成数据分析的场景,这些数据可以不是实时同步的,我们一般通过定时任务抽取数据到统计分析库给应用使用. 一般的同步方式可以通过时间戳做全量和增量数据同步(存在原数 ...

  9. GPDB 5.x PSQL Quick Reference

    General \copyright show PostgreSQL usage and distribution terms \g [FILE] or ; execute query (and se ...

  10. 四、CentOS 安装mariadb——Linux学习笔记

    A)安装及配置 下载mariadb: yum -y install mariadb-server mariadb 开启mariadb服务: systemctl start mariadb.servic ...