SOURCE

console 命令行工具 X clear

                    
>
console
//window.open(url, target)
//url:新窗口的地址,如果url为空,则表示打开一个空白窗口
//target:打开方式,“_blank(默认值)”—— 新窗口打开;“_self”—— 当前窗口打开

window.addEventListener("load",function(){
    var oBaiduWin;
    var oOpenBaiduBtn = this.document.getElementById("openBaiduBtn");
    oOpenBaiduBtn.addEventListener("click",function(){
        oBaiduWin = window.open("http://www.baidu.com","_blank");
    },false);

 // window.close() 关闭窗口,是没有参数的
    var oCloseBaiduBtn = this.document.getElementById("closeBaiduBtn");
    oOpenBaiduBtn.addEventListener("click",function(){
        oBaiduWin.close();
    },false);
    
    //打开空白页面
    var oBlankWin;
    var oOpenBlankBtn = this.document.getElementById("openbtn");
    oOpenBlankBtn.addEventListener("click",function(){
        oBlankWin = window.open();
        
        console.log(oBlankWin.location.href);
        // oBlankWin.location.href = "http://www.baidu.com";
        // console.log(oBlankWin.location.href);         

    })

    //绘制空白页面
    var oChangeNewBtn = this.document.getElementById("changeNewBtn");
    oChangeNewBtn.addEventListener("click",function(){
        // oBlankWin.document.title="新窗口"; //title无法修改     
        oBlankWin.document.body.innerHTML="<div><strong>Hi</strong>,I'm a new window</div>";
        oBlankWin.document.body.style.color = "blue";
        
        console.log(oBlankWin.location.href);
        oBlankWin.document.URL = "http://www.baidu.com";
        console.log(oBlankWin.location.href);


    })
    
    var oCloseNewBtn = this.document.getElementById("closeNewBtn");
    oCloseNewBtn.addEventListener("click",function(){
        oBlankWin.close();
    })
    
    //对话框有3种: alert()、confirm()和prompt()
    //  alert():仅提示文字,没有返回值
    var oAlertBtn = this.document.getElementById("alertBtn");
    oAlertBtn.addEventListener("click",function(){
        window.alert("我是告警窗口");
    },false)

    //  confirm():具有提示文字,返回“布尔值”(true或false)
    var oConfirmBtn = this.document.getElementById("confirmBtn");
    oConfirmBtn.addEventListener("click",function(){
        var bOpen = window.confirm("你想打开百度吗");
        if(bOpen){
            window.open("http://www.baidu.com");
        }
    },false)
    
    //	prompt():具有提示文字,返回“字符串”
    var oPromptBtn = this.document.getElementById("promptBtn");
    oPromptBtn.addEventListener("click",function(){
        var oText = window.document.getElementById("text");
        var text = window.prompt("请输入提示文字:");
        oText.innerHTML = text;
        // window.prompt("我是提示窗口");

    },false)

   
    //定时器setTimeout(code, time) 执行一次   clearTimeout() 暂停
    //setInterval(code, time)  重复执行无数次   clearInterval() 暂停

    var oStartTimerBtn = this.document.getElementById("startTimer");
    var oStopTimerBtn = this.document.getElementById("stopTimer");
    var oTimerBox = this.document.getElementById("timerBox");
    var timer;

    function changeColor(){
        oTimerBox.style.backgroundColor ="red";
    }

    oStartTimerBtn.addEventListener("click",function(){
        timer=window.setTimeout(changeColor,2000)
    })

    oStopTimerBtn.addEventListener("click",function(){
        window.clearTimeout(timer);
    })

    var oStartIntervalBtn = this.document.getElementById("startInterval");
    var oStopIntervalBtn = this.document.getElementById("stopInterval");
    var oIntervalBox = this.document.getElementById("intervalBox");
    var oIntervalText = this.document.getElementById("intervalText");
    
    var interval;
    var count=6;
    oIntervalText.innerHTML = count;

    function changeColorInterval(){
        var colors=["hotpink","blue","green","yellow","red","lightskyblue"];
        if(count>0){
            --count;
            var color = colors[count];
            oIntervalBox.style.backgroundColor = color;
            oIntervalText.innerHTML = count;
        }
    }

    oStartIntervalBtn.addEventListener("click",function(){
      
      window.clearInterval(interval);
      count=6;
      oIntervalText.innerHTML = count;
      interval = window.setInterval(changeColorInterval,2000);

    })

    oStopIntervalBtn.addEventListener("click",function(){
        window.clearInterval(interval);
    })
    
    // href	当前页面地址
    // search	当前页面地址“?”后面的内容
    // hash	当前页面地址“#”后面的内容
    console.log(window.location.href);
    console.log(window.location.search);
    console.log(window.location.hash);
    
    //navigator 获取浏览器的类型
    console.log(window.navigator.userAgent);

    //document对象
    //document.URL	只获取当前文档的URL,不能设置
    //document.referrer	返回使浏览者到达当前文档的URL

    
    
   
},false)

document.write("JS");
document.write("CSS");

document.write("<br/>");

document.writeln("JS");
document.writeln("CSS");

document.write("<br/>");

document.writeln("<pre>JS");
document.writeln("CSS</pre>");
<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">   
        </style>
        <script>
       
        </script>
    </head>
    <body>    
        <div>  
        <button id="openBaiduBtn">打开百度</button>
        <button id="closeBaiduBtn">关闭百度</button>
        </div>
        <br/>
        <br/>
        <div>
            <button id="openbtn">打开空白页面</button>
            <button id="changeNewBtn">绘制空白页面</button>
            <button id="closeNewBtn">关闭空白页面</button>
        </div>
        <br/>
        <div>
            <button id="alertBtn">打开告警窗口</button>
            <button id="confirmBtn">打开确认窗口</button>
            <button id="promptBtn">打开提示窗口</button>
            <div>
            <label>提示文字:</label><p id="text"></p>
            </div>
        </div>
        <br/>
        <div>
            <div>
            <button id = "startTimer">开始</button>
            <button id = "stopTimer">结束</button>
            <div id="timerBox"></div>
        </div>
            <br/>
            <br/>
        <div>
              <button id = "startInterval">开始</button>
            <button id = "stopInterval">结束</button>
            <div id="intervalBox"></div>
            <span>倒计时:</span><span id="intervalText"></span>
            </div>
    </body>  
</html>
#timerBox {
    width: 100px;
    height: 100px;
    border : 1px solid black;
    background-color: lightblue;
}

#intervalBox {
    width: 100px;
    height: 100px;
    border : 1px solid black;
    background-color:royalblue;
}