美文网首页
2019-06-12

2019-06-12

作者: CC__XX | 来源:发表于2019-06-12 17:12 被阅读0次

js基础知识:

时钟: var now = new Date();弹出美式时间

var month = now.getMonth() + 1;范围0-11
var year = now.getFullYear();年
var date = now.getDate();号
var week = now.getDay();星期几,西半球时间,范围0-6,星期日为一周的第一天,为0
var hour = now.getHours();时
var minute = now.getMinutes();分
var second = now.getSeconds();秒
常用写时间样式:

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

倒计时 :

var now = new Date();实际开发中此时间从服务器获取,避免客户端调整时间

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,5,20,16,30,20);

                // alert(future - now);//弹出与当前时间相差的毫秒数:12469935436
                var milli = parseInt((future - now)/1000);
                // 时间差
                // 超过预定时间跳转到其他页面
                if(muili<=0){
                    window.location.href="#"
                }

                //活动当天页面下线,避免倒计时到点后继续计负时
                // 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年11月12日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;
            }
        }

时钟一般和定时器连用

变量的作用域:

全局变量:函数外部定义的变量,函数内部和外部都可以访问,它的值可以共享
局部变量:函数内部定义的变量,函数内部可以访问,外部无法访问。函数内部访问变量时,先在内部查找是否有此变量,如果有,就使用内部变量,如果没有,就去外部查找
函数内部如果不用'var'关键字定义变量,变量可能会变成全局变量,如果用严格模式解析会报错

    var a = 12;

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

            // alert(a);
        }

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

        aa();

封闭函数:

封闭函数的一般写法
封闭函数定义:(function(){……})()

    ;;(function(){
        var str = '欢迎访问我的主页';
        alert(str);
    })();//最后的()表示马上执行

封闭函数其他的写法:在匿名函数前加“!”或者“~”,之后加“()”
代码例子:

~function(){
            var str = '欢迎访问我的主页';
            alert(str);
        }();

用变量的方式定义函数:先定义在使用
代码例子:

var myAlert = function(){
            alert('hello!');
        }

        myAlert();

`闭包:

闭包的本质就是函数嵌套,就是在函数里面定义函数,
内部函数可以引用外部函数的参数和变量
参数和变量不会被垃圾回收机制给回收
闭包的用途:可以存循环的索引值、做私有变量计数器
闭包的封闭函数写法:

var cc = (function(b){
            var a = 12;

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

            return bb;
        })(24);

        cc();
        

闭包存循环的索引值

<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是实参
            }
        }

闭包的用途:私有变量计数器

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

闭包做选项卡

    //闭包做选项卡
        window.onload = function(){
            var aBtn = document.getElementById('btns').getElementsByTagName('input');
            var aCon = document.getElementById('contents').getElementsByTagName('div');
            // alert(aCon.length);

            //循环所有的选项卡按钮
            for(var i=0; i<aBtn.length; i++){
                (function(i){
                    //给每个选项卡按钮添加点击事件
                    aBtn[i].onclick = function(){yy9
                        //遍历所有选项卡按钮
                        for(var j=0; j<aBtn.length; j++){
                            //将每个选项卡按钮都设为灰色
                            aBtn[j].className = '';
                            //将每个内容区都隐藏
                            aCon[j].className = '';
                        }
                        //this代表当前点击的Button对象
                        this.className = 'cur';//当前点击的按钮为金色

                        // alert(i);//不加闭包时,不管点哪个按钮,i都等于3

                        //加闭包保存了索引值才有效
                        aCon[i].className = 'active';//当前点击的按钮对应的内容显示
                    }
                })(i);
            }
        }
    </script>
</head>
<body>
    <div class="btns" id="btns">
        <input type="button" value="tab01" class="cur">
        <input type="button" value="tab02">
        <input type="button" value="tab03">
    </div>
    <div class="contents" id="contents">
        <div class="active">tab文字内容一</div>
        <div>tab文字内容二</div>
        <div>tab文字内容三</div>
    </div>

内置对象

内置对象
1、document

document.referrer //获取上一个跳转页面的地址(需要服务器环境)
2、location

window.location.href //获取或者重定url地址
window.location.search //获取地址参数部分
window.location.hash //获取页面锚点或者叫哈希值
3、Math

Math.random 获取0-1的随机数
Math.floor 向下取整
Math.ceil 向上取整
math.arry数组
math.string字符串
math.date正则

相关文章

网友评论

      本文标题:2019-06-12

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