三、网页整屏切换效果 首先画出样式
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.container {
width: 100vw;
height: 100vh;
overflow: hidden;
}
.container li {
width: 100vw;
height: 100vh;
/* transform:translateY(-100vh); */
transition: 1s;
}
</style>
<ul class="container">
<li style="background-color:red;"></li>
<li style="background-color:purple;"></li>
<li style="background-color:blue;"></li>
<li style="background-color:green;"></li>
<li style="background-color:grey;"></li>
</ul>
window.onmousewheel = function (e) { //适配谷歌
let isDown = e.wheelDelta < 0 //wheelDelra值小于0 滚轮向下
change(isDown);
}
let endTime = new Date(); //函数节流
function change(isDown) {
console.log(isDown ? '下' : '上')
if (new Date() - endTime < 500) return console.log('i am busy')
//函数节流 当响应时间小于500ms时 返回i am busy
if (isDown) {
i++
if (i > 3) return //当i的值大于3时 返回
} else {//的值大于3时 返回
i--
if (i < 0) return//当i的值小于0时 返回
}
$('.container li').css('transform', `translateY(-${i*100}vh)`)
//改变li的属性 使其向上移动(i*100)px的距离
}
四、判断一个字符是否以元音结尾(a、o、e、i、u)
function checkEndsWithYY(str) {
// let yylist = ['a', 'o', 'e', 'i', 'u']
// yylist = yylist.concat(yylist.map(r => r.toUpperCase()))
//map方法 遍历数组
// return yylist.some(r => str.endsWith(r.toUpperCase()))
//some方法 查询str是否以元音结尾(包含大小写)
// return yylist.includes(str[str.length - 1].toUpperCase())
//incloudes方法 查询数组的最后一位 是否是元音(包含大小写)
return /[aoeiu]$/i.test(str)
//正则表达式 检查str是否以元音结尾(包含大小写)
}
console.log(checkEndsWithYY('simba'));
console.log(checkEndsWithYY('ace'));
console.log(checkEndsWithYY('robin'));
五、extend()
let obj={
sayHi(){
console.log('hi')
},
sayMorning(){
console.log('morning')
}
}
let zz={
age:20,
eat(){
console.log("吃饭");
}
}
$.extend(obj.sayHi()) //打印“hi”
//将obj里面的所有元素,给$克隆一份
$.extend(obj)
如果是多个参数,则将后面的参数对象里面的元素都给第一个参数克隆一份
// $.extend(obj, zz)