当前位置：首页 > wzjs >正文

中信建设有限责任公司吴方旭上海seo网站优化软件

wzjs 2025/7/27 12:56:12

中信建设有限责任公司吴方旭,上海seo网站优化软件,专业做网站的公司,常州市教育基本建设与装备管理中心网站目录 01运动原理 02-匀速运动 03-缓冲运动 04-缓冲运动-多属性 05-缓冲运动多属性-封装 06-第三方运动库(让一个盒子动) 运动函数主要体现的是一种封装的思想。讲运动函数主要是为了讲封装思想。 01运动原理通过连续不断的改变物体的位置,而发生移动的变化使用setIn…

01运动原理

02-匀速运动

03-缓冲运动

04-缓冲运动-多属性

05-缓冲运动多属性-封装

06-第三方运动库(让一个盒子动)

运动函数主要体现的是一种封装的思想。讲运动函数主要是为了讲封装思想。

01运动原理

通过连续不断的改变物体的位置,而发生移动的变化

使用setInterval 定时器实现

匀速运动: 速度的值始终不变

缓冲运动: 速度一开始很大, 然后慢慢变小

02-匀速运动

<head><style>*{padding: 0;margin: 0;}div{width: 100px;height: 100px;background-color: red;position: relative;left: 0;top: 0;}</style>
</head>
<body><button>开始运动</button><button>停止运动</button><div></div><script>var begin = document.querySelectorAll("button")[0]var close = document.querySelectorAll("button")[1]let div = document.querySelector("div");let left = 0;var timer;// 每隔一段时间 保持相同的距离移动begin.onclick=function(){timer = setInterval(()=>{left+=5;div.style.left = left+'px';},100)}//清掉定时器让它停close.onclick=function(){clearInterval(timer);}</script>
</body>

03-缓冲运动


<head><style>*{padding: 0;margin: 0;}div{width: 100px;height: 100px;background-color: red;position: relative;left: 500px;top: 0;}</style>
</head>
<body><button>开始运动</button><button>停止运动</button><div></div><script>var begin = document.querySelectorAll("button")[0]var close = document.querySelectorAll("button")[1]let div = document.querySelector("div");let target = 0; //从0走到500 越往后速度越慢!!var timer;// 每隔一段时间 保持相同的距离移动begin.onclick=function(){timer = setInterval(()=>{// 速度是固定的吗???  不是// 开始是0  目标是500// 思路: 剩余路程的1/8 作为速度// // 定时器走第一次//     (500-0)*(1/8) = 62.5// // 定时器走第二次//     (500-62.5)*(1/8) = 54.6875// // ......let speed = (target - div.offsetLeft) / 8;console.log(speed); //0.375   变成 1     -0.5  变成-1if(speed<0){speed = Math.floor(speed);}else{speed = Math.ceil(speed);}div.style.left =  div.offsetLeft + speed+"px"               },100)}close.onclick=function(){clearInterval(timer)}</script>
</body>
</html>

04-缓冲运动-多属性

//velocity.js<head><style>* {padding: 0;margin: 0;}div {width: 100px;height: 100px;background-color: red;position: relative;left: 0px;top: 500px;}</style>
</head><body><button>开始运动</button><button>停止运动</button><div></div><script>var begin = document.querySelectorAll("button")[0]var close = document.querySelectorAll("button")[1]let div = document.querySelector("div");let target = 0;let attr = 'top'; //attr 代表具体要运动的属性var timer;// 每隔一段时间 保持相同的距离移动begin.onclick = function () {timer = setInterval(() => {// 把剩余路程的1/8作为 速度let current = parseInt(getComputedStyle(div)[attr]) ;//getComputedStyle(div)[attr] == getComputedStyle(div).leftconsole.log(current);//0pxlet speed = (target - current) / 8;console.log(speed);if (speed < 0) {speed = Math.floor(speed);} else {speed = Math.ceil(speed);}div.style[attr] = current + speed + "px";if(speed==0){clearInterval(timer)}}, 100)}close.onclick = function () {clearInterval(timer);}</script>
</body></html>

05-缓冲运动多属性-封装

<head><style>* {padding: 0;margin: 0;}div {width: 100px;height: 100px;background-color: red;position: relative;left: 500px;top: 300px;opacity: 1;}</style>
</head><body><button>开始运动</button><button>停止运动</button><div></div><script>var begin = document.querySelectorAll("button")[0]var close = document.querySelectorAll("button")[1]let div = document.querySelector("div");var timer;// 每隔一段时间 保持相同的距离移动begin.onclick = function () {// 第一个参数  运动的元素,// 第二个参数  传运动的属性animate(div, { top: 0, left: 0});}function animate(el, obj) {// obj 是个对象  想要获取对象里的属性  和值 怎么获取// console.log(key,obj[key]);// key 属性名// obj[key] 属性值timer = setInterval(() => {for (key in obj) {let target = obj[key];// 把剩余路程的1/8作为 速度let current = parseInt(getComputedStyle(el)[key]);//getComputedStyle(div)[attr] == getComputedStyle(div).leftlet speed = (target - current) / 8;console.log(speed);if (speed < 0) {speed = Math.floor(speed);} else {speed = Math.ceil(speed);}el.style[key] = current + speed + "px";// 作业: 只有两个speed都走完为0   才清除定时器???// if (speed == 0) {//     clearInterval(timer);// }}}, 100)}close.onclick = function () {clearInterval(timer);}</script>
</body></html>

