2018-09-25 Day26 - window对象和一些小应

随机数产生方式
parseInt(Math.random()*100 + 1)//parseInt取整 Math.random()取0-1(不包括1)的随机数

window对象

//window可以不写，默认为window对象。
alert() / prompt() / confirm() / close()
警告框 / 输入框 / 确认框 / 关闭
window.setInterval(delayGo,5000);//setInterval周期执行，时间单位毫秒。
window.setTimeout(delayGo,1000); //只调用一次，但是一般用于函数递归，setTimeout更加灵活。
clearInterval()  /  clearTimeout() //清除计时器

window.document - 文档对象
window.location - 浏览器地址栏
//location.hostname 返回 web 主机的域名
//location.pathname 返回当前页面的路径和文件名
//location.port 返回 web 主机的端口 （80 或 443）
//location.protocol 返回所使用的 web 协议（http:// 或 https://）
window.history - 历史记录
//history.back() - 与在浏览器点击后退按钮相同
//history.forward() - 与在浏览器中点击向前按钮相同
//history.go(n) - 前进或者后退n步
window.navigator - 浏览器
//navigator.appCodeName - 浏览器代号
//navigator.appName - 浏览器名称
// navigator.appVersion - 浏览器版本
window.screen - 屏幕
//screen.availWidth - 可用的屏幕宽度
//screen.availHeight - 可用的屏幕高度
//screen.colorDepth - 色深
//screen.pixelDepth - 分辨率

拿到html元素(document对象)

document.querySelector("#welcome")//通过选择器拿元素
document.querySelectorAll() //选择器拿到多个元素，返回列表
document.getElementById()//根据id拿元素
document.getElementsByClassName()//根据类名拿元素，返回为列表
document.getElementsByTagName()//根据标签名拿元素，返回为列表

写入到html元素

//div -- 特定标签对应的变量
div.innerHTML //能解释 html 代码
div.textContent //里面只能放文本，代码原样输入

其他知识

Math.random（）随机产生0~1的随机数（前闭后开）
parseInt（）取整
parseFloat（）取小数

使用匿名函数并且调用它的方法

一、网页上显示当前时间

        <div id="time"></div>
        
        <script type="text/javascript">
            var days = ["日","一","二","三","四","五","六"];
            function showTime(){
                var now = new Date();
                var year = now.getFullYear();
                var month = now.getMonth() + 1;
                var date = now.getDate();
                var hour = now.getHours();
                var minute = now.getMinutes();
                var second = now.getSeconds();
                var day = now.getDay();
                var div = document.getElementById("time");  //得到id为指定的div标签
                div.innerHTML = year + "年" + 
                    (month < 10 ? "0":"") + month + "月" + 
                    (date < 10 ? "0":"")+ date + "日&nbsp;" +
                    (hour < 10 ? "0":"")+ hour + ":" +
                    (second < 10 ? "0":"")+ second + "&nbsp;星期" + days[day];
                //div.innerHTML 标签里面的html代码
                //div.textContent 里面只能放文本，代码原样输入
            }
            showTime()  //网页开始没有显示时间，先执行一遍。
            window.setInterval(showTime,1000) //设置时间周期，每1000毫秒执行一次
        </script>

效果：

二、网页跑马灯

        <h1 id="welcome">欢迎来到千峰教育成都校区Python就业班&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h1>
        <script type="text/javascript">
            var str1 = document.getElementById("welcome")
//          document.querySelector("#welcome")//通过选择器拿元素
//          document.querySelectorAll() //选择器拿到多个元素，返回列表
//          document.getElementById()//根据id拿元素
//          document.getElementsByClassName()//根据类名拿元素，返回为列表
//          document.getElementsByTagName()//根据标签名拿元素，返回为列表
            function showStr(){
                var str = str1.textContent;
                str = str.substring(1) + str.charAt(0);//substring-取字串  charAt-取字符
                str1.innerHTML = str;
            }
            showStr();
            window.setInterval(showStr,800);
        </script>

效果：

三、网页延时跳转

        <h2><span id="counter" >5</span>秒以后自动跳转到百度……</h2>
        <script type="text/javascript">
            var countdown = 5;
            var span = document.getElementById("counter");
            function delayGo(){
                countdown -= 1;
                if (countdown == 0){
                    location.href = "http://www.baidu.com";
                }else{
                    span.textContent = countdown;
                    setTimeout(delayGo,1000); //只调用一次，所以重新调用（setTimeout更加灵活）
                }
                
            }
            window.setTimeout(delayGo,1000); //setTimeout只执行一次
//          window.setInterval(delayGo,5000);//setInterval周期执行
        </script>

效果：