對於前端初學者，個人JS樣式常用的有兩種：內嵌樣式 ，外聯樣式；下面通過一個簡單的鼠標點擊出現設定的驗證數字為例進行演示；
先看下效果：
鼠標點擊前效果：
鼠標點擊后效果：
圖中的
這個ojbk是我js函數設定的
下面展示我的js的內嵌樣式：
我的內嵌js代碼：
<script> //內嵌樣式 function random() { document.getElementById("random").innerHTML = "ojbk"; }
</script>
html中調用js內嵌樣式代碼：
<button type="button" onclick="random()" class="buttonstyle1">點擊驗證</button>
下面展示我的js的外聯樣式：
我的外聯js樣式表代碼：
文件內容：
function random()
{
document.getElementById("random").innerHTML ='ojbk';
}
在HTML中引入js外聯代碼（放在head標簽中，對整個頁面起作用）：
<head> <meta charset="UTF-8"> <title>簡易驗證碼</title> <script type="text/javascript" rel="script" src="javascript.js"></script> //此處注意你的js文件的相對路徑 </head>
HTML調用外聯js代碼：
<button type="button" onclick="random()" class="buttonstyle1">點擊驗證</button>
注釋：這個其實和上面那個HTML中調用的代碼是一樣的！
注意：在實訓中，要注意你的js文件的相對路徑，路徑錯誤將無法調用！！！ JS的調用和CSS很相似。