BOM

時間 2019-11-07

標籤 bom 简体版

原文原文鏈接

1.Opencss

 <input type="button" value="open" id="open"/>

Js:html

 document.getElementById("open").onclick = function () {
 window.open("http://www.baidu.com");

打開一個新的窗口，還有第二個參數瀏覽器

window.open("http://www.baidu.com","_self");

有時候咱們看到那些spa

這樣就能運行代碼是怎麼作的呢3d

HTML:code

<textarea id="txt1" rows="10"></textarea> 
<input id="btn1" type="button" value="運行" />

js:htm

 var oTxt = document.getElementById("txt1");
        var oBtn = document.getElementById("btn1");
        oBtn.onclick = function () {
            var oNewWin = window.open("about:blank");
            oNewWin.document.write(oTxt.value);
        };

這樣咱們將HTML源代碼放在文本域中運行代碼就能在新的頁面顯示blog

2.closerem

HTML:rpc

 <input id="btn1" type="button" value="關閉" />

JS:

var oBtn = document.getElementById("btn1");
        oBtn.onclick = function () {
            window.close();
        };

運行發如今IE下面須要關閉提示框關閉，在火狐下面沒法關閉

解決這個問題只能如今一個頁面打開這個須要關閉的頁面

var btn1 = document.getElementById("btn1");
    btn1.onclick = function () {
        window.open("close.html", "_blank");
    }

3.navigator

alert(window.navigator.userAgent);

彈出當前瀏覽器的版本

4.location

alert(window.location);

彈出當前頁的地址

window.location=http://www.baidu.com;

能夠指定瀏覽器的跳轉

5.confirm

var b=confirm("今天下雨了嗎？");
alert(b);

當咱們點擊確認彈出true，取消彈出false。

6.prompt

var str = prompt("請輸入您的姓名",’張三’);
    alert(str);

返回的是輸入的值，固然後面那個參數也能夠爲空，那個是默認值

7.scrollTop

好比咱們想作一個左側欄

HTML:

<div id="div1">
</div>

CSS:

     #div1 {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
        }

JS:

 window.onload=window.onresize= 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';
    };

咱們發現動來動去的時候DIV有點抖

咱們能夠改變CSS,固定定位，JS不要了：

     #div1 {
            width: 100px;
            height: 100px;
            background: red;
            position: fixed;
            right: 0;
            top:50%;
            margin-top:-50px;
        }

不過這個在IE6不支持，由於IE6不支持FIXED

8.回到頂部

<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="回到頂部" />

css：

#btn1 {position:fixed; bottom:0; right:0;}

JS:

window.onload=function ()
{
    var oBtn=document.getElementById('btn1');
    
    oBtn.onclick=function ()
    {
        setInterval(function (){
            var scollTop=document.documentElement.scrollTop||document.body.scrollTop;
            var iSpeed=Math.floor(-scollTop/8);
            
            document.documentElement.scrollTop=document.body.scrollTop=scollTop+iSpeed;
        }, 30);
    };
};

這樣有一個問題就是當滾動到頂部後，再把滾動條下拉，他會再次往上滾，咱們須要改進下

var oBtn=document.getElementById('btn1');
    var timer=null;
    
    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);
            }
            
            document.documentElement.scrollTop=document.body.scrollTop=scrollTop+iSpeed;
        }, 30);
    };

可是這樣有個問題就是當滾動條還沒滾動到頂部若是咱們拖動仍是存在搶的問題

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);
    };

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。