JS入門案例
阿新 • • 發佈：2018-11-04
<!doctype html> <html> <head> <meta charset="utf-8"> <title>JS入門</title> <script> <!--弱遍歷型別--> var i =1; var j="zhangshiqian"; //String alert("list".length) var str1=111; var str2="111"; //alert(str1==str2); //向頁面輸出內容 //document.write("張小黑"); </script> </head> <body> </body> </html>
alert 是彈窗動作
alert("list".length) 輸出字元長度
alert(str1==str2) 判斷兩個值是否相等 相等輸出
document.write("張小黑"） 在頁面輸出
console.log("我在控制檯輸出了"); console.log 表示在控制檯內輸出字元 在頁面不顯示
<!doctype html> <html> <head> <meta charset="utf-8"> <title>點選彈框</title> <!-- 1.確定事件，點選事件 2.通常事件都會觸發一個函式 3.函式裡面通常會去操作頁面，做一些互動動作 --> <script> function dianwo(){ alert("我被點選了"); } </script> </head> <body> <input type="button" value="點我，彈窗" onclick="dianwo()"/> </body> </html>
點選按鈕後 出現彈窗
文字替換
<!doctype html> <html> <head> <meta charset="utf-8"> <title>文字替換</title> <!-- 1.確定事件，點選事件 2.通常事件都會觸發一個函式 3.函式裡面通常會去操作頁面，做一些互動動作 --> <script> function dianwo(){ //1.首先要獲得這個div var div =document.getElementById("div1") div.innerHTML="<font color='red'>內容已經被替換</font>"; //div.innerText="<font color='red'>內容已經被替換</font>"; } </script> </head> <body> <input type="button" value="點我，修改DIV內容" onclick="dianwo()"/> <div id="div1"> 這裡的內容一會會被替換掉 </div> </body> </html>
剛開始的頁面
div.innerHTML
點選後
div.innerText
JS資料簡單的校驗
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
1.校驗使用者名稱, 長度不能小於6位
1.確定事件: 提交事件 onsubmit
2.事件要觸發函式 checkForm()
3. 函式中要去做一些校驗
-->
<script>
function checkForm(){
//獲取使用者輸入的內容
var input1 = document.getElementById("username");
// alert(input1.value);
var uValue = input1.value;
if(input1.value.length >= 6){
}else{
alert("對不起,使用者名稱太短! 需要輸入6位數以上")
return false;
}
//郵箱的校驗
//獲取使用者輸入的郵箱的值
var email = document.getElementById("email")
var uEmail = email.value;
if(/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(uEmail)){
alert("郵箱格式輸入有誤");
}else{
alert("郵箱格式輸入正確")
return false;
}
return true;;
}
</script>
</head>
<body>
<form action="點選彈框.html" onsubmit="return checkForm()" >
使用者名稱:<input type="text" id="username" /><br />
密碼:<input type="password" id="password" /><br />
郵箱:<input type="text" id="email" /><br />
<input type="submit" value="提交" />
</form>
</body>
</html>
if(input1.value.length >= 6){
}else{
alert("對不起,使用者名稱太短! 需要輸入6位數以上")
return false;
}
if(/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(uEmail)){
alert("郵箱格式輸入有誤");
}else{
alert("郵箱格式輸入正確")
return false;
}
