SOURCE

window.addEventListener("load",function(){
    var oBaiduWin;
    //此时this就是当前窗口(在同一函数中不能再被修改，根据上下文)
    var oOpenBaiduBtn=this.document.getElementById("openBaiduBtn");
    oOpenBaiduBtn.addEventListener("click",function(){
        //这个函数被openBaiduBtn调用，此时this就是这个button，只能用window
        oBaiduWin=window.open("https://www.baidu.com/?tn=49055317_12_hao_pg","_blank");
    },false);
    var oCloseBaiduBtn=this.document.getElementById("closeBaiduBtn");
    oCloseBaiduBtn.addEventListener("click",function(){
        oBaiduWin.close();
    },false);


},false);





//打开空白页面
var oBlankWin;
var oOpenNewBtn=this.document.getElementById("openNewBtn");
oOpenNewBtn.addEventListener("click",function(){
    oBlankWin=window.open();
},false);

//设置空白页面
var oChangeNewBtn=this.document.getElementById("changeNewBtn");
oChangeNewBtn.addEventListener("click",function(){
    oBlankWin.document.title="新窗口";
    console.log(oBlankWin.location.href);
    oBlankWin.location.href="https://www.baidu.com";
    //查看当前网址，不能更改网址
    //oBlankWin.document.URL="https://www.baidu.com";
    console.log(oBlankWin.location.href);
    // oBlankWin.document.body.innerHTML="<div>I'm a new window</div>";
    // oBlankWin.document.body.style.color="blue";
},false);

//关闭空白页面
var oCloseNewBtn=this.document.getElementById("closeNewBtn");
oCloseNewBtn.addEventListener("click",function(){
    oBlankWin.close();
},false);


//告警窗口
var oAlertBtn=this.document.getElementById("alertBtn");
oAlertBtn.addEventListener("click",function(){
    window.alert("我是告警窗口");
},false);

//确认窗口
var oConfirmBtn=this.document.getElementById("confirmBtn");
oConfirmBtn.addEventListener("click",function(){
    var bOpen=window.confirm("你想要打开百度吗");
    if(bOpen){
        window.open("https://www.baidu.com/?tn=49055317_12_hao_pg");
    }
},false);

//提示窗口
var oPromptBtn=this.document.getElementById("promptBtn");
oPromptBtn.addEventListener("click",function(){
    var oText=window.document.getElementById("text");
    var text=window.prompt("请输入提示文字：");
    oText.innerHTML=text;
},false);

//显示当前页面（当前窗口）URL的地址
console.log(window.location.href);
//显示（从问号 (?) 开始的 URL（查询部分））的地址
console.log(window.location.search);
//显示从井号 (#) 开始的 URL（锚）的地址
console.log(window.location.hash);
//显示主机名和当前 URL 的端口号
console.log(window.location.host);
//显示当前 URL 的主机名
console.log(window.location.hostname);
//当前 URL 的路径部分
console.log(window.location.pathname);
//当前 URL 的端口号
console.log(window.location.port);
//当前 URL 的协议
console.log(window.location.protocol);
console.log("--------------");
//声明了浏览器用于 HTTP 请求的用户代理头的值:用户代理
console.log(window.navigator.userAgent);

//document是window的子对象
console.log(document.URL);




//一次性跳转页面
var oStartTimerBtn=this.document.getElementById("startTimer");
var oStopTimerBtn=this.document.getElementById("stopTimer");
var oTimerBox=this.document.getElementById("timerBox");
var oResetTimer=this.document.getElementById("resetTimer");
//下面的变量timer不能直接在监听器里声明
//在函数内部声明是局部变量 下面的关闭函数会获取不到这个变量 显示timer未定义 
//所以把timer定义为null 意思设置为一个空对象 然后把定时器赋值给这个timer空对象
var timer=null;

//错误：background拼错单词
function changeColor(){
    oTimerBox.style.backgroundColor="red";
}

//设置时间：5秒进行颜色的改变
oStartTimerBtn.addEventListener("click",function(){
    timer=window.setTimeout(changeColor,5000);
},false);

//阻止 setTimeout() 方法执行函数 ,在5秒之内点击，颜色将不会改变，再次点击开始时，从5秒开始计算
oStopTimerBtn.addEventListener("click",function(){
    window.clearTimeout(timer);
    
},false);

oResetTimer.addEventListener("click",function(){
    oTimerBox.style.backgroundColor="lightblue";
},false);



 //轮播图
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 oResetInterval=this.document.getElementById("resetInterval");


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];
        //报错原因：background拼错  应该赋予color非colors
        oIntervalBox.style.backgroundColor=color;
        oIntervalText.innerHTML=count;
    }
}


oStartIntervalBtn.addEventListener("click",function(){
    //setInterval() 函数会每2秒执行一次函数
    interval=window.setInterval(changeColorInterval,2000);
},false);

oStopIntervalBtn.addEventListener("click",function(){
    //使用 clearInterval() 来停止执行
    window.clearInterval(interval);  
},false);


oResetInterval.addEventListener("click",function(){
    window.clearInterval(interval);
    count=6;
    oIntervalText.innerHTML=count;
    oIntervalBox.style.backgroundColor="royalblue";
},false);

//一一对应
//1、setTimeout()用于设置一个定时器 该定时器在定时器到期后执行调用函数
//2、clearTimeout()  停止定时器，括号里写的是定时器的名字
//3、setInterval(调用函数，[延迟的毫秒数])  
//setInterval()与setTimeout的区别是: 这个是每间隔几秒就会执行一次函数 会调用很多次 重复调用这个函数
//4、clearInterval() 清除定时器  这个是清除重复调用的定时器 就是上面那个setInterval()


//<pre> 标签可定义预格式化的文本。被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
//在HTML的解析中，只会把</br>解析成换行
//"\n"会被解析成空白符,空白符就被解析成一个空格
//区别：多了一个空格
document.write("Javascript");
document.write("CSS");
document.write("HTML");
document.write("<br/>");
document.writeln("Javascript");
document.writeln("CSS");
document.writeln("HTML");
//当在<pre></pre><textarea></textaera>标签中时，writeln()会换行，"\n"不会解析成空白符
//区别：是否换行
document.write("<pre>Javascript");
document.write("CSS");
document.write("HTML</pre>");
document.write("<br/>");
document.writeln("<pre>Javascript");
document.writeln("CSS");
document.writeln("HTML</pre>");

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
    </script>
</head>
<body>
    <div>
        <button id="openBaiduBtn">打开百度</button>
        <button id="closeBaiduBtn">关闭百度</button>
    </div>
    <div>
        <button id="openNewBtn">打开空白页面</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>
        <button id = "startTimer">开始</button>
        <button id = "stopTimer">结束</button>
        <button id = "resetTimer">重置</button>
        
        <div id="timerBox"></div>
    </div>
    <br/>
    <div>
        <button id = "startInterval">开始</button>
        <button id = "stopInterval">停止</button>
        <button id = "resetInterval">重置</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;
}