前端学习02

司*琦

已于 2022-04-22 19:30:54 修改

阅读量61

点赞数

文章标签：前端

于 2022-04-18 22:19:56 首次发布

本文链接：https://blog.csdn.net/qq_30774825/article/details/124253793

版权

JavaScript 定时器数组操作循环动画实现

关键词由CSDN通过智能技术生成

JavaScript

定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*定时器 1.调用的代码  2.定时的时间(只能以毫秒为单位)   定时器是异步执行的*/
        //setTimeout(func,3000)   //一次性定时器
        var timer = setInterval(func,3000)    //多次定时器
        function func () {
            alert('func')
            clearInterval(timer)    //清除定时器,传一个参数,参数是定时器的名字
        }
    </script>
</head>
<body>
    
</body>
</html>

数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var array = [1,2,3,'hude',true]
        alert(array.length)
        //数组索引只能从左到右,不能从右到左
        alert(array[2])
        //join里面可以使任意符号,将数组连接在一起变成字符串
        var newlist = array.join('-')
        alert(newlist)
        alert(typeof(newlist))
        //reverse  反转   数组.reverse()
        var alist=[2,1,4,5,3]
        alist.reverse
        alert(alist)
        //indexOf   返回数组中第一次出现的索引   如果有返回索引值,如果无,返回-1
        var alist=[2,1,4,5,3,4,3,7,4]
        alert(alist.indexOf(4))
        //push() 增加的元素在最后   pop() 从最后取出元素  和栈类似   栈的特点先进后出,往栈里放东西就是push   队列先进先出  管道:上一级的输出就是下一级的输入
        //splice(index,howmany,item1....itemx)   第三个是在删除位置插入内容,可以多个也可以不写  增加或者删除元素    
        var alist06 = ['别人手牵手','我牵我的狗','走一走','游一游','看谁不爽咬两口']
        alist06.splice(2,2,'啧啧','啧啧')
        alert(alist06)
    </script>
</head>
<body>
    
</body>
</html>

循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function (){   //div标签在body里面,在下方,需要预加载
            var aList = ['鹅厂','狼厂','猪场','粮厂','社会厂']
            var oDiv=document.getElementById('box')
            str=''
            for (var i=0;i<aList.length;i++){
                    var value = aList[i]              
                    str+='<li>'+value+'</li>'
                    oDiv.innerHTML=str
                    
            }
            // oDiv.innerHTML=str
            // alert(oDiv.innerHTML)
        }
    </script>
</head>
<body>
    <div id="box">

    </div>
</body>
</html>

去重

未注释的方法是重点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var alist =[2,3,5,1,4,2,4,2,4,3,3,6,4,7,4,8,5,5,4,4,7,3,5,4,6,4]
        var list=[]
        for (var i=0;i<alist.length;i++){
            var value=alist[i]
            // if (list.indexOf(value)==-1){
            //     list.push(value)
            // }
                if (alist.indexOf(value)==i){
                        list.push(value)
                }
        }
        alert(list)
    </script>
</head>
<body>
    
</body>
</html>

简易动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: aqua;
            position: absolute;
            left: 0px;
        }
    </style>
    <script>
        window.onload = function(){   //window.onload 只调用一次
            //获取标签
            var oDiv = document.getElementById('box')
            setInterval(func,30)   
            var distance=0
            var num=3
            function func(){
                console.log('a')
                distance+=num
                if (distance>300){
                    num=-3
                }else if (distance==0){
                    num=3
                }
                console.log(distance)
                oDiv.style.left=distance+'px'
            }
        }
    </script>
</head>
<body>
    <div id="box"></div>
</body>
</html>

司*琦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习02

JavaScript定时器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
复制链接

扫一扫