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

22_js运动函数

news 2025/7/12 17:42:51

目录

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  变成-1
                if(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).left
                console.log(current);//0px
                let 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).left
                    let 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)

<script src="https://cdn.bootcdn.net/ajax/libs/velocity/2.0.6/velocity.js"></script>

<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");//获取页面元素
        // 语法:
        // 第一个传: 运动的元素
        // 第二个传: 运动的属性
        // 第三个传: 修改它的配置 比如动画的时间XXX
        Velocity(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 = false
            this.nextElementSibling.innerHTML = "格式不正确";
            this.nextElementSibling.style.color="red"
        }
    }

    ipts[4].onchange =function(){
        // .png  
        let reg = /\.png$/
        if(reg.test(this.value)){
            isAvatar = true
            this.nextElementSibling.innerHTML = "格式正确";
            this.nextElementSibling.style.color="green"
        }else{
            isAvatar = false
            this.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 = true
            this.nextElementSibling.innerHTML = "格式正确";
            this.nextElementSibling.style.color="green"
        }else{
            isEmail = false
            this.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/a/98329.html

相关文章：

  • 历史数据分析——宝钢
  • AI赋能单片机开发的环节与方法
  • 观察者模式：解耦对象间的依赖关系
  • 【嵌入式学习3】多任务编程
  • （二）万字长文解析：deepResearch如何用更长的思考时间换取更高质量的回复？各家产品对比深度详解
  • 锐评｜希捷NVMe闪存+磁盘混合存储阵列
  • AB包介绍及导出工具实现+AB包资源简单加载
  • Flutter和React Native在开发app中，哪个对java开发工程师更适合
  • 如何看待职场中的“向上管理”
  • c中的变量命名规则
  • 【精修版】【中项】系统集成项目管理工程师：第12章 项目进度管理-12.4估算活动持续时间
  • Python爬虫：开启数据抓取的奇幻之旅（一）
  • 点云库（Point Cloud Library, PCL）
  • 蓝桥复习 1(Init)
  • TCP网络编程与多进程并发实践
  • STM32_HAL开发环境搭建【Keil(MDK-ARM)、STM32F1xx_DFP、 ST-Link、STM32CubeMX】
  • buildroot(1) -- 编译过程记录
  • [ 工具使用指南 ] | Visual Studio 2019 调试
  • 计算机底层基石：原码、反码、补码、移码深度剖析
  • HTML5 Web 存储学习笔记
  • YOLOv8+ Deepsort+Pyqt5车速检测系统
  • [ CTFshow ] Java web279-web281
  • LangChain 基础系列之 Prompt 工程详解：从设计原理到实战模板
  • AI日报 - 2025年3月30日
  • Vue3组合式API与选项式API的核心区别与适用场景
  • JDBC、excute()、DriveManager、Connection、Statement、自建JDBC工具类、占位符
  • GO语言开篇
  • Rust基础语法
  • c++-函数增强
  • JVM介绍