console
window.addEventListener("load", function() {
var oBaiduWin;
var oOpenBaiduBtn = this.document.getElementById("openBaiduBtn");
oOpenBaiduBtn.addEventListener("click", function(){
oBaiduWin = window.open("http://www.baidu.com", "_blank");
console.log("line 9:" + oBaiduWin.document.referrer);
},false);
var oCloseBaiduBtn = this.document.getElementById("closeBaiduBtn");
oCloseBaiduBtn.addEventListener("click", function(){
oBaiduWin.close();
},false);
var oBlankWin;
var oOpenNewBtn = this.document.getElementById("openNewBtn");
oOpenNewBtn.addEventListener("click", function(){
oBlankWin = window.open();
console.log(oBlankWin.location.href);
});
var oChangeNewBtn = this.document.getElementById("changeNewBtn");
oChangeNewBtn.addEventListener("click", function(){
oBlankWin.document.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.location.href = "http://www.baidu.com";
console.log(oBlankWin.location.href);
});
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("http://www.baidu.com");
}
},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);
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);
});
console.log(window.location.href);
console.log(window.location.search);
console.log(window.location.hash);
console.log(window.navigator.userAgent);
if (window.navigator.userAgent.indexOf("Chrome") > -1) {
console.log("I'm Chrome");
}
},false)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
</script>
</head>
<body>
<div>
<button id="openBaiduBtn">打开百度</button>
<button id="closeBaiduBtn">关闭百度</button>
</div>
<br/>
<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>
<div id="timerBox"></div>
</div>
<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;
}