16-正则表达式+元素运动

最新推荐文章于 2024-08-24 11:46:12 发布

Aoman7

最新推荐文章于 2024-08-24 11:46:12 发布

阅读量61

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_41222991/article/details/126712849

版权

正则表达式

=> 是一种模式用于匹配字符串的模式

javascript中内置的对象

RegExp

        创建正则对象

构造函数方式

let reg = new RegExp('\d+')

字面量方式

let reg = /\d+/

正则常用方法

test

正则.test(字符串)

=> true | false

字符串.search(正则)

=>索引号

match

字符串.match(正则)

=>数组

replace

字符串.replace(正则,新字符)

=> 替换后新字符串

正则字符

普通字符: a-z A-Z 0-9

定位符

=> 限定匹配字符开始或结束

        ^once 开始

once$ 结束

转义符

\n -> 换行

. -> 除换行符外的任意字符

\. -> 匹配.

分组与反向引用

分组

const str = 'aabcdef'
const reg = /a+/

const str = 'abcdefabc'
const reg = /(abc)+/g

反向引用

$1  -> abc

const str = '2022-09-05'  -> 09/05/2022
const reg = /(\d{4})-(\d{2})-(\d{2})/
                $1     $2      $3
        $2/$3/$1     -> 09/05/2022
     思路： 匹配日期时间，分组后反向引用分组内容重组日期时间格式

元素运动

联想: 小区块随光标移动

拖拽案例

元素运动到指定位置

let x = e.offsetX

let y = e.offsetY

box.style.top = y

box.style.left = x

封装运动函数

/*
    计算元素每次运动距离
     总距离offsset             每次移动距离?
     -------          =        --------------
     总时间1000                每次移动时间-速度 rate

         distance = offset * rate / time
 */
function move(ele, offset) {
	 let time = 1000 // 总时间
	 let rate = 50 // 速度
	 let distance = (offset * rate) / time // 每次移动距离

	 //初始化当前位置
	 ele.style.left = window.getComputedStyle(ele).left
	 let init = parseInt(ele.style.left)

		 // 计算目标位置
	 let goal = init + offset

	 const timer = setInterval(function () {
	 if (parseInt(ele.style.left) == goal ||
		 Math.abs(Math.abs(goal) - Math.abs(parseInt(ele.style.left))) < Math.abs(distance)
					) {
          // 如果当前位置与目标位置的距离小于移动的距离，直接到达目标位置
				 ele.style.left = goal + 'px' 
				 clearInterval(timer)
			 } else {
			  ele.style.left = parseInt(ele.style.left) + distance + 'px'
		 }
	 }, rate)
 }