JavaScript小练习3-用循环使三个DIV变色
题目
初始为黑色，点击后为红色，再次点击为黑色，以后每次点击一次变色。
分析
- 简单的onclick使用。
- button的居中可以在外套一个p元素，body中让p居中即可。
- 三个DIV块的居中，使用margin和width，注意margin的上下会重叠，但左右不重叠。
- 实现多次点击变色，需要进行判断原色，注意一般的方法（ele.style./cssText）只能读取和修改内联样式，故第一次点击时无法访问到样式表中的黑色值。这里使用switch中的default解决。
效果&代码
效果：循环使DIV变色
F12查看代码。
JavaScript小练习3-用循环使三个DIV变色的更多相关文章
- 用循环将三个DIV变成红色
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS笔记 - fgm练习 - 三个div变色 - CSS div等分布局
<title>三个div变红</title> <style> *{margin: 0; padding: 0} body{ text-align: center; ...
- javascript小实例，实现99乘法表及隔行变色
人生短暂,废话不多说,直奔主题! 这个小实例的要求: 实现在页面中输出99乘法表.(要求:以每三行为一组,实现隔行变色(颜色为白,红,黄(也可自己定义)),鼠标滑过每一行,行背景颜色变为蓝色,鼠标离开 ...
- python小练习：使用循环和函数实现一个摇骰子小游戏。游戏规则如下：游戏开始，首先玩家选择Big or Small（押大小），选择完成后开始摇三个骰子，计算总值，11<=总值<=18为“大”，3<=总值<=10为“小”。然后告诉玩家猜对或者是猜错的结果。
python小练习:使用循环和函数实现一个摇骰子小游戏.游戏规则如下:游戏开始,首先玩家选择Big or Small(押大小),选择完成后开始摇三个骰子,计算总值,11<=总值<=18为“ ...
- Javascript 小技能
/* @@截取字符串长度,汉字算2个字符 @@return [string]+'...' */ var subString = function(str, len) { var newLen ...
- 12个非常实用的JavaScript小技巧
在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是 ...
- Javascript并发模型和事件循环
Javascript并发模型和事件循环 JavaScript的"并发模型"是基于事件循环的,这个并发模型有别于Java的多线程, javascript的并发是单线程的. Javas ...
- 11个不常被提及的JavaScript小技巧
这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是我们又很容易忽略. 1.过滤唯一值 Set类型是在 ES6中新增的,它类似于数组,但 ...
- [转]11个教程中不常被提及的JavaScript小技巧
原文地址: https://www.cnblogs.com/ld1024/p/10723827.html 这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日 ...
随机推荐
- IE6 行内定义成块元素后高度失效
问题描述: ie6下,空标签块元素height定义失效,表现为除设置的height值外还会显示N像素额外的高度. 实际运用中,若标签为空且定义了小于14px的高度,再加入一背景图的话,会发现该元素高度 ...
- COGS 有标号的二分图计数系列
其实这三道题都是不错的……(虽然感觉第三题略套路了……) 分别写一下做法好了…… COGS2392 有标号的二分图计数 I 这个就很简单了,Noip难度. 显然可以直接认为黑点和白点分别位于二分图两侧 ...
- Canvas中的save方法和restore方法
初学者也许会误认为canvas中save方法是用来保存绘图状态的图形,而restore方法是用来还原之前保存的绘图状态的图形,其实不然. save():保存当前的绘图状态. restore():恢复之 ...
- git日常使用
git强制回滚指定版本git reset --hard xxx(版本名) git强制推送git push -f remote(远程地址) branch(远程分支) 查看远程分支 git branch ...
- vs生成的exe程序和相关dll打包
原文:http://blog.csdn.net/yhhyhhyhhyhh/article/details/50782897 打包工具:Inno Setup 编译器 源文件 :vs生成的.exe和 ...
- tcp-full.cc
ns2--tcp-full.cc /* -*- Mode:C++; c-basic-offset:8; tab-width:8; indent-tabs-mode:t -*- */ /* * Copy ...
- 查询组成员（group)
查询组成员 $groupname = "groupname" $members = (get-adgroup $groupname -properties member).memb ...
- Docker_1 安装Docker-CE
安装 免sudo运行docker命令 ustc mirrors service failed 安装 Docker-CE 安装过程参考官网,Ubuntu中如下: ## 1. 从仓库安装 $ sudo a ...
- Python学习---重点模块之shelve
简单示例 import shelve f = shelve.open(r'shelve.txt') f['info'] = {'name':'ftl', 'age':23, 'sex': 'male' ...
- 实验 MPLS LDP配置
实验 MPLS LDP配置 一.学习目的 掌握启用和关闭MPLS的方法 掌握启用和关闭MPLS LDP配置方法 掌握使用MPLS LDP配置LSP的方法 二.拓扑图 三.场景 你是公司的网管员,公司的 ...