前端（字符串、定时器、倒计时、封闭函数、闭包）

作者: 埃菲尔上的铁塔梦i | 来源:发表于2018-08-23 20:26 被阅读0次

1、数组去重

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

2、字符串的处理方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字符串处理的方法</title>
    <script type="text/javascript">
        /*字符串切断转成数组*/
        var sTr = '2018-06-20';
        var aRr = sTr.split('-');
        // alert(aRr);//2018,06,20
        // console.log(aRr);

        var aRr2 = sTr.split('');
        // console.log(aRr2);

        /*实际上就是修改了<title>标签的内容*/
        // document.title = aRr2;

        var sTr2 = '#div1';
        var sTr3 = '.div1';

        /*获取指定索引的字符*/
        var sTr4 = sTr2.charAt(0);
        if(sTr4 == '#'){
            // alert('id选择器');
        }

        /*查看子串第一次出现的位置*/
        var sTr5 = 'Microsoft Yahei';
        var num = sTr5.indexOf('Yahei');
        // alert(num);//10

        var num2 = sTr5.indexOf('xihei');
        // alert(num2);//没有找到就弹出-1

        /*substring截取子串*/
        //从10开始，截到15（包括开始位置，不包括结束位置）
        // var sTr6 = sTr5.substring(10,15);//Yahei
        //从10开始截取到末尾
        var sTr6 = sTr5.substring(10);//Yahei
        // alert(sTr6);

        /*全部转为大写字母*/
        // alert(sTr6.toUpperCase());//YAHEI
        /*全部转为小写字母*/
        alert(sTr6.toLowerCase());//yahei
    </script>
</head>
<body>
    
</body>
</html>

3、字符串反转

并用

var sTr = "123asdf79888asdfe21";
        //1、split字符串转成数组
        //2、reverse数组反转
        //3、join数组转成字符串
        var sTr2 = sTr.split('').reverse().join('');
        alert(sTr2);//12efdsa88897fdsa321

4、计算器

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>计算器</title>
   <script type="text/javascript">
       window.onload = function(){
           var oInput01 = document.getElementById('input01');
           var oInput02 = document.getElementById('input02');
           var oSelect = document.getElementById('select');
           var oBtn = document.getElementById('btn');

           oBtn.onclick = function(){
               var val01 = oInput01.value;
               var val02 = oInput02.value;

               //不做此判断会弹出“NaN”
               if(val01=="" || val02==""){
                   alert('输入框不能为空！');
                   return;
               }
               if(isNaN(val01) || isNaN(val02)){
                   alert('请输入数字！');
                   return;
               }
               switch(oSelect.value){
                   case '0':
                       alert((parseFloat(val01)*100 + parseFloat(val02)*100)/100);
                       break;
                   case '1':
                       alert((parseFloat(val01)*100 - parseFloat(val02)*100)/100);
                       break;
                   case '2':
                       alert((parseFloat(val01)*100) * (parseFloat(val02)*100)/10000);
                       break;
                   case '3':
                       alert((parseFloat(val01)*100) / (parseFloat(val02)*100));
                       break;
               }
           }
       }
   </script>
</head>
<body>
   <h1>计算器</h1>
   <input type="text" name="" id="input01" />
   <select id="select">
       <option value="0">+</option>
       <option value="1">-</option>
       <option value="2">*</option>
       <option value="3">/</option>
   </select>
   <input type="text" name="" id="input02" />
   <input type="button" name="" value="计算" id="btn" />
</body>
</html>

5、定时器弹框

setTimeout 只执行一次的定时器
clearTimeout 关闭只执行一次的定时器
setInterval 反复执行的定时器
clearInterval 关闭反复执行的定时器

6、定时器的基本用法

<!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>

7、定时器动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器动画</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: gold;
            position: fixed;
            left: 20px;
            top: 20px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var oBox = document.getElementById('box');

            var left = 20;
            //反复循环定时器，每30毫秒修改一次盒子的left值
            var timer = setInterval(function(){
                left += 2;
                oBox.style.left = left + 'px';

                //当left值大于700时停止动画（清除定时器）
                if(left > 700){
                    clearInterval(timer);
                }
            },30);
        }
    </script>
