JS 常用函数一(弹对话框、操作HTML元素、写HTML文档、写到控制台、查找元素、元素插入内容、改变HTML属性、计时)
生活随笔
收集整理的這篇文章主要介紹了
JS 常用函数一(弹对话框、操作HTML元素、写HTML文档、写到控制台、查找元素、元素插入内容、改变HTML属性、计时)
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
彈對(duì)話框
<script> window.alert(5 + 6); alert(5 + 6); </script><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>測(cè)試實(shí)例</title> <script> function myFunction() {alert("Hello World!"); } </script> </head><body> <button onclick="myFunction()">點(diǎn)我</button> </body> </html>確認(rèn)框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><p>點(diǎn)擊按鈕，顯示確認(rèn)框。</p> <button onclick="myFunction()">點(diǎn)我</button> <p id="demo"></p> <script> function myFunction(){var x;var r=confirm("按下按鈕!");if (r==true){x="你按下了\"確定\"按鈕!";}else{x="你按下了\"取消\"按鈕!";}document.getElementById("demo").innerHTML=x; } </script></body> </html>提示框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><p>點(diǎn)擊按鈕查看輸入的對(duì)話框。</p> <button onclick="myFunction()">點(diǎn)我</button> <p id="demo"></p> <script> function myFunction(){var x;var person=prompt("請(qǐng)輸入你的名字","Harry Potter");if (person!=null && person!=""){x="你好 " + person + "! 今天感覺(jué)如何?";document.getElementById("demo").innerHTML=x;} } </script></body> </html>換行
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><p>點(diǎn)擊按鈕在彈窗中使用換行。</p> <button onclick="myFunction()">點(diǎn)我</button> <p id="demo"></p> <script> function myFunction(){alert("Hello\nHow are you?"); } </script></body> </html>?
操作HTML元素
如需從 JavaScript 訪問(wèn)某個(gè) HTML 元素，您可以使用 document.getElementById(id) 方法。
請(qǐng)使用 "id" 屬性來(lái)標(biāo)識(shí) HTML 元素，并 innerHTML 來(lái)獲取或插入元素內(nèi)容：
<!DOCTYPE html> <html> <body><p id="demo">我的第一個(gè)段落</p><script> document.getElementById("demo").innerHTML = "段落已修改。"; </script></body> </html>?
寫(xiě)HTML文檔
<!DOCTYPE html> <html> <body><button onclick="myFunction()">點(diǎn)我</button><script> function myFunction() {document.write(Date()); } </script></body> </html>?
寫(xiě)到控制臺(tái)
<!DOCTYPE html> <html> <body><script> a = 5; b = 6; c = a + b; console.log(c); </script></body> </html>?
通過(guò) id 查找 HTML 元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><p id="intro">你好世界!</p> <p>該實(shí)例展示了 <b>getElementById</b> 方法!</p> <script> x=document.getElementById("intro"); document.write("<p>文本來(lái)自 id 為 intro 段落: " + x.innerHTML + "</p>"); </script></body> </html>?
通過(guò)標(biāo)簽名查找 HTML 元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><p>你好世界!</p> <div id="main"> <p> DOM 是非常有用的。</p> <p>該實(shí)例展示了 <b>getElementsByTagName</b> 方法</p> </div> <script> var x=document.getElementById("main"); var y=x.getElementsByTagName("p"); document.write('id="main"元素中的第一個(gè)段落為：' + y[0].innerHTML); </script></body> </html>?
通過(guò)類名找到 HTML 元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><p class="intro">你好世界!</p> <p>該實(shí)例展示了 <b>getElementsByClassName</b> 方法!</p> <script> x=document.getElementsByClassName("intro"); document.write("<p>文本來(lái)自 class 為 intro 段落: " + x[0].innerHTML + "</p>"); </script> <p><b>注意：</b>Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p> </body> </html>
元素插入內(nèi)容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<body><p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
<p>以上段落通過(guò)腳本修改文本。</p></body>
</html>
?
改變HTML屬性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><img id="image" src="smiley.gif" width="160" height="120"> <script> document.getElementById("image").src="landscape.jpg"; </script> <p>原圖片為 smiley.gif,腳本將圖片修改為 landscape.jpg</p></body> </html>?
計(jì)時(shí)
- setInterval() - 間隔指定的毫秒數(shù)不停地執(zhí)行指定的代碼。
- setTimeout() - 在指定的毫秒數(shù)后執(zhí)行指定代碼。
setInterval()
- 第一個(gè)參數(shù)是函數(shù)（function）
- 第二個(gè)參數(shù)間隔的毫秒數(shù)
- clearInterval() 方法用于停止 setInterval() 方法執(zhí)行的函數(shù)代碼
實(shí)例：實(shí)時(shí)顯示當(dāng)前時(shí)間
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>哎西吧</title> </head> <body><p>頁(yè)面上顯示時(shí)鐘：</p> <p id="demo"></p> <button onclick="myStopFunction()">停止</button> <script> var myVar=setInterval(function(){myTimer()},1000); function myTimer(){var d=new Date();var t=d.toLocaleTimeString();document.getElementById("demo").innerHTML=t; } function myStopFunction(){clearInterval(myVar); } </script></body> </html>setTimeout() 方法
- setTimeout() 方法會(huì)返回某個(gè)值。在上面的語(yǔ)句中，值被儲(chǔ)存在名為 myVar 的變量中。假如你希望取消這個(gè) setTimeout()，你可以使用這個(gè)變量名來(lái)指定它。
- clearTimeout() 方法用于停止執(zhí)行setTimeout()方法的函數(shù)代碼
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
新人創(chuàng)作打卡挑戰(zhàn)賽發(fā)博客就能抽獎(jiǎng)！定制產(chǎn)品紅包拿不停！總結(jié)
以上是生活随笔為你收集整理的JS 常用函数一(弹对话框、操作HTML元素、写HTML文档、写到控制台、查找元素、元素插入内容、改变HTML属性、计时)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： CS224n笔记二：word2vec
- 下一篇： HTML ＜input＞ require