1.字符串的方法（search;match;replace)
1.search
语法：字符串.search(正则)
找到：返回第一次出现的小标
没找到：返回-1
1. search
const reg = /\d{3}/
const str1 = '你好123QF456'
const str2 = '你好'
console.log(str1.search(reg)) // 返回的是 首次出现的 下标
console.log(str2.search(reg)) // 没有找到, 所以返回的 是 -1
2.match
语法：字符串.match(正则)
- 没有g修饰的时候 ：
捕获到的是数组下标0 的值，多次捕获也是一样的
没有捕获到返回null
- 有g修饰的时候：
捕获到的是一个数组
没有捕获到的时候返回一个null
2. match
const reg = /\d{3}/
const reg1 = /\d{3}/g
const str1 = '你好123QF456'
const str2 = '你好'
console.log(str1.match(reg)) // 返回一个数组, 数组下标0, 是第一个捕获到的值
console.log(str1.match(reg)) // 返回一个数组, 数组下标0, 是第一个捕获到的值
console.log(str2.match(reg)) // 没有找到, 返回一个 null
console.log(str1.match(reg1)) // 返回一个数组, 数组的成员是 捕获到的值
console.log(str2.match(reg1)) // 没有找到, 返回一个 null
3.replace
语法：字符串.replace（正则，要替换的字符）
作用：通过正则找到对应的字符，将其替换
// 3. replace
const reg = /\d{3}/
const reg1 = /\d{3}/g
const str1 = '你好123QF456'
const str2 = '你好'
console.log(str1.replace(reg, '***'))
console.log(str1.replace(reg1, '***'))
console.log(str2.replace(reg, '***'))
console.log(str2.replace(reg1, '***'))
运动函数
最终版1
/**
* 问题: 没有移动到指定的距离
*
* 原因: 当前在的位置 91px 需要移动到 100px, 下一次移动距离 (100 - 91) / 10 === 0.9
* 当前移动的距离 应该是 91 + 0.9 + 'px' === 91.9px
* 但是浏览器可识别的最小移动距离 为 1px, 所以赋值移动到 91.9px 时, 实际位置 还是91px
*
* 解决: 将移动的距离 向上取整
*
*
* 新问题:
* 当前在的位置 9px 需要移动 0px, 下一次移动距离 (0 - 9) / 10 === -0.9
* 然后我们将移动值, 向上取整 -0.9 => 0
*
* 解决: 当移动的值 大于0的时候, 向上取整, 否则 向下取整
*
*
*
*/
// 0. 封装一个运动函数
function move(ele, type, target) {
const timer = setInterval(function () {
// 1. 获取当前的位置
let count = parseInt(window.getComputedStyle(ele)[type])
// 2. 计算要移动的距离 (目标 - 当前的值) / 10
let des = (target - count) / 10
// 大于0 向上取整, 小于0 向下取整
des = des > 0 ? Math.ceil(des) : Math.floor(des)
// 3. 判断是否需要继续移动
if (target === count) {
// 3.1 此时说明移动到了, 可以结束定时器
clearInterval(timer)
} else {
// 3.2 此时说明还没有移动到, 需要继续移动
ele.style[type] = count + des + 'px'
}
}, 20)
}
const box = document.querySelector('.box')
const box2 = document.querySelector('.box2')
box.onclick = function () {
move(this, 'left', 0)
}
box2.onclick = function () {
move(this, 'left', 100)
}
</script>
最终板2
/**
* 问题: 透明没有调整
*
* 原因: 透明度没有单位
*
* 解决: 在赋值的时候, 判断如果时 透明度, 那么就别带单位
*
* 新问题: 没有运动过程
*
* 原因: 因为做了取整之后, 得到的值, 只会是 -1或者1
*
* 解决: 想个办法, 将值放大
*/
// 0. 封装一个运动函数
function move(ele, type, target) {
if (type == 'opacity') {
target *= 100
}
const timer = setInterval(function () {
// 1. 获取当前的位置
let count
if (type == 'opacity') {
count = window.getComputedStyle(ele)[type] * 100
} else {
count = parseInt(window.getComputedStyle(ele)[type])
}
// 2. 计算要移动的距离 (目标 - 当前的值) / 10
let des = (target - count) / 10
// 大于0 向上取整, 小于0 向下取整
des = des > 0 ? Math.ceil(des) : Math.floor(des)
// 3. 判断是否需要继续移动
if (target === count) {
// 3.1 此时说明移动到了, 可以结束定时器
clearInterval(timer)
} else {
// 3.2 此时说明还没有移动到, 需要继续移动
if (type == 'opacity') {
ele.style[type] = (count + des) / 100
} else {
ele.style[type] = count + des + 'px'
}
}
}, 50)
}
const box = document.querySelector('.box')
box.onclick = function () {
// move(this, 'left', 100)
move(this, 'opacity', 1)
}
</script>
