Heim > Artikel > Web-Frontend > Xiaoqiangs mobile HTML5-Entwicklungsstraße (32) – JavaScript-Rezension 7
Xiaoqiangs mobile HTML5-Entwicklungsstraße (32) – JavaScript-Rezension 7
- 黄舟Original
- 2017-02-04 14:35:311193Durchsuche
BOM-Modell Browserobjektmodell (Browserobjektmodell), der Browser selbst kann über einige im Browser integrierte Objekte bedient werden.
DOM wird zum Betrieb der Seite und BOM zum Betrieb des Browsers selbst verwendet.
BOM ist nicht standardisiert, aber die meisten Browser unterstützen die folgenden Objekte
1. Fensterobjekt: stellt das gesamte Fenster dar
(1) open Methode: (Name , Eigenschaften, Höhe und Breite, Symbolleiste, Bildlaufleiste)
(2) setTimeout-Methode: setTimeout(fn, milliseconds); //Der erste Parameter muss ein Funktionsname sein (keine Klammern erlaubt) )
<html>
<head>
<script>
function f1(){
//win指向了新打开的窗口
var win = window.open('day05_03','wi_1',
'width=400,height=400');
setTimeout(function(){
win.close();
}, 5000);
}
</script>
</head>
<body>
<input type="button" value="click me" onclick="f1();"/>
</body>
</html>(3) setInterval-Methode
var taskId = setInterval(fn, milliseconds); //Führen Sie etwas nach der angegebenen Zeitintervallfunktion aus
(4) Methode „clearInterval“
clearInterval(taskId); Box
<html>
<head>
<style>
#d1{
width:80px;
height:80px;
background-color:blue;
position:relative;
}
</style>
<script src="myjs.js"></script>
<script>
function f2(){
var v1 = parseInt($('d1').style.left);
$('d1').style.left = v1 + 50 + 'px';
}
function f1(){
var taskId = setInterval(f2, 500);
setTimeout(function(){
clearInterval(taskId);
},5000)
}
</script>
</head>
<body>
<div id="d1" style="left:10px;"></div>
<input type="button" value="click me"
onclick="f1();"/>
</body>
</html>
(6) Methode „confirm()“
2. Dokumentobjekt: stellt den Stamm des gesamten Dokuments dar
<html>
<head>
<script>
function f3(){
var flag = confirm('你喜欢钱吗？');
alert(flag);
}
function f4(){
var info = prompt('请输入手机号');
alert('你输入的手机号是：' + info);
}
</script>
</head>
<body>
<input type="button" value="click me"
onclick="f4();"/>
</body>
</html>
getElementById(id);
createElement(tagName);
write(string); Relevante Informationen am angegebenen Ort ausgeben
3. Standortobjekt: kapselt relevante Informationen der Browser-Adressleiste
href-Attribut: Gibt die zu ladende Seite an<html>
<!-- document对象 -->
<head></head>
<body style="font-size:30px;">
开始输出helloword<br/>
<script>
for(i=0; i<100; i++){
document.write('hello world<br/>');
}
</script>
</body>
</html>reload Methode: Lädt die aktuelle Seite neu, was einer Aktualisierung entspricht
4 , History-Objekt: kapselt relevante Informationen über Seiten, die der Browser besucht hat
<html>
<!-- location对象 -->
<head></head>
<body>
<input type="button"
value="跳转到另外一个页面" onclick="location.href = 'day05_04.html';"/><br/>
<input type="button"
value="刷新当前页面" onclick="location.reload();"/>
</body>
</html>forward( ): vorwärts gehen go (Parameter): vorwärts mit einer positiven Zahl, zurückgehen mit einer negativen Zahl
5, Navigatorobjekt: kapselt browserbezogene Informationen (z. B : Typ, Version)
<html>
<!-- history对象 -->
<head></head>
<body>
<input type="button"
value="点这里后退" onclick="history.back();"/>
<input type="button"
value="点这里前进" onclick="history.forward();"/>
<input type="button"
value="点这儿后退" onclick="history.go(-1);"/>
</body>
</html>6, Bildschirmobjekt: der Bildschirm, auf dem sich der Browser befindet Zugehörige Informationen <html>
<!--navigator对象-->
<head></head>
<body>
现在访问的浏览器的相关信息如下：<br/>
<script>
var info;
//for in循环：主要用于遍历对象
for(propName in navigator){ //propName是任意变量
// 将navigator对象的属性名保存到propName变量里
info += propName + ';' +navigator[propName] + '<br/>';
}
document.write(info); //在当前页面输出
</script>
</body>
</html><html>
<!--检测浏览器类型-->
<head>
<script>
function f1(){
if((navigator.userAgent).indexOf('Firefox')>0){
alert("当前浏览器是Firefox");
}else if(navigator.userAgent.indexOf('MSIE')>0){
alert("当前浏览器是IE");
}else{
alert("其他浏览器");
}
}
</script>
</head>
<body>
<input type="button"
value="获得当前浏览器的类型" onclick="f1();"/>
</body>
</html><html>
<head>
<script>
function f2(){
alert(screen.width + ' ' +
screen.height);
}
</script>
</head>
<body>
<input type="button"
value="获得screen相关信息" onclick="f2();"/>
</body>
</html>Die Oben ist der Inhalt von Xiaoqiangs mobiler HTML5-Entwicklung (32) – JavaScript Review 7. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!