前端

作者: 周肸 | 来源:发表于2018-12-06 08:39 被阅读0次

1.数组去重

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组去重</title>
    <script type="text/javascript">
        var aRr = [1,3,4,1,6,9,1,2,5,3,1,6,5,4,4];
        var aRr2 = [];

        for(var i=0; i<aRr.length; i++){
            //判断元素第一次出现的位置,恰好是当前索引时,就将元素放入新数组
            if(aRr.indexOf(aRr[i]) == i){
                aRr2.push(aRr[i]);
            }
        }

        alert(aRr2);//1,3,4,6,9,2,5
    </script>
</head>
<body>
    
</body>
</html>

2.循环语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环语句</title>
    <script type="text/javascript">
        /*
        循环语句:
            通过循环语句可以反复的执行一段代码多次
        
        while循环
            - 语法:
                while(条件表达式){
                    语句...
                }
        
            - while语句在执行时,
                先对条件表达式进行求值判断,
                    如果值为true,则执行循环体,
                        循环体执行完毕以后,继续对表达式进行判断
                        如果为true,则继续执行循环体,以此类推
                    如果值为false,则终止循环
        
        do...while循环
            - 语法:
                do{
                    语句...
                }while(条件表达式)
        
            - 执行流程:
                do...while语句在执行时,会先执行循环体,
                    循环体执行完毕以后,在对while后的条件表达式进行判断,
                    如果结果为true,则继续执行循环体,执行完毕继续判断以此类推
                    如果结果为false,则终止循环
        
                实际上这两个语句功能类似,不同的是while是先判断后执行,
                    而do...while会先执行后判断,
                do...while可以保证循环体至少执行一次,
                    而while不能

        for语句,也是一个循环语句,也称为for循环
            在for循环中,为我们提供了专门的位置用来放三个表达式:
                1.初始化表达式
                2.条件表达式
                3.更新表达式
        
        for循环的语法:
                for(①初始化表达式;②条件表达式;④更新表达式){
                    ③语句...
                }
        
                for循环的执行流程:
                    ①执行初始化表达式,初始化变量(初始化表达式只会执行一次)
                    ②执行条件表达式,判断是否执行循环。
                        如果为true,则执行循环③
                        如果为false,终止循环
                    ④执行更新表达式,更新表达式执行完毕继续重复②

        任意一种循环都可以互相嵌套
        */
        window.onload = function(){
            var oList = document.getElementById('list01');
            var aLi = oList.getElementsByTagName('li');
            /*for (var i = 0; i < aLi.length; i++) {
                if(i % 2 == 0){
                    aLi[i].style.background = 'gold';
                }
            }*/

            /*for(var j in aLi){
                aLi[j].style.background = 'red';
            }*/

            //创建一个循环,往往需要三个步骤
            //1.创初始化一个变量
            var j = 0;
            //2.在循环中设置一个条件表达式
            /*while(j < aLi.length){
                aLi[j].style.background = 'gold';
                //3.定义一个更新表达式,每次更新初始化变量
                j++;
            }*/

            do{
                aLi[j].style.background = 'gold';
                j++;
            }while(j < 0)

            /*
            以下是死循环的写法
            像这种将条件表达式写死为true的循环,叫做死循环
            该循环不会停止,除非浏览器关闭,死循环在开发中慎用
            可以使用break,来终止循环
            */
            /*while(true){
                if(j>10){
                    break;//退出整个循环
                }
                j++;
            }
            //for循环的死循环写法
            for(;;){

            }*/

            /*
            break关键字可以用来退出switch或循环语句
                不能在if语句中使用break和continue
                break关键字,会立即终止离他最近的那个循环语句
            continue关键字可以用来跳过当次循环
                同样continue也是默认只会对离他最近的循环循环起作用
             */
            /*
            可以为循环语句创建一个label,来标识当前的循环
                label:循环语句
            使用break语句时,可以在break后跟着一个label,
                这样break将会结束指定的循环,而不是最近的
             */

            outer:
            for(var i=0 ; i<5 ; i++){
                console.log("@外层循环"+i);
                for(var j=0 ; j<5; j++){
                    console.log("内层循环:"+j);
                    break outer;
                }
            }
        } 
    </script>
</head>
<body>
    <ul id="list01">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
</body>
</html>

3.定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器的基本用法</title>
    <style type="text/css">
        
    </style>
    <script type="text/javascript">
        //单次定时器
        var timer = setTimeout(function(){
            alert('hello!');
        }, 3000);

        //清除单次定时器
        clearTimeout(timer);

        //反复循环定时器
        var timer2 = setInterval(function(){
            alert('hi~~~');
        }, 2000);

        //清除反复循环定时器
        clearInterval(timer2);
    </script>
</head>
<body>
    
</body>
</html>

相关文章

  • 前端文章系列

    【前端】从0.1开始,创建第一个项目 【前端】初识HTML 【前端】HTML标签 【前端】HTML属性 【前端】C...

  • Web前端小白入门指迷

    大前端之旅 大前端有很多种,Shell 前端,客户端前端,App 前端,Web 前端和可能接下来很会火起来的 VR...

  • 推荐几个好的前端博客和网站

    前端开发博客前端开发博客-前端开发,前端博客 对前端知识结构的理解人类身份验证 - SegmentFault 脚本...

  • 2020-04-11

    前端工程化相关 前端动画相关 优化前端性能

  • Web前端

    Web前端 web前端是什么- 定义 职责 web前端基础知识和学习路线 web前端学习的资源 1.Web前端是...

  • 2018-05-16

    web前端开发 什么是web前端 web前端开发也戏称“web前端开发攻城狮”,目前这个职位也叫“大前端”。这个职...

  • 前端学习:一个好的前端导航可以更好的学习前端

    前端导航: 前端网课(前端的网络课程,在线网站) 前端资源(有论坛等交流平台) 前端手册(html手册,css手册...

  • 2018-09-25

    前端学习 前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现...

  • 浏览收藏文章列表

    前端 frameset frame前端框架支持ie8选择前端框架选择2前端框架选择weexframeset,fra...

  • 无标题文章

    #Web前端 - web前端是什么 - 定义 - 职责 - web前端基础知识和学习路线 - web前端学习的...

网友评论

      本文标题:前端

      本文链接:https://www.haomeiwen.com/subject/iihncqtx.html