BOM.
- window.open() 方法及相关参数
<script>
window.onload=function()
{
var oBtn=document.getElementById("btn1");
oBtn.onclick=function()
{
//第一个参数地址，第二个参数哪个框架打开target，_blank默认
window.open('http://baidu.com','_self');
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="开窗口" />
</body>
<title>点击 write按钮变内容</title>
<script>
window.onload=function()
{
var oBtn=document.getElementById("btn1");
oBtn.onclick=function()
{
//清空当前页面
document.write('dfd');
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="write" />
</body>
- 运行代码框实例
<title>点击运行，文本框内容会打开新的页面</title>
<script>
window.onload=function()
{
var oTxt=document.getElementById('txt1');
var oBtn=document.getElementById("btn1");
oBtn.onclick=function()
{
var oNewWin=window.open('about:blank');
oNewWin.document.write(oTxt.value);
}
}
</script>
</head>
<body>
<textarea id="txt1" rows="10" cols="40"></textarea><br />
<input id="btn1" type="button" value="write" />
</body>
- document.write() 方法
- about:blank 打开新窗口及返回值
- close()关闭当前窗口及新开窗口特性
<script>
window.onload=function()
{
var oBtn=document.getElementById("btn1");
oBtn.onclick=function()
{
//window.close(); --untitled-2.html内容
//不允许火狐关闭，用户手动打开的只能用户关，要想关，只能用open打开，然后弹出关闭页面，关闭
window.open("untitled-2.html","_self");
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="点我" />
</body>
- window.navigator.userAgent 检测浏览器版本
<script>
alert(window.navigator.userAgent);
</script>
- window.location 读写地址栏
<script>
//alert(window.location);//当前页面的地址
window.location="http://baidu.com";
</script>
-
可社区尺寸、滚动距离
image.png - 系统对话框及返回值
<script>
alert('abc'); //警告框，没有返回值
var b=confirm("今天下雨吗？"); //返回boolean
alert(b);
var str=prompt('请输入你的姓名','blue'); //返回字符串或null
alert(str); //输入框
</script>
- 侧边栏广告实例
<style>
#div1 {width:100px; height:100px; background:red; position:fixed; right:0; top:50%; margin-top:-50px;}
</style>
<title>侧边栏--不兼容ie6</title>
</head>
<body style="height:2000px;">
<div id="div1">
</div>
</body>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute; right:0; top:0;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>兼容ie6</title>
<script src="move.js"></script>
<script>
//窗口放大缩小，窗口刚开的时候，滑动滚动条的时候
window.onresize=window.onload=window.onscroll=function ()
{
var oDiv=document.getElementById('div1');
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var t=(document.documentElement.clientHeight-oDiv.offsetHeight)/2;
//oDiv.style.top=scrollTop+t+'px';
startMove(oDiv, {top: scrollTop+t});
};
</script>
</head>
<body style="height:2000px;">
<div id="div1">
</div>
</body>
- window.onscroll 事件及处理窗口变化等细节
- 解决滚动条闪烁问题：固定定位与滑动效果
- 返回顶部效果实例
<style>
#btn1 {position:fixed; bottom:0; right:0;}
</style>
<script>
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
var bSys=true;
var timer=null;
//如何检测用户拖动了滚动条
window.onscroll=function ()
{
if(!bSys)
{
clearInterval(timer);
}
bSys=false;
};
oBtn.onclick=function ()
{
timer=setInterval(function (){
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var iSpeed=Math.floor(-scrollTop/8);
if(scrollTop==0)
{
clearInterval(timer);
}
bSys=true;
document.documentElement.scrollTop=document.body.scrollTop=scrollTop+iSpeed;
}, 30);
};
};
</script>
</head>
<body>
1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />35<br />36<br />37<br />38<br />39<br />40<br />41<br />42<br />43<br />44<br />45<br />46<br />47<br />48<br />49<br />50<br />51<br />52<br />53<br />54<br />55<br />56<br />57<br />58<br />59<br />60<br />61<br />62<br />63<br />64<br />65<br />66<br />67<br />68<br />69<br />70<br />71<br />72<br />73<br />74<br />75<br />76<br />77<br />78<br />79<br />80<br />81<br />82<br />83<br />84<br />85<br />86<br />87<br />88<br />89<br />90<br />91<br />92<br />93<br />94<br />95<br />96<br />97<br />98<br />99<br />100<br />101<br />102<br />103<br />104<br />105<br />106<br />107<br />108<br />109<br />110<br />111<br />112<br />113<br />114<br />115<br />116<br />117<br />118<br />119<br />120<br />121<br />122<br />123<br />124<br />125<br />126<br />127<br />128<br />129<br />130<br />131<br />132<br />133<br />134<br />135<br />136<br />137<br />138<br />139<br />140<br />141<br />142<br />143<br />144<br />145<br />146<br />147<br />148<br />149<br />150<br />151<br />152<br />153<br />154<br />155<br />156<br />157<br />158<br />159<br />160<br />161<br />162<br />163<br />164<br />165<br />166<br />167<br />168<br />169<br />170<br />171<br />172<br />173<br />174<br />175<br />176<br />177<br />178<br />179<br />180<br />181<br />182<br />183<br />184<br />185<br />186<br />187<br />188<br />189<br />190<br />191<br />192<br />193<br />194<br />195<br />196<br />197<br />198<br />199<br />200<br />201<br />202<br />203<br />204<br />205<br />206<br />207<br />208<br />209<br />210<br />211<br />212<br />213<br />214<br />215<br />216<br />217<br />218<br />219<br />220<br />221<br />222<br />223<br />224<br />225<br />226<br />227<br />228<br />229<br />230<br />231<br />232<br />233<br />234<br />235<br />236<br />237<br />238<br />239<br />240<br />241<br />242<br />243<br />244<br />245<br />246<br />247<br />248<br />
<input id="btn1" type="button" value="回到顶部" />
</body>
- 解决定时器与事件冲突的问题
