一. 鼠标移入移出
写一个当鼠标移入和移出,背景颜色切换的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
//1.鼠标移入移出修改背景颜色
let box = document.querySelector(".box");
//监听鼠标移入移出事件,进行背景颜色切换
box.addEventListener("mouseenter", () => {
box.style.backgroundColor = getRandomColor();
});
box.addEventListener("mouseleave", () => {
box.style.backgroundColor = getRandomColor();
});
//1. 封装函数获取随机的颜色
function getRandomColor() {
// 声明变量
var red = Math.floor(Math.random() * 256);
var green = Math.floor(Math.random() * 256);
var blue = Math.floor(Math.random() * 256);
// 返回字符串
return `rgba(` + red + `,${green},${blue},.6)`;
}
</script>
</body>
</html>
二. 不重复随机数
求取1-50之间的随机数,不可以出现重复。如果不足两位,则在该数字前补足“0”。
要实现随机数不重复,思路为,先声明一个数组,存放需要的随机数,再进行一次for循环,生成所需个数的随机数,将生成的随机数作为数组的索引,取出一个就删除一个,这样就可以让取出的数值不重复。
<script>
//2.1-50的随机数
function fn(num) {
//生成一个长度为50,元素为1~50的数组,并进行缺位加0判断
let arr = [];
for (let i = 1; i < num + 1; i++) {
if (i < 10) {
i = "0" + i;
}
arr.push(i);
}
//循环50次,每一次循环都生成一个随机数作为索引,即arr要删除的元素,删除的元素转入到新数组,形成一个乱序的随机数组
let newArr = [];
for (let i = 0; i < num; i++) {
let random = Math.floor(Math.random() * arr.length);
//虽然随机数会有重复,但生成一个随机数,数组就删除一个,相同的数组索引对应的值不是同一个,所以能够不重复
newArr.push(arr.splice(random, 1)[0]);
}
return newArr;
}
console.log(fn(50));
</script>
三. 手写字符串反转方法
可以采用倒序循环,从末尾遍历字符串,再添加到临时字符串中;或者采用以下正序遍历方法。
<script>
//4.字符串反转
let str = "abcde1234";
function str_reserve(str) {
let temp = "";
for (let i = 0; i < str.length; i++) {
temp += str[str.length - 1 - i];
}
return temp;
}
console.log(str_reserve(str));//4321edcba
</script>
四. 字符串大写格式化
将字符串open_my_door这种形式,转成OpenMyDoor的形式。
该类型字符串按下划线隔开,组件使用字符串split方法,分割字符串转成数组,再遍历该数组,提取其首位字母大写,再删除掉原数组的第一个字母,最后添加到临时字符串中并返回即可。
<script>
//5.字符串转格式
let str = "open_my_door";
function fn1(str) {
let strArr = str.split("_");//字符串分割转成数组
let temp = "";
for (let i = 0; i < strArr.length; i++) {
let Upper = strArr[i][0].toUpperCase();//选取数组第一个元素的第一个字母
let nowStr = Upper + strArr[i].slice(1);//将原数组的第一个字母删除
// console.log(nowStr);
temp += nowStr;
}
return temp;
}
console.log(fn1(str));
</script>
五. 数组去重
最简单方法是使用set数据结构,以下是采用单层循环的复古写法,需要注意的是,数组去重前最好先使用sort( )排序,以及数组删除重复元素的索引值减一。
<script>
function fn2(list) {
console.log(list.sort());
for (let i = 0; i < list.sort().length; i++) {
if (list[i] == list[i + 1]) {
list.splice(i, 1);
i--;
}
}
return list;
}
console.log(fn2([1, 2, 3, 1, 1]));
</script>
第一轮循环,对比 list [0] 和 list [1] ,两者重复,删除 list [0],数组长度减少,变成四个长度,如果索引值不减一,那么下一轮循环就是 list [1] 对比 list [2] ,也就是1对比2,最开始的1就被忽略掉了,导致去重失败,所以这些细节必须多多注意