<!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>
/* css3动画 */
.outerbox {
width: 200px;
height: 100px;
background: #ccc;
overflow: hidden;
text-align: center;
}
a {
position: relative;
display: block;
width: 100%;
height: 100%;
color: #fff;
}
a::after {
position: absolute;
content: '';
width: 110%;
height: 0;
top: 50%;
left: 50%;
opacity: 0;
background-color: rgba(0, 0, 0, .15);
transform: translateX(-50%) translateY(-50%) rotate(45deg);
transition: all .3s ease-in-out;
}
a:hover::after {
opacity: 1;
height: 310%;
}
/* css3形状 */
.shape {
background: #541616;
color: #fff;
box-shadow: inset 10px -10px 20px -8px rgba(255, 0, 0, 0.9);
}
.shape div:first-child {
position: relative;
width: 100%;
height: 20px;
border-left: 1px solid red;
}
.shape div:first-child::before,
.shape div:first-child::after {
content: "";
display: block;
width: 50%;
height: calc(100% - 1px);
}
.shape div:first-child::before {
position: absolute;
top: 0;
left: 0;
border-top: 1px solid red;
border-right: 1px solid red;
transform: translateX(-10px) skewX(45deg);
box-shadow: inset 0 9px 11px -3px rgba(255, 0, 0, 0.5);
}
.shape div:first-child::after {
position: absolute;
top: 0;
right: 0;
border-bottom: 1px solid red;
transform: translateX(-10px) skewX(45deg);
box-shadow: -10px 4px 10px 2px rgba(255, 0, 0, 0.5);
}
.shape div:nth-of-type(2) {
height: calc(100% - 21px);
border-right: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red;
box-shadow: inset -10px -4px 11px -5px rgba(255, 0, 0, 0.5)
}
.shape2 {
position: relative;
cursor: not-allowed;
}
.shape2 div:not(:last-child) {
position: absolute;
}
.shape2 div:nth-of-type(1),
.shape2 div:nth-of-type(3) {
width: 2px;
height: 0;
background: #541616;
transition: all .3s;
}
.shape2 div:nth-of-type(3) {
right: 0;
bottom: 0;
}
.shape2 div:nth-of-type(2),
.shape2 div:nth-of-type(4) {
width: 0;
height: 2px;
background: #541616;
transition: all .3s;
}
.shape2 div:nth-of-type(4) {
bottom: 0;
right: 0;
}
.shape2:hover div:nth-of-type(1),
.shape2:hover div:nth-of-type(3) {
height: 100%
}
.shape2:hover div:nth-of-type(2),
.shape2:hover div:nth-of-type(4) {
width: 100%
}
dialog {
width: 300px;
height: 300px;
line-height: 300px;
text-align: center;
border-radius: 20px;
border: none;
box-shadow: #541616 inset 0 0 20px 2px;
}
dialog::backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.8);
}
.shape3 {
position: relative;
cursor: pointer;
}
.shape3 .video {
position: relative;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
transition: all .3s;
margin-left: -40px;
margin-top: -40px;
opacity: 0;
transform: scale(0);
}
.shape3:hover .video {
opacity: 1;
transform: scale(1.2);
}
.shape3 .circle {
width: 70px;
height: 70px;
border: 2px solid #fff;
background: transparent;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.shape3 .group {
position: absolute;
width: 50px;
height: 50px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.shape3 .group div {
position: absolute;
top: 25%;
left: 50%;
width: 25px;
height: 10px;
border-radius: 50%;
background: #fff;
transform-origin: top left;
z-index: 1000;
}
.shape3 .group::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
content: "";
display: block;
width: 15px;
height: 15px;
border-radius: 50%;
background: #fff;
z-index: 1000;
}
.shape3 .group div:nth-child(1) {
transform: translate(-1px, 0px) rotate(87deg);
}
.shape3 .group div:nth-child(2) {
transform: translate(-34px, 5px) rotate(-151deg);
transform-origin: top right;
}
.shape3 .group div:nth-child(3) {
transform: translate(-13px, 6px) rotate(-36deg);
transform-origin: top right;
}
</style>
</head>
<body>
<div class="outerbox">
<a href="#">好嗨哟</a>
</div>
<hr>
<div class="outerbox shape">
<div></div>
<div>好嗨哟</div>
</div>
<hr>
<div class="outerbox shape2">
<div></div>
<div></div>
<div></div>
<div></div>
<div>好嗨哟</div>
</div>
<hr>
<button>秀儿是你吗!</button>
<dialog>
this me
<button>好嗨哟!</button>
</dialog>
<div class="outerbox shape3">
<div class="video">
<div class="group">
<div></div>
<div></div>
<div></div>
</div>
<div class="circle"></div>
</div>
<div>好嗨哟</div>
</div>
<hr>
<hr>
</body>
<script>
console.warn('----------------js原生对话框-------------------------------------------')
document.querySelectorAll('button')[0].addEventListener('click', () => {
// document.querySelector('dialog').show()
document.querySelector('dialog').showModal();
})
document.querySelectorAll('button')[1].addEventListener('click', () => {
document.querySelector('dialog').close()
})
console.warn('----------------js数组一些操作方法-------------------------------------------')
var arr1 = [1, 2, 34, 5, 656, 32, 3423]
var arr2 = [1, 2, 34, 5, 656, 32, 3423]
// 数组无害操作
// 从数组中查找元素
console.log(arr1.find(el => el === 34))
// 从数组中查找元素是否存在true false
console.log(arr1.includes(4))
// 从数组中查找元素的索引
console.log(arr1.findIndex(el => el === 34))
// 从数组中查找元素的索引
console.log(arr1.indexOf(34))
// 从数组中过滤出数组
console.log(arr1.filter(el => el === 34))
// 从数组中重新构造数组
console.log(arr1.map(el => el === 34))
// 从数组中合并新数组
console.log(arr1.concat(arr2))
// 从数组中合并新数组
console.log([...arr1, ...arr2])
// 从数组中复制数组
console.log(arr1.slice(2, ))
// 从数组中构造出字符串
console.log(arr1.join(";"))
// 数组遍历操作
console.log(arr1.forEach(el => {
return console.log(el)
}))
// 数组有害操作
// 数组反向操作
console.log(arr1.reverse())
// 数组正序操作
console.log(arr1.sort((a, b) => a - b))
// 数组截取第一个元素
console.log(arr1.shift())
// 数组截取最后一个元素
console.log(arr1.pop())
// 数组开头追加元素
console.log(arr1.unshift(5))
// 数组末尾追加元素
console.log(arr1.push(5))
// 数组截取片段
console.log(arr1.splice(3))
// reduce是也是数组循环操作的一种
// 数组折叠或者称数组注入
// 例如对数组扁平化
console.log([
[0, 1],
[2, 3],
[4, 5]
].reduce((a, b) => {
return a.concat(b)
}))
// 例如对数组对象去重
// 三元运算 + 布尔运算
// 借助obj对象缓存数组的每个对象的去重标识(例如 id)
// 当reduce的传入第二个参数时, 这里的cur第一次是指这个传入的参数 []
// next变成了arr2数组的第一个元素 即{id: 1,name: '小明'}
// 注: 当reduce没有传入第二个参数, 则cur,next 分别是数组的第一个，第二个对象
var arr3 = [{
id: 1,
name: '小明'
}, {
id: 1,
name: '小明'
}, {
id: 1,
name: '小明'
}, {
id: 2,
name: '小毛'
}, {
id: 3,
name: '小狗'
}]
var obj = {}
var arr4 = arr3.reduce((cur, next) => {
obj[next.id] ? '' : obj[next.id] = true && cur.push(next)
return cur;
}, [])
console.log(arr4)
console.warn('----------------js字符串一些操作方法-------------------------------------------')
var str1 = '12test34test56'
// 从字符串中正向查找第一次出现索引
console.log(str1.indexOf(5))
// 从字符串中反向查找第一次出现索引
console.log(str1.lastIndexOf(6))
// 从字符串中分割成数组
console.log(str1.split(''))
// 从字符串中提取子字符串
console.log(str1.substring(2))
// 从字符串中提取字符串
console.log(str1.slice(2))
// 字符串反向操作
console.log(str1.split('').reverse().join(''))
// 字符串替换操作
console.log(str1.replace(/\d{1,}/g, 22222222))
// 正则验证字符串正确性
console.log(/\d/g.test(str1))
// 从字符串中根据正则匹配生成数组
console.log(str1.match(/\d+/g))
console.log(str1)
console.warn('----------------js对象一些操作方法-------------------------------------------')
// 纯洁对象(不带继承任何属性的纯洁对象)
var obj1 = Object.create(null)
// console.log(obj)
// 普通对象
var obj2 = {
a: 1,
b: 2,
c: 3
}
// 从对象中根据key键生成key键的数组
// console.log(Object.keys(obj2))
// proxy代理对象, 也就是对目标对象(普通对象)进行包装
var obj3 = new Proxy({
cc: 2
}, {
get: (target, name) => {
console.log(target) //目标对象 也就是proxy的第一参数
console.log(name) //对象的键
return name in target ? target[name] : 37
},
set: (obj, key, value) => {
console.log(obj) //目标对象 也就是proxy的第一参数
console.log(key) //对象的键
console.log(value) //对象的值
}
})
obj3.a = 1
obj3.b = undefined
// console.log(obj3.a)
// console.log(obj3.b)
// console.log(obj3.c);
</script>
</html>
网友评论