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小技巧,他们往往在我们的日 ...
随机推荐
- 20个实用javascript技巧及实践（二）
21. 使用逻辑AND/OR来处理条件语句 var foo =10; foo ==10&& doSomething();// is the same thing as if (foo ...
- Bzoj3510：首都
Sol \(LCT\)动态维护树重心 方法一 因为只有加边,所以可以暴力启发式合并,维护重心 维护子树信息,子树大小不超过一半 复杂度两只\(log\) 方法二 扣出两个重心的链,链上二分找 每次\( ...
- [国家集训队2012]middle(陈立杰)
我是萌萌的传送门 我是另一个萌萌的传送门 脑残错误毁一下午…… 其实题解早就烂大街了,然而很久之前我只知道是二分答案+主席树却想不出来这俩玩意儿怎么一块儿用的……今天又翻了几篇题解才恍然大悟,是把权值 ...
- content-box跟border-box的区别
content-box: padding和border不被包含在定义的width和height之内.对象的实际宽度等于设置的width值和border.padding之和,即 ( Element wi ...
- Windows静态库和动态库的创建和使用
偶们在实际的编程开发中,经常会遇到运行时无法找到某个DLL文件或者链接时无法找到某个LIB文件.然后,我们就开始乱GOOGLE一下,然后将VS2005的设置改变一下,或许就Ok了,我们将别人开发的DL ...
- SVN常用功能介绍(二)
说明 上一章节主要描述了SVN的简介.安装搭建,和项目管理人员对SVN的常用操作. 这章主要讲解,SVN对应角色组员,在实际运用中的常用操作. 将SVN服务器项目导入到开发组员的本地电脑里 方式一: ...
- ArrayBlockingQueue详解
转自:https://blog.csdn.net/qq_23359777/article/details/70146778 1.介绍 ArrayBlockingQueue是一个阻塞式的队列,继承自Ab ...
- 批量检查多个网址是否正常（shell编程）
#!/bin/bash #version 1.1 #by zengj #using checking urls . /etc/init.d/functions checkurl() { wget -o ...
- Steeltoe
谈谈Circuit Breaker在.NET Core中的简单应用 http://www.cnblogs.com/catcher1994/p/8975192.html 前言 由于微服务的盛行,不少公司 ...
- Python切片(入门7)
转载请标明出处: http://www.cnblogs.com/why168888/p/6407977.html 本文出自:[Edwin博客园] Python切片 1. 对list进行切片 L = r ...