js第6章BOM案例：打开和关闭窗口、窗口位置和大小、计数器、更改URL、
作者：互联网
1.打开和关闭窗口
<body>
<p><input type="button" value="打开窗口" onclick="openWin()"></p>
<p><input type="button" value="关闭窗口" onclick="closeWin()"></p>
<p><input type="button" value="检测窗口是否关闭" onclick="checkWin()"></p>
<p id="msg"></p>
<script>
var myWindow;
function openWin() {
myWindow = window.open('', 'newWin', 'width=400,height=200,left=200');
myWindow.document.write('<p>窗口名称为：' + myWindow.name + '</p>');
myWindow.document.write('<p>当前窗口的父窗口地址：' + window.parent.location + '</p>');
}
function closeWin() {
myWindow.close();
}
function checkWin() {
if (myWindow) {
var str = myWindow.closed ? '窗口已关闭！' : '窗口未关闭！';
} else {
var str = '窗口没有被打开!';
}
document.getElementById('msg').innerHTML = str;
}
</script>
</body>运行效果：
2.窗口位置和大小
<body>
<input type="button" value="打开窗口" onclick="openWin()">
<input type="button" value="调整窗口位置和大小" onclick="changeWin()">
<script>
var myWindow;
function openWin() {
myWindow = window.open('', 'newWin', 'width=250,height=300');
getPosSize(); // 获取窗口信息
}
function changeWin() {
myWindow.moveBy(250, 250); // 将newWin窗口下移250像素，右移250像素
myWindow.focus(); // 获取移动后newWin窗口的焦点
myWindow.resizeTo(500, 350); // 修改newWin窗口的宽度为500，高度为350
getPosSize(); // 获取窗口信息
}
function getPosSize() {
// 获取相对于屏幕窗口的坐标
var x = myWindow.screenLeft, y = myWindow.screenTop;
// 获取窗口和文档的高度和宽度
var inH = myWindow.innerHeight, inW = myWindow.innerWidth;
var outH = myWindow.outerHeight, outW = myWindow.outerWidth;
myWindow.document.write('<p>相对屏幕窗口的坐标：(' + x + ',' + y + ')</p>');
myWindow.document.write('<p>文档的高度和宽度：' + inH + ',' + inW + '</p>');
myWindow.document.write('<p>窗口的高度和宽度：' + outH + ',' + outW + '</p><hr>');
}
</script>
</body>运行效果：
3.计数器
<body>
<input type="button" value="开始计数" onclick="startCount()">
<input id="num" type="text">
<input type="button" value="停止计数" onclick="stopCount()">
<script>
var timer = null, c = 0;
function timedCount() { // 在文本框中显示数据
document.getElementById('num').value = c;
++c; // 显示数据加1
}
function startCount() { // 开始间歇调用
timer = setInterval(timedCount, 1000);
}
function stopCount() { // 清除间歇调用
clearInterval(timer);
}
</script>
</body>运行效果：
4.更改URL
<body>
<input type="button" value="载入新文档" onclick="newPage()">
<input type="button" value="刷新页面" onclick="freshPage()">
<p id="time"></p>
<script>
// 获取并显示当前页面载入的时间
var ds = new Date(), d = ds.getDate();
var t = ds.toLocaleTimeString();
document.getElementById('time').innerHTML = t;
// 载入新文档
function newPage() {
window.location.assign('http://www.example.com')
}
// 刷新文档
function freshPage() {
location.reload(true);
}
</script>
</body>运行效果：
5.历史记录跳转
<body>
<input type="button" value="前进" onclick="goForward()">
<input type="button" value="新网页" onclick="newPage()">
<script>
function newPage() { // 打开一个新的文档
window.location.assign('show.html');
}
function goForward() { // 前进
history.go(1);
}
</script>
</body>show.html
<body>
<input type="button" value="后退" onclick="goBack()">
<script>
function goBack() {
history.go(-1);
}
</script>
</body>运行效果：
6.红绿灯倒计时。现实生活中,为保证行人和车辆安全有序地通行,交叉路口都会设置交通信号灯。横向三色交通信号灯的亮灯顺序一般为“绿→黄→红→绿”依次循环。其中,亮灯时长需根据路口的实际情况等因素来考虑设置。例如,将某一个十字路口的交通信号灯每分钟红灯亮设置为30秒,绿灯亮设置为35秒,黄灯亮设置为5秒。
<style>
.box{width:250px;height:52px;padding:15px 30px;border:2px solid #ccc;border-radius:16px;margin:0 auto;}
.box .count{width:60px;color:#666;font-size:280%;line-height:50px;padding-left:6px;margin-left:5px;border:1px solid #fff}
.box div{margin-left:5px;float:left;width:50px;height:50px;border-radius:50px;border:1px solid #666;}
.gray{background-color:#eee;}
.red{background-color:red;}
.yellow{background-color:yellow;}
.green{background-color:#26ff00;}
</style><body>
<div class="box">
<div id="red"></div>
<div id="yellow"></div>
<div id="green"></div>
<div class="count" id="count"></div>
</div>
<script>
// 获取红、黄、绿灯以及倒计时的元素对象
var lamp = {
red: {
obj: document.getElementById('red'),
timeout: 30,
style: ['red', 'gray', 'gray'],
next: 'green'
},
yellow: {
obj: document.getElementById('yellow'),
timeout: 5,
style: ['gray', 'yellow', 'gray'],
next: 'red'
},
green: {
obj: document.getElementById('green'),
timeout: 35,
style: ['gray', 'gray', 'green'],
next: 'yellow'
},
changeStyle(style) {
this.red.obj.className = style[0];
this.yellow.obj.className = style[1];
this.green.obj.className = style[2];
}
};
var count = {
obj: document.getElementById('count'),
change: function(num) {
this.obj.innerHTML = (num < 10) ? ('0' + num) : num;
}
};
var now = lamp.green;
var timeout = now.timeout;
lamp.changeStyle(now.style);
count.change(timeout);
setInterval(function() {
if (--timeout <= 0) {
now = lamp[now.next];
timeout = now.timeout;
lamp.changeStyle(now.style);
}
count.change(timeout);
}, 1000);
</script>
</body>运行效果：
标签：function,style,窗口,URL,js,var,myWindow,document 来源： https://blog.csdn.net/WHT869706733/article/details/121737497