JS 常用函数一(弹对话框、操作HTML元素、写HTML文档、写到控制台、查找元素、元素插入内容、改变HTML属性、计时)
生活随笔
收集整理的這篇文章主要介紹了
JS 常用函数一(弹对话框、操作HTML元素、写HTML文档、写到控制台、查找元素、元素插入内容、改变HTML属性、计时)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
彈對話框
<script> window.alert(5 + 6); alert(5 + 6); </script><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>測試實例</title> <script> function myFunction() {alert("Hello World!"); } </script> </head><body> <button onclick="myFunction()">點我</button> </body> </html>確認框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><p>點擊按鈕，顯示確認框。</p> <button onclick="myFunction()">點我</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>點擊按鈕查看輸入的對話框。</p> <button onclick="myFunction()">點我</button> <p id="demo"></p> <script> function myFunction(){var x;var person=prompt("請輸入你的名字","Harry Potter");if (person!=null && person!=""){x="你好 " + person + "! 今天感覺如何?";document.getElementById("demo").innerHTML=x;} } </script></body> </html>換行
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><p>點擊按鈕在彈窗中使用換行。</p> <button onclick="myFunction()">點我</button> <p id="demo"></p> <script> function myFunction(){alert("Hello\nHow are you?"); } </script></body> </html>?
操作HTML元素
如需從 JavaScript 訪問某個 HTML 元素，您可以使用 document.getElementById(id) 方法。
請使用 "id" 屬性來標識 HTML 元素，并 innerHTML 來獲取或插入元素內容：
<!DOCTYPE html> <html> <body><p id="demo">我的第一個段落</p><script> document.getElementById("demo").innerHTML = "段落已修改。"; </script></body> </html>?
寫HTML文檔
<!DOCTYPE html> <html> <body><button onclick="myFunction()">點我</button><script> function myFunction() {document.write(Date()); } </script></body> </html>?
寫到控制臺
<!DOCTYPE html> <html> <body><script> a = 5; b = 6; c = a + b; console.log(c); </script></body> </html>?
通過 id 查找 HTML 元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><p id="intro">你好世界!</p> <p>該實例展示了 <b>getElementById</b> 方法!</p> <script> x=document.getElementById("intro"); document.write("<p>文本來自 id 為 intro 段落: " + x.innerHTML + "</p>"); </script></body> </html>?
通過標簽名查找 HTML 元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><p>你好世界!</p> <div id="main"> <p> DOM 是非常有用的。</p> <p>該實例展示了 <b>getElementsByTagName</b> 方法</p> </div> <script> var x=document.getElementById("main"); var y=x.getElementsByTagName("p"); document.write('id="main"元素中的第一個段落為：' + y[0].innerHTML); </script></body> </html>?
通過類名找到 HTML 元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><p class="intro">你好世界!</p> <p>該實例展示了 <b>getElementsByClassName</b> 方法!</p> <script> x=document.getElementsByClassName("intro"); document.write("<p>文本來自 class 為 intro 段落: " + x[0].innerHTML + "</p>"); </script> <p><b>注意：</b>Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p> </body> </html>
元素插入內容
<!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>以上段落通過腳本修改文本。</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>?
計時
- setInterval() - 間隔指定的毫秒數不停地執行指定的代碼。
- setTimeout() - 在指定的毫秒數后執行指定代碼。
setInterval()
- 第一個參數是函數（function）
- 第二個參數間隔的毫秒數
- clearInterval() 方法用于停止 setInterval() 方法執行的函數代碼
實例：實時顯示當前時間
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>哎西吧</title> </head> <body><p>頁面上顯示時鐘：</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() 方法會返回某個值。在上面的語句中，值被儲存在名為 myVar 的變量中。假如你希望取消這個 setTimeout()，你可以使用這個變量名來指定它。
- clearTimeout() 方法用于停止執行setTimeout()方法的函數代碼
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
新人創作打卡挑戰賽發博客就能抽獎！定制產品紅包拿不停！總結
以上是生活随笔為你收集整理的JS 常用函数一(弹对话框、操作HTML元素、写HTML文档、写到控制台、查找元素、元素插入内容、改变HTML属性、计时)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CS224n笔记二：word2vec
- 下一篇： 2017年html5行业报告,云适配发布