06-第三方运动库(让一个盒子动)

第三方库网站，官网velocityjs.org/#duration 中文网

人家功能封装好了直接用

可以另存为我们的js文件然后引入

velocity.js

也可以复制js标签在头部引入(loaded)

<head><script src="./velocity.js"></script>//我下载了功能文件库直接引入<style>div{width: 100px;height: 100px;background-color: tomato;left: 0;top: 0;position: relative;opacity: 1;}</style>
</head>
<body><div></div><script>let div = document.querySelector("div");//获取页面元素// 语法:// 第一个传: 运动的元素// 第二个传: 运动的属性// 第三个传: 修改它的配置 比如动画的时间XXXVelocity(div,{left:500,top:500,opacity:0},{duration:3000,loop:true})//用库//第一个参数你要运动的div元素，第二个参数你要定义的属性。第三个参数也是一个对象你觉得它的速度快可以用duration设置运动的时长</script>
</body>
</html>

表单验证

<head></head><body><!--form表单--><form action="#">用户名：* <input type="text">  <span></span>  <br><br>密码：* <input type="text">  <span></span> <br><br>确认密码：*<input type="text"> <span></span>  <br><br>昵称：<input type="text"> <span></span> <br><br>头像：<input type="file"> <span></span>  <br><br>电子邮箱：<input type="email"> <span></span> <br> <br><button>提交</button></form><!--js表单验证--><script>let ipts = document.querySelectorAll("input");let btn = document.querySelector("button");// 1-记录一下输入框的值是否需要验证let isUsername = false;  //小写字母和数字组合 2-16位let isPassword = false; // 只要不是空白都行 let isRePassword = false;let isNickname = true;let isAvatar = true;let isEmail = false;ipts[0].onchange=function(){let reg = /[a-z][0-9]+|[0-9][a-z]+/;// this 在事件处理函数里 this指向的是当前元素if(reg.test(this.value)){isUsername = true;this.nextElementSibling.innerHTML = "格式正确";this.nextElementSibling.style.color="green"}else{this.nextElementSibling.innerHTML = "格式不正确";this.nextElementSibling.style.color="red";isUsername = false;}}ipts[1].onchange=function(){let reg = /^\S{6,16}$/if(reg.test(this.value)){isPassword = true;this.nextElementSibling.style.color="green";let level = getpwdlevel(this.value);if(level==1){this.nextElementSibling.innerHTML = "格式正确-弱";}else if(level==2){this.nextElementSibling.innerHTML = "格式正确-中";}else{this.nextElementSibling.innerHTML = "格式正确-强";}}else{this.nextElementSibling.innerHTML = "格式不正确";this.nextElementSibling.style.color="red";isPassword = false;}}ipts[2].onchange=function(){if(this.value == ipts[1].value){isRePassword = true;this.nextElementSibling.innerHTML = "密码一致";this.nextElementSibling.style.color="green";}else{isRePassword = false;this.nextElementSibling.innerHTML = "两次的密码不一致";this.nextElementSibling.style.color="red";}}   ipts[3].onchange =function(){let reg = /^\S{1,10}$/if(reg.test(this.value)){isNickname = true;this.nextElementSibling.innerHTML = "格式正确";this.nextElementSibling.style.color="green"}else{isNickname = falsethis.nextElementSibling.innerHTML = "格式不正确";this.nextElementSibling.style.color="red"}}ipts[4].onchange =function(){// .png  let reg = /\.png$/if(reg.test(this.value)){isAvatar = truethis.nextElementSibling.innerHTML = "格式正确";this.nextElementSibling.style.color="green"}else{isAvatar = falsethis.nextElementSibling.innerHTML = "格式不正确";this.nextElementSibling.style.color="red"}}ipts[5].onchange=function(){let reg = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;if(reg.test(this.value)){isEmail = truethis.nextElementSibling.innerHTML = "格式正确";this.nextElementSibling.style.color="green"}else{isEmail = falsethis.nextElementSibling.innerHTML = "格式不正确";this.nextElementSibling.style.color="red"}}btn.onclick=function(){if(isAvatar&&isEmail&&isNickname&&isPassword&&isRePassword&&isUsername){alert("注册成功")}else{alert("请在次检查")}}// 封装一个密码强弱的函数function getpwdlevel(pwd){// 只有数字、字母、特殊字符里其中一项  就是  弱// 有其中两项就是  中// 有其中三项      强let n =0;if(/\d/.test(pwd)){n++}if(/[a-zA-Z]/.test(pwd)){n++}if(/[^0-9a-zA-Z]/.test(pwd)){n++}return n;}</script>
</body>
</html>

查看全文

http://www.dtcms.com/wzjs/96421.html