</head>
<body>
    <div class="box" id="box"></div>
</body>
</html>

8、时钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
    <style type="text/css">
        
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var oBox = document.getElementById('box');

            function timeGo(){
                var now = new Date();
                // alert(now);//弹出美式时间：Wed Jun 20 2018 15:27:13 GMT+0800 (中国标准时间)
                var year = now.getFullYear();//2018年
                var month = now.getMonth() + 1;//6月弹出5//范围0-11
                var date = now.getDate();//20号
                var week = now.getDay();//3//星期几，西半球时间，范围0-6，星期日为一周的第一天，为0

                var hour = now.getHours();
                var minute = now.getMinutes();
                var second = now.getSeconds();

                // alert(hour + ":" + minute + ":" + second);//15:33:9

                oBox.innerHTML = '当前时间是：' + year + '年' + toDouble(month) + '月' + toDouble(date) + '日 ' + toWeek(week) + ' ' + toDouble(hour) + ":" + toDouble(minute) + ":" + toDouble(second);
            }

            timeGo();
            setInterval(timeGo, 1000);
        }

        //此函数将星期的数字转为汉字表示
        function toWeek(num){
            switch(num){
                case 0:
                    return '星期天'; 
                    break;
                case 1:
                    return '星期一'; 
                    break;
                case 2:
                    return '星期二'; 
                    break;
                case 3:
                    return '星期三'; 
                    break;
                case 4:
                    return '星期四'; 
                    break;
                case 5:
                    return '星期五'; 
                    break;
                case 6:
                    return '星期六'; 
                    break;
            }
        }

        //此函数将不足两位的数字前面补0
        function toDouble(num){
            if(num < 10){
                return '0' + num;
            }else{
                return num;
            }
        }
    </script>
</head>
<body>
    <div id="box"></div>
</body>
</html>

9、倒计时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时</title>
    <script type="text/javascript">
        window.onload = function(){
            //活动第二天要将页面下线，直接跳转到其它页面，不会走后面的代码了
            // window.location.href = "http://www.baidu.com";

            var oDiv = document.getElementById('div1');

            function timeLeft(){
                //实际开发中此时间从服务器获取，避免客户端调整时间
                var now = new Date();
                var future = new Date(2018,8,23,24,00,00);

                // alert(future - now);//弹出与当前时间相差的毫秒数：12469935436
                var milli = parseInt((future - now)/1000);

                //活动当天页面下线，避免倒计时到点后继续计负时
                // if(milli <= 0){
                //  //页面跳转，不执行下面的代码了
                //  window.location.href = "http://www.baidu.com";
                // }

                var day = parseInt(milli / 86400);
                var hour = parseInt(milli % 86400 / 3600);
                var minute = parseInt(((milli % 86400) % 3600) / 60);
                var second = milli % 60;

                oDiv.innerHTML = '距离2018年8月23日00时00分00秒还有' + day + '天' + toDouble(hour) + '时' + toDouble(minute) + '分' + toDouble(second) + '秒';
            }
            
            timeLeft();
            setInterval(timeLeft, 1000);
        }

        function toDouble(num){
            if(num < 10){
                return '0' + num;
            }else{
                return num;
            }
        }
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

10、变量的作用域

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>变量的作用域</title>
   <script type="text/javascript">
       /*
       全局变量：函数外部定义的变量，函数内部和外部都可以访问，它的值可以共享

       局部变量：函数内部定义的变量，函数内部可以访问，外部无法访问。函数内部访问变量时，先在内部查找是否有此变量，如果有，就使用内部变量，如果没有，就去外部查找

       函数内部如果不用'var'关键字定义变量，变量可能会变成全局变量，如果用严格模式解析会报错
       */
       var a = 12;

       function aa(){
           // var a = 5;
           var b = 7;

           // alert(a);
       }

       // alert(a);
       // alert(b);//报错

       aa();
   </script>
</head>
<body>
   
