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小技巧,他们往往在我们的日 ...
随机推荐
- MXNet 分布式环境部署
MXNet 分布式环境部署 1. MxNet 分布式介绍 先忽略吧, 回头在填上去 2. 分布式部署方法 假设有两台主机ip地址分别是xxx.xxx.xxx.114 和 xxx.xxx.xxx.111 ...
- RC4 加解密
加密解密都是这一个接口 int Rc4EncryptFile(std::string in_file_path, std::string out_file_path, const char *rc4_ ...
- Android中如何在Eclipse中关联源代码？（图文）
关联源代码 1.删除工程里面的Android Depandencies,删除后会报错,不要理会.看下面 2.添加libs目录下的Android-support-v4.jar包 选中-->右键-- ...
- C# 两个结构相同的类进行赋值
假入两个类A类和B类不有任何继承关系,它们属性名相同,怎么给他们互相赋值呢?下面的方法就可以了. public L SetProperties<T, L>(T t) where L : n ...
- SQL Server ->> Online Index Rebuilding(联机索引重建)
SQL Server的Enterprise Edition是支持联机索引重建的.那么联机索引重建是怎么工作的以及对我们的查询有什么影响呢? 既然是联机,SQL Server保持了现有索引对于用户的可用 ...
- skype for business server2015部署向导启动服务失败
命令行执行start-cspool失败 解决: 1.cmd执行servers.msc打开服务列表,将所有skype服务启动,默认是延迟启动 2.用管理员权限打开cmd,而不是普通权限 重新执行启动服务 ...
- https填坑之旅
Boss说,我们买了个权威证书,不如做全站式的https吧,让用户打开主页就能看到受信任的绿标.于是我们就开始了填坑之旅. [只上主域好不好?] 不好...console会报出一大堆warning因为 ...
- Windows 10 X64 ISO 专业版&家庭版下载与永久激活
好久没有更新博客,算算时间,已经有4年了,好吧,今天突发奇想,想把今天安装Windows 10的过程给记录下来. 2015年的时候,微软就发布了Windows 10,当时正版的Win7.Win8都可以 ...
- 轻松bypass360网站卫士WAFSQL注入防护
随便网上找了一个网站,只是测试一下,没有干非法的事情! code 区域 http://www.py-guanyun.com/CompHonorBig.asp?id=49 code 区域 http:// ...
- mongodb 副本集+分片集群搭建
数据分片节点#192.168.114.26mongod --shardsvr --replSet rsguo --port 2011 --dbpath=/data/mongodb/guo --logp ...