JSでのBOM操作に関する知識ポイント

angryTom
リリース: 2019-12-31 17:11:53
転載
2270 人が閲覧しました

JSでのBOM操作に関する知識ポイント

#JS での BOM 操作のナレッジ ポイント

ウィンドウ オブジェクト

グローバル変数とグローバル メソッドは次のとおりです。両方 ウィンドウに戻る

alert-comfirm-prompt

アラート、確認、その他のポップアップ ボックスのプロンプト テキストで行の折り返しを実現します:\n

// confirm()
// 点击确定返回true,取消返回false
var btn=document.getElementById("btn");
btn.onclick=function(){           // 弹出确认对话框
   var result=window.confirm("您确定要删除吗?删除之后该信息\n将不可恢复!");           if(result){
           document.getElementById("box").style.display="none";
   }
}       // prompt("text","defaultText")
// text:对话框中显示的纯文本
// defaultText:默认的输入文本
// 点击确认返回文本,点击取消返回null
var message=prompt("请输入您的星座","天蝎座");
console.log(message);
ログイン後にコピー

open- close


open メソッドの url パラメータが空の場合、新しいウィンドウも開きますが、ドキュメントは表示されません

window.onload = function(){             
// 打开子窗口,显示
newwindow.html
window.open("newwindow.html","newwindow","width=400,height=200,
        left=0,top=0,toolbar=no,menubar=no,scrollbars=no,location=
        no,status=no");             
        var quit = document.getElementById("quit");             
    // 点击关闭当前窗口
     quit.onclick = function(){
           window.close("newwindow.html");
     }
}
ログイン後にコピー

setTimeout() への呼び出しの遅延


//调用函数
var fnCall=function(){
     alert("world");
}
setTimeout(fnCall,5000);       //调用匿名函数
var timeout1=setTimeout(function(){
  alert("hello");
},2000)

clearTimeout(timeout1);
ログイン後にコピー

次の要件を満たします。


(1) 「削除」ボタンをクリックしてから 3 秒後に、ページ上の p の文字が消えます

(2) ) 「削除」ボタンをクリックした後、3 秒以内に「削除をキャンセル」ボタンをクリックすると、ページ上の p のテキストは削除されません

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>定时器</title>
    <style type="text/css">
        p{width:400px;height:120px;margin-top:50px;border:2px solid gray;padding:10px;}    
    </style>
</head>
<body>
     <input type="button" value="删除">
     <input type="button" value="取消删除">
    <p>点击"删除"按钮后,里面的内容将在3秒钟后消失;
    <br/><br/>如点击了"删除"后又不想删除内容,请在点击"删除"按钮3秒之内点击"取消删除"按钮即可</p>
    <script type="text/javascript">       
    var btn1=document.getElementsByTagName(&#39;input&#39;)[0];       
    var btn2=document.getElementsByTagName(&#39;input&#39;)[1];       
    var p=document.getElementsByTagName(&#39;p&#39;)[0];       
    var timer;

       btn1.onclick=function(){
        timer=setTimeout(function(){
          p.innerHTML=&#39;&#39;;
        },3000);
       }

       btn2.onclick=function(){
          clearTimeout(timer);
        }    </script>
</body>
</html>
ログイン後にコピー

検証コードカウントダウンの場合:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload=function(){            
        var  btn=document.getElementById("btn");            
        var  times=10;            
        var  timer=null;
            btn.onclick=function(){                
            if(this.getAttribute("clicked")){return false;}                
            var _this=this;
                timer=setInterval(function(){
                    times--;                    
                    if(times<=0){
                        clearInterval(timer);
                        _this.value="发送验证码";                        //_this.disabled=false;
                        _this.removeAttribute("clicked",false);
                        times=10;
                    }else{
                        _this.value=times+&#39;秒后重试&#39;;                        //_this.disabled=true;
                        _this.setAttribute("clicked",true);
                    }
                },1000)
            }
        }    </script>
</head>
<body>

<p class="box">
    <input type="button" value="发送验证码" id="btn">
</p>

</body>
</html>
ログイン後にコピー

点滅するテキスト:

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>闪烁的文字</title>
        <style type="text/css">
            p{
                width:200px;
                height:200px;
                line-height:200px;
                border:2px solid gray;
                text-align:center;
                color:red;
            }        </style>
    </head>
<body>
    <h3>会闪烁的文字</h3>
        <p id="text"> </p>
        <script type="text/javascript">            
            var text=document.getElementById(&#39;text&#39;);            
            var flag=0;
            setInterval(function(){              
            if(flag==0){
                flag=1;
                text.innerHTML=&#39;☆☆☆今日特卖☆☆☆&#39;;
              }else if(flag==1){
                flag=0;
                text.innerHTML=&#39;★★★今日特卖★★★&#39;;
              }
            },500);        </script>
    </body>
</html>
ログイン後にコピー

location.href は現在のページの完全な URL を返します。

location.hash # ステップの後ろに戻る

       console.log(location.href);
       console.log(location.hash);       
       var btn=document.getElementById("btn");
       btn.onclick=function(){             
       // 可以实现跳转
          location.hash="#top";
       }       // 返回服务器名称和端口号
       // 本地不行,要到服务器上       
       console.log(location.host);       // 返回服务器名称       
       console.log(location.hostname);       // 返回URL中的目录和文件名       
       console.log(location.pathname);       // 返回URL中的查询字符串,以?开头
       console.log(location.search);
ログイン後にコピー

screen オブジェクト


        setTimeout(function(){           // 会在历史记录中生成新纪录
            location.href=&#39;index6.html&#39;;
            window.location=&#39;index6.html&#39;;   // 不会在历史记录中生成新纪录
            location.replace("index6.html");
        },1000)
         document.getElementById("reload").onclick=function(){   // 有可能从缓存中加载            location.reload();            // 从服务器重新加载
             location.reload(true);
         }
ログイン後にコピー

navigator オブジェクト


var btn = document.getElementById("btn");    
var btn2 = document.getElementById("btn2");    
var btn3 = document.getElementById("btn3");    
// 点击btn按钮时回到历史记录的上一步,后退
btn.onclick = function() {        // 方法一        
        history.back();        // 方法二
    history.go(-1);
}    
// 点击btn2按钮时回到历史记录的下一步,前进
btn2.onclick = function() {  // 方法一        
history.forward();        // 方法二
    history.go(1);
}
btn3.onclick = function() {        // 前进n步        
    history.go(n);        // 后退n步
    history.go(-n);
}
ログイン後にコピー

この記事は、

js チュートリアル

列、ぜひ学習してください。

以上がJSでのBOM操作に関する知識ポイントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:cnblogs.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート