css+html+javascript(2019/7/4-7/1
2019-11-30 本文已影响0人
洛音轩
按时间排序
用css实现到处图标
2019.07.05
效果如下：
import.png
代码如下：
/dom代码/
<div id="wrapper">
<div class="main">
<div class="tran">
</div>
</div>
<div class="san">
<div class="trggle"></div>
<div class="white"></div>
</div>
<div class="circle">
<div class="lcircle"></div>
<div class="scircle"></div>
</div>
</div>
/css代码/
.main {
position: relative;
border: 15px solid black;
width: 100px;
height: 80px;
margin: 100px 0 0 0;
}
.main .tran {
position: absolute;
top: -105px;
left: 10px;
width: 100px;
height: 110px;
background: #fff;
transform-origin: bottom left;
transform: rotatez(45deg);
}
.trggle {
position: absolute;
width: 0;
height: 0;
left: 102px;
top: 71px;
border: 44px solid #000;
border-bottom-color: transparent;
border-top-color: transparent;
border-right-color: transparent;
z-index: 30;
}
.white {
position: absolute;
width: 2px;
height: 39px;
top: 0;
left: -1px;
background: #fff;
}
.circle {
position: relative;
top: -111px;
left: 17px;
background-color: #eeddaa;
z-index: 10;
}
.lcircle {
position: absolute;
top: 0;
left: 5px;
width: 80px;
height: 80px;
border-radius: 100% 0% 70% 0%;
background-color: #000;
z-index: 10;
}
.scircle {
position: absolute;
top: 30px;
left: 0px;
width: 100px;
height: 50px;
border-radius: 100% 0% 70% 0%;
background-color: #fff;
z-index: 10;
}
小米商城静态页面
效果如下：
mi.png
八卦和flex布局
2019.07.06
效果如下：
bagutu.gif
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
html {
height: 100%;
}
body {
height: 100%;
background-color: yellow;
}
.bagr {
width: 200px;
height: 100px;
background: #000;
border-bottom: 100px solid red;
border-radius: 50% 50%;
}
.sbagr {
position: absolute;
float: left;
top: 50px;
left: 0px;
width: 100px;
height: 100px;
background: #000;
border-radius: 50% 50%;
}
.sbagr span {
display: block;
position: absolute;
top: 40px;
left: 40px;
width: 20px;
height: 20px;
background: red;
border-radius: 50% 50%;
}
.sbagr-reverse {
position: absolute;
top: 50px;
left: 100px;
width: 100px;
height: 100px;
background: red;
border-radius: 50% 50%;
}
.sbagr-reverse span {
display: block;
position: absolute;
top: 40px;
left: 40px;
width: 20px;
height: 20px;
background: #000;
border-radius: 50% 50%;
}
/* .taij:hover {
transform-origin: 100px 100px;
transform: rotatez(360deg);
transition: transform 1s ease;
}
.taij {
transform-origin: 100px 100px;
transform: rotatez(0deg);
transition: transform 1s ease;
}
*/
.taij {
position: relative;
width: 200px;
animation: sp 1s linear infinite normal;
}
@keyframes sp {
from {
transform-origin: 100px 100px;
transform: rotatez(0deg);
}
to {
transform-origin: 100px 100px;
transform: rotatez(360deg);
}
}
.fa {
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
align-items: center;
}
.font {
position: absolute;
color: #000;
width: 226px;
font-size: 52px;
line-height: 63px;
text-align: center;
height: 195px;
top: 90px;
}
</style>
</head>
<body>
<div class="fa">
<div class="font">
唯我独尊
</div>
<div class="taij">
<div class="bagr"></div>
<div class="sbagr-reverse"><span></span></div>
<div class="sbagr"><span></span></div>
</div>
</div>
</body>
</html>
flex布局
flex属性
使用 display:flex;/行级元素flex布局display:inline-flex;/浏览器兼容display:-webkit-flex;
基本概念：flex container, flex item, main axis, cross axis, main start, main end, cross start, cross end, main size, cross size
容器属性：
flex-direction: row|row-reverse|column|column-reverse;//布局排列方向
flex-wrap: nowrap|wrap|wrap-reverse;//布局是否换行
flex-flow: <flex-direction> || <flex-wrap>;//方向，换行
justify-content: flex-start|flex-end|center|space-between|space-around;//主轴对其方式
align-items:flex-start|flex-end|center|baseline|stretch;//交叉轴对其方式
align-content:flex-start|flex-end|center|space-between|space-around|stretch;
子项属性：
order:int;//项目排列顺序，数字越小，越排在前面，默认值为0
flex-grow:number;//定义子项放大倍数，默认为0，即使存在剩余空间也不放大，如果子项都为1，它们将等分剩余空间
flex-shrink:number;//定义子项缩小倍数，默认为1，如果剩余空间不足，该项目将缩小，如果都为1，整体缩小，如果有一项为0的话，除此项外，整体缩小。
flex-basis:px;//在分配空间前，项目占的主轴空间，默认值为auto，自己可以设置占据固定空间。
flex：0 1||auto;//是flex-grow，flex-shrink和flex-basis的简写，后两个属性可选，该属性有两个快捷值auto,none/1 1 autuo, 0 0 auto;
align-self: auto|flex-start|flex-end|center|space-between|space-around;允许单个项目有与其他项目不同的对其方式。
2019.07.08
封装type方法
- 方法一 原生方法
function isType(type) {
return function(target) {
function getType(str) {
if (str === null) {
return "null";
} else {
if (typeof str == "object") {
if (str instanceof Array) {
return "array";
} else {
return "object";
}
} else {
return typeof str;
}
}
}
}
}
- 方法二 利用Object.prototype.toString.call()方法
function isType(type) {
return function(target) {
return Object.prototype.toString.call(target === "[object " + type + "]" ? true : false;
}
}
方法调用：
var isArray = isType("Array"),
isNull = isType("Null"),
isUndefined = isType("Undefined"),
isArray = isType("Array"),
isNumber = isType("Number"),
isString = isType("String"),
isBoolean = isType("Boolean"),
isSymbol = isType("Symbol"),
isFunction = isType("Function"),
isObj = isType("Object")，
utils = {
isNull,
isUndefined,
isArray,
isNumber,
isString,
isBoolean,
isSymbol,
isFunction,
isObj
};
console.log(utils.isArray([]));
使用flex布局实现色子的单面布局+transform实现色子的拼装运动
2019.07.09
效果如下：
shaizi-1.png
shaizi-2.png
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
html,
body {
height: 100%;
width: 100%;
}
.dice {
position: relative;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.dice .side {
position: absolute;
opacity: .9;
width: 210px;
height: 210px;
padding: 4px;
background-color: #e7e7e7;
object-fit: contain;
box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7;
border-radius: 10%;
}
.span {
width: 60px;
height: 60px;
border-radius: 50% 50%;
background: #333;
margin: 4px;
box-shadow: inset 0 3px #111, inset 0 -3px #555;
}
.one .span {
background: red;
box-shadow: inset 0 3px rgb(223, 47, 47), inset 0 -3px rgb(211, 9, 9);
}
.forth .span {
background: red;
box-shadow: inset 0 3px rgb(223, 47, 47), inset 0 -3px rgb(211, 9, 9);
}
.one {
display: flex;
justify-content: center;
align-items: center;
}
.two {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.two div:nth-child(2) {
align-self: flex-end;
}
.three {
display: flex;
justify-content: space-between;
}
.three div:nth-child(2) {
align-self: center;
}
.three div:nth-child(3) {
align-self: flex-end;
}
.forth {
display: flex;
justify-content: space-between;
}
.forth .fa {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.five {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.five .fa {
display: flex;
justify-content: space-between;
}
.five div:nth-child(2) {
align-self: center;
}
.six {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.six .fa {
display: flex;
justify-content: space-between;
}
.dice {
transform-style: preserve-3d;
transform-origin: center;
animation: spin 2s linear infinite;
}
@keyframes spin {
from {
transform: rotate3d(1, 1, 1, 0deg);
}
to {
transform: rotate3d(1, 1, 1, 360deg)
}
}
.one {
top: 218px;
left: 436px;
transform-origin: left;
transform: rotateY(90deg);
/* transform: rotateX(45deg); */
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e570e7+0,c85ec7+47,a849a3+100;Pink+3D+%233 */
background: #e570e7;
/* Old browsers */
background: -moz-linear-gradient(top, #e570e7 0%, #c85ec7 47%, #a849a3 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #e570e7 0%, #c85ec7 47%, #a849a3 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #e570e7 0%, #c85ec7 47%, #a849a3 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#e570e7', endColorstr='#a849a3', GradientType=0);
/* IE6-9 */
}
.two {
top: 218px;
left: 218px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fcecfc+0,fba6e1+50,fd89d7+51,ff7cd8+100;Pink+Gloss+%232 */
background: #fcecfc;
/* Old browsers */
background: -moz-linear-gradient(top, #fcecfc 0%, #fba6e1 50%, #fd89d7 51%, #ff7cd8 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #fcecfc 0%, #fba6e1 50%, #fd89d7 51%, #ff7cd8 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #fcecfc 0%, #fba6e1 50%, #fd89d7 51%, #ff7cd8 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#fcecfc', endColorstr='#ff7cd8', GradientType=0);
/* IE6-9 */
}
.three {
top: 436px;
left: 218px;
transform-origin: top;
transform: rotateX(-90deg);
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#feccb1+0,f17432+50,ea5507+51,fb955e+100;Red+Gloss+%232 */
background: #feccb1;
/* Old browsers */
background: -moz-linear-gradient(top, #feccb1 0%, #f17432 50%, #ea5507 51%, #fb955e 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #feccb1 0%, #f17432 50%, #ea5507 51%, #fb955e 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #feccb1 0%, #f17432 50%, #ea5507 51%, #fb955e 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#feccb1', endColorstr='#fb955e', GradientType=0);
/* IE6-9 */
}
.forth {
top: 0;
left: 218px;
transform-origin: bottom;
transform: rotateX(90deg);
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#aebcbf+0,6e7774+50,0a0e0a+51,0a0809+100;Black+Gloss */
background: #aebcbf;
/* Old browsers */
background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809', GradientType=0);
/* IE6-9 */
}
.five {
top: 218px;
left: 218px;
transform: translateZ(-218px) rotateX(180deg);
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3b679e+0,2b88d9+50,207cca+51,7db9e8+100;Blue+Gloss+%232 */
background: #3b679e;
/* Old browsers */
background: -moz-linear-gradient(top, #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8', GradientType=0);
/* IE6-9 */
}
.six {
left: 0;
top: 218px;
transform-origin: right;
transform: rotateY(-90deg);
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e6f0a3+0,d2e638+50,c3d825+51,dbf043+100;Green+Gloss+%232 */
background: #e6f0a3;
/* Old browsers */
background: -moz-linear-gradient(top, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043', GradientType=0);
/* IE6-9 */
}
div {
/* perspective: 600px; */
}
</style>
</head>
<body>
<div class="dice">
<div class="one side">
<div class="span"></div>
</div>
<div class="two side">
<div class="span"></div>
<div class="span"></div>
</div>
<div class="three side">
<div class="span"></div>
<div class="span"></div>
<div class="span"></div>
</div>
<div class="forth side">
<div class="fa">
<div class="span"></div>
<div class="span"></div>
</div>
<div class="fa">
<div class="span"></div>
<div class="span"></div>
</div>
</div>
<div class="five side">
<div class="fa">
<div class="span"></div>
<div class="span"></div>
</div>
<div class="fa">
<div class="span"></div>
</div>
<div class="fa">
<div class="span"></div>
<div class="span"></div>
</div>
</div>
<div class="six side">
<div class="fa">
<div class="span"></div>
<div class="span"></div>
</div>
<div class="fa">
<div class="span"></div>
<div class="span"></div>
</div>
<div class="fa">
<div class="span"></div>
<div class="span"></div>
</div>
</div>
</div>
<script>
var oDice = document.getElementsByClassName('dice')[0];
oDice.onmouseover = function() {
console.log('over');
var oOne = document.getElementsByClassName('one')[0];
oOne.style = "left: 536px";
var oTwo = document.getElementsByClassName('two')[0];
oTwo.style = "transform: translateZ(100px) ";
var oThree = document.getElementsByClassName('three')[0];
oThree.style = "top: 536px";
var oForth = document.getElementsByClassName('forth')[0];
oForth.style = "top: -100px";
var oFive = document.getElementsByClassName('five')[0];
oFive.style = "transform: translateZ(-318px) rotateX(180deg)";
var oSix = document.getElementsByClassName('six')[0];
oSix.style = "left: -100px";
}
oDice.onmouseleave = function() {
console.log('leave');
var oOne = document.getElementsByClassName('one')[0];
oOne.style = "left: 436px";
var oTwo = document.getElementsByClassName('two')[0];
oTwo.style = "transform: translateZ(0)";
var oThree = document.getElementsByClassName('three')[0];
oThree.style = "top: 436px";
var oForth = document.getElementsByClassName('forth')[0];
oForth.style = "top: 0px";
var oFive = document.getElementsByClassName('five')[0];
oFive.style = "transform: translateZ(-218px) rotateX(180deg)";
var oSix = document.getElementsByClassName('six')[0];
oSix.style = "left: 0px";
}
</script>
</body>
</html>
new，instance，deepClone
2019.07.10
new
通过new创建对象四个步骤
- 创建一个新对象；var o = {};
- 将构造函数的作用域赋给新对象（因此this指向了这个新对象），[Person.apply(o)][person原来指向的是Window]
- 执行构造函数中的代码（为这个新对象增加属性）
- 返回新对象
创建new函数
let New = function(p) {
let o = {};
let arg = Array.prototype.slice.call(arguments, 1);
console.log(arg);
o.__proto__ = p.prototype;
p.prototype.constructor = p;
p.apply(o, arg);
return o;
}
New(Person, "byron", 22, "programmer");//调用
//代码执行优先级由高到低：小括号(xxx) > 属性访问. > new foo() > foo()
创建instance（a,b）方法，判断a是b的实例
function instance(instc, constructor) {
let proto = instc.__proto__;
let prototype = constructor.prototype;
while (true) {
if (proto === prototype) {
return true;
}
if (proto === null) {
return false;
}
proto = proto.__proto__;
}
}
console.log(instance([], Array));//true
创建deepClone实现深度克隆
function deepCopy(src, tar) {
var tar = tar || {};
for (var prop in src) {
if (typeof(src[prop]) == 'object') {
tar[prop] = (src[prop].constructor === Array) ? [] : {};
deepCopy(src[prop], tar[prop]);
} else {
tar[prop] = src[prop];
}
}
return tar;
}
dom操作方法
2019.07.10
dom结点遍历，增删改查
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- <div>
<div id="name">
id
</div>
</div>
<div>
<div class="tag" style="width: 40px; height:20px;">
tag 注释
<div class="nodeclass"></div>
</div>
</div>
<div>
<div class="qu" attr="querySelector"></div>
</div>
<div></div>
<div></div>
<div class="father">
<div class="son">1</div>
<div class="son">2</div>
<div class="son">3</div>
</div> -->
<script>
// var oName = document.getElementById("name"); //ie8一下区分id的大小写，而且也返回name属性的元素
// console.log(oName);
// var oDiv = document.getElementsByTagName("div");
// console.log(oDiv);
// var oClass = document.getElementsByClassName("tag"); //ie8及以下版本中没有
// console.log(oClass);
// var oQuerySelect = document.querySelector("[attr]"); //ie及以下不支持,参数可以为 "div .tag #id [attr]"等css选择器
// console.log(oQuerySelect);
// var a = document.getElementsByClassName("nodeclass")[0];
// 元素节点 nodeType()查看 1 元素节点，2属性节点, 3文本节点，8注释节点，9document，12DocumentFragment;
// 遍历节点树
// parentNode（父节点）、childNodes(子节点们）、 firstChild(第一个子节点)、lastChild(最后一个子节点);
// nextSibling 、 previousSibling 前一个兄弟节点
// parentElement（父元素节点 ie不兼容）children(只返回元素节点)、nodeChildElementCount === node.children.length(子元素节点的个数)（ie不兼容）;
// firstElementChild 返回的是第一个元素节点（ie不兼容）
// lastElementChild 返回的是最后一个元素节点（ie不兼容）
// nextElementSibling\previousElementSibling(ie不兼容)
//nodeName,nodeValue,attributes,Node.hasChildNodes(是否有孩子节点)
// 遍历元素节点树
// 增
// document.createElement();
// document.createTextNode();
// document.createComment();
// var a = document.createDocumentFragment();
// var odiv = document.createElement("div");
// odiv.innerHTML = "<div>dododddd</div>";
// document.body.appendChild(odiv);
// oName.appendChild(odiv);
// 插
// PARENTNODE.appendChild();
// PARENTNODE.insertBefore(a, b):
// 删
// parent.removeChild();
// 替换
// parent.replaceChild(new, origin);
// innerHtml,innerText(火狐不兼容)/textContent(ie6以下不好用)
// ele.setAttribute(),ele.getAttribute();
// 绑定事件
// 1.ele.onxx = function(){} ele.onXX = false/""/null
// 2.obj.addEventListener(type,fn,false);//IE9以下不兼容，可以为一个事件绑定多个处理程序.obj.removeEventListener
var addEventListener = document.createElement("div");
addEventListener.innerText = "用addEventListener绑定事件";
addEventListener.className = "addEventListener";
addEventListener.style = "background:red";
addEventListener.style = "display:inline-block;";
addEventListener.addEventListener("mouseover", function() {
addEventListener.style = "width:200px;height:100px;background:red;"
}, false);
addEventListener.addEventListener("mouseleave", function() {
addEventListener.style = "";
}, false);
document.body.appendChild(addEventListener);
// 3.obj.attachEvent(‘on’ + type, fn);//IE独有，一个事件同样可以绑定多个处理程序.this指向window,obj.detachEvent
// window.load = function() { currentStyle
// addEventListener.attachEvent("onclick", function() {
// console.log("addEventListener click");
// });
// }
// addEventListener.attachEvent("onmouseup", function() {
// console.log("addEventListener up")
// })
// 事件处理模型，事件冒泡，事件捕获 出发顺序，先捕获后冒泡
// focus blur change submit reset select等事件不冒泡
// 取消冒泡事件
// w3c event.stopPropagation(); i9以下不支持
// ie event.cancelBubble = true;
// 阻止默认事件（像 a标签跳转，表单提交，右键菜单
// 1.return false;(以对象方式注册的事件才生效)
// 2.event.preventDefault(); w3c i9以下不支持
// 3.event.returnValue = false; ie
// 事件源对象
// event||window.event;用于ie
// event.target 火狐
// event.srcElement ie
// 这两个chrome都支持
// 事件委托
// 利用事件冒泡和事件源对象进行处理
// 优点：1.性能2.灵活.
// 鼠标事件分类
// 点击事件，左右键事件event.button
// DOM3标准规定:click事件只能监听左键,只能通过mousedown 和 mouseup来判断鼠标键
// var key = false;
// var firstTime = 0;
// var lastTime = 0;
// addEventListener.onclick = function() {
// if (key) {
// console.log('click');
// key = false;
// }
// }
// addEventListener.onmousedown = function() {
// firstTime = new Date().getTime();
// console.log('mouseDown');
// }
// addEventListener.onmouseup = function() {
// console.log('mouseUp');
// lastTime = new Date().getTime();
// if ((lastTime - firstTime) < 200) {
// key = true;
// }
// }
</script>
</body>
</html>
事件绑定，兼容性问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html,
body {
width: 100%;
height: 100%;
}
.father {
display: flex;
flex: 1;
height: 200px;
width: 100%;
}
.son {
height: 100%;
width: 100%;
}
.son:nth-child(1) {
background-color: red;
}
.son:nth-child(2) {
background-color: green;
}
.son:nth-child(3) {
background-color: gray;
}
</style>
</head>
<body>
<div class="father">
<div class="son">button1</div>
<div class="son">button2</div>
<div class="son">button3</div>
</div>
<script>
var f = document.querySelector(".father");
f.onclick = function(e) {
console.log("father");
}
var s1 = document.querySelector(".son");
var s2 = s1.nextElementSibling;
s1.onclick = function(e) {
console.log(e);
console.log("s1");
}
// 方法二
// let b1 = document.querySelector(".son");
// b1.addEventListener("click", event1, false);
// function event1(e) {
// console.log(b1);
// alert("我是 " + e.target.innerText);
// }
// let b2 = document.querySelectorAll(".son")[1];
// b2.addEventListener("click", event2, false);
// function event2(e) {
// alert("我是 " + e.target.innerText);
// b1.removeEventListener("click", event1, false);
// }
</script>
</body>
</html>