</body>
</html>

11、封闭函数

/*原来的写法
        function myAlert(){
            var str = '欢迎访问我的主页';
            alert(str);
        }

        myAlert();*/

        var str = function(){
            alert('test');
        }
        
        //封闭函数的一般写法
        //封闭函数定义：(function(){……})()
        /*
        ;;(function(){
            var str = '欢迎访问我的主页';
            alert(str);
        })();//最后的()表示马上执行
        */

        //封闭函数其他的写法：在匿名函数前加“！”或者“~”，之后加“()”
        ~function(){
            var str = '欢迎访问我的主页';
            alert(str);
        }();

12、用变量来定义函数

/*
        原来的写法：可以提前
        myAlert();

        function myAlert(){
            alert('hello!');
        }*/

        //函数用变量方式定义：先定义再使用
        // myalert();//提前会报错
        var myAlert = function(){
            alert('hello!');
        }

        myAlert();//放在下面可以执行

13、闭包

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>闭包</title>
    <script type="text/javascript">
        /*
        闭包的本质就是函数嵌套，就是在函数里面定义函数，
        内部函数可以引用外部函数的参数和变量
        参数和变量不会被垃圾回收机制给回收
        闭包的用途：可以存循环的索引值、做私有变量计数器
        */
        /*
        //闭包的一般写法
        function aa(b){
            var a = 12;

            function bb(){
                alert(a);
                alert(b);
            }

            return bb;
        }

        var cc = aa(24);*/

        
        //闭包的封闭函数写法
        var cc = (function(b){
            var a = 12;

            function bb(){
                alert(a);
                alert(b);
            }

            return bb;
        })(24);

        cc();
        

        /*
        //只能调用一次的闭包
        (function(b){
            var a = 12;

            function bb(){
                alert(a);
                alert(b);
            }

            return bb;
        })(24)();
        */
    </script>
</head>
<body>
    
</body>
</html>

14、闭包村循环的索引值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>闭包存循环的索引值</title>
    <style type="text/css">
        li{
            height: 30px;
            background-color: gold;
            margin-bottom: 10px;
        }
    </style>
    <script type="text/javascript">
        //闭包的用途：存循环的索引值
        window.onload = function(){
            var aLi = document.getElementsByTagName('li');
            // alert(aLi.length);//8

            for(var i=0; i<aLi.length; i++){
                /*
                aLi[i].onclick = function(){
                    alert(i);//每个li都弹出8，因为点击时循环已完毕，i最后为8
                }
                */

                (function(k){//这里的k是形参
                    aLi[k].onclick = function(){
                        alert(k);//弹出每个li的索引值
                    }
                })(i);//这里的i是实参
            }
        }
    </script>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>

15、闭包做私有变量计数器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>闭包做私有变量计数器</title>
    <script type="text/javascript">
        //闭包的用途：私有变量计数器
        var count = (function(){
            var a = 0;

            function bb(){
                a++;
                return a;
            }

            return bb;
        })();
        
        //每调用一次count，a就自增一次
        alert(count());//1
        alert(count());//2

        var c = count();
        alert(c);//3
    </script>
</head>
<body>
    
</body>
</html>

16、闭包做选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>闭包做私有变量计数器</title>
    <script type="text/javascript">
        //闭包的用途：私有变量计数器
        var count = (function(){
            var a = 0;

            function bb(){
                a++;
                return a;
            }

            return bb;
        })();
        
        //每调用一次count，a就自增一次
        alert(count());//1
        alert(count());//2

        var c = count();
        alert(c);//3
    </script>
</head>
<body>
    
</body>
</html>

前端（字符串、定时器、倒计时、封闭函数、闭包）

1、数组去重

2、字符串的处理方法

3、字符串反转

4、计算器

5、定时器弹框

6、定时器的基本用法

7、定时器动画

8、时钟

9、倒计时

10、变量的作用域

11、封闭函数

12、用变量来定义函数

13、闭包

14、闭包村循环的索引值

15、闭包做私有变量计数器

16、闭包做选项卡

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读