web前端知識梳理——js
阿新 • • 發佈：2018-12-04
1 圖片輪播
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> //圖片名稱 var index=1; function chim() { //只有5張圖片，1.jpg-5.jpg,所以當index大於5時變回1 if(index>5) { index=1; } //獲取id為im的元素 var im=document.getElementById("im"); //拼上index改變名字 im.src="img/"+index+".jpg"; //chim一秒執行一次，每執行一次index就+1，圖片就切換 index=index+1; } function init() { //init方法在執行時呼叫時間函式，時間函式呼叫chim()方法，1秒執行一次 setInterval("chim()",1000); } </script> </head> //在這個頁面載入的時候onload,執行init()方法 <body onload="init()"> <img src="img/1.jpg" id="im"> </body> </html>
2 網站定時彈出廣告
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function qq() { //獲取id為ee的元素 var im=document.getElementById("ee"); //設定元素的style的display屬性為可見，廣告就出來了 im.style.display="block"; } function gg() { //兩秒後時間函式執行qq()方法 setInterval("qq()",2000) } </script> </head> //網頁載入時就執行gg()方法 <body onload="gg()"> //這裡設定廣告一開始是不顯示的 <img src="img/ad.jpg" id="ee" style="display: none;"> </body> </html>
3 js表單校驗
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> //驗證使用者名稱onbuler和onkeyup的時候呼叫這個方法 function checkusername() { //先根據id獲取元素再獲取值 var username=document.getElementById("username"); //獲取元素的值 var username_value=username.value; //獲取使用者名稱後的span var name_span=document.getElementById("name_span"); //判斷使用者名稱的值的長度是否小於6 if(username_value.length<6) { //小於6在span顯示資訊 name_span.innerHTML="<font color=red>使用者名稱太短</font>"; }else{ //大於6顯示資訊 name_span.innerHTML="可用"; } } function checkpassword() { //原理和username驗證差不多 var password=document.getElementById("upassword"); var password_value=password.value; var span=document.getElementById("pass_span") if(password_value.length<6) { span.innerHTML="<font color=red>密碼太短</font>"; }else { span.innerHTML="密碼可用"; } } function checkrepassword() { //總的來說，把兩個密碼都拿到，拿出值進行比較，再顯示相應資訊 var password=document.getElementById("upassword"); var password_value=password.value; var spassword=document.getElementById("supassword"); var spassword_value=spassword.value; var span=document.getElementById("spass_span"); if(password_value==spassword_value) { span.innerHTML="確認密碼正確"; }else { span.innerHTML="請保持確認密碼與密碼一致！"; } } function checkemail() { } function checkphone() { } //form表單提交時呼叫這個方法 function all() { //定義一個座標值，只有當所有的方法返回值都為true的時候才為true var flag=checkusername()&&checkpassword()&&checkrepassword()&&checkemail()&&checkphone(); //相當於if(true) if(flag) { //方法返回true表單就可以跳轉到相應頁面 return true; }else{ return false; } } //用來顯示提示資訊的方法，傳入一個id，和要顯示的資訊 function showmsg(Spanid,msg) { //拿到這個元素 var span=document.getElementById(Spanid); //設定元素顯示傳入的資訊 span.innerHTML=msg; } </script> </head> <body> <form action="植物大戰殭屍.html" onsubmit="return all()"> 使用者名稱：<input type="text" id="username" onfocus="showmsg('name_span','使用者名稱長度不得小於6')" onblur="checkusername()" onkeyup="checkusername()"><span id="name_span"></span><br> 密碼：<input type="password" id="upassword" onfocus="showmsg('pass_span','密碼長度不得小於6')" onblur="checkpassword()" onkeyup="checkpassword()"><span id="pass_span"></span><br> 確認密碼：<input type="password" id="supassword" onfocus="showmsg('spass_span','確認密碼需與密碼一致')" onblur="checkrepassword()" onkeyup="checkrepassword()"><span id="spass_span"></span><br> 郵箱：<input type="email" id="uemail" onblur="checkemail()" onkeyup="checkemail()"><span id="email_span"></span><br> 手機號：<input type="text" id="uphone" onblur="checkphone()" onkeyup="checkphone()"><span id="phone_span"></span><br> <input type="submit" value="提交"> </form> </body> </html>
4 表格隔行換色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function init()
{
//先拿到id為tab的
var tab=document.getElementById("tab");
//alert(tab);
/拿到tab的行陣列
var rows=tab.rows;
//alert(rows);這裡打印出來顯示的都是一個什麼HTML物件可以把var rows看成一個數組
//遍歷行陣列
for(var i=1;i<rows.length;i++)
{
var row=rows[i];
//判斷是單還是雙行，設定不同顏色
if(i%2==0)
{
row.bgColor="brown";
}else
{
row.bgColor="hotpink";
}
}
}
</script>
</head>
//載入時呼叫init()方法
<body onload="init()">
<table border="1px" width="600px" id="tab">
<tr >
<td>
<input type="checkbox" />
</td>
<td >分類ID</td>
<td>分類名稱</td>
<td>分類商品</td>
<td>分類描述</td>
<td>操作</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>1</td>
<td>手機數碼</td>
<td>華為,小米,尼康</td>
<td>黑馬數碼產品質量最好</td>
<td>
<a href="#">修改</a>|<a href="#">刪除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>2</td>
<td>成人用品</td>
<td>充氣的</td>
<td>這裡面的充氣電動矽膠的</td>
<td><a href="#">修改</a>|<a href="#">刪除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>3</td>
<td>電腦辦公</td>
<td>聯想,小米</td>
<td>筆記本特賣</td>
<td><a href="#">修改</a>|<a href="#">刪除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>4</td>
<td>饞嘴零食</td>
<td>辣條,麻花,黃瓜</td>
<td>年貨</td>
<td><a href="#">修改</a>|<a href="#">刪除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>5</td>
<td>床上用品</td>
<td>床單,被套,四件套</td>
<td>都是套子</td>
<td><a href="#">修改</a>|<a href="#">刪除</a></td>
</tr>
</table>
</body>
</html>
5 表格全選與全不選
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//當總的check被點選的時候呼叫這個方法
function cc()
{
//先拿到第一個check
var checkb=document.getElementById("checkb");
//獲取第一個check狀態
var checked=checkb.checked;
//alert(checkb_value);顯示出來是一個on
//獲取所有check
var all=document.getElementsByName("check");
//alert(all.length);//顯示出來是5
//再for迴圈遍歷
for(var i=0;i<all.length;i++)
{
var c=all[i];//按角標一個個取出來
c.checked=checked;//使角標狀態等於第一個的狀態
}
}
</script>
</head>
<body onload="init()">
<table border="1px" width="600px" id="tab">
<tr >
<td>
<input type="checkbox" id="checkb" onclick="cc()"/>
</td>
<td >分類ID</td>
<td>分類名稱</td>
<td>分類商品</td>
<td>分類描述</td>
<td>操作</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check"/>
</td>
<td>1</td>
<td>手機數碼</td>
<td>華為,小米,尼康</td>
<td>黑馬數碼產品質量最好</td>
<td>
<a href="#">修改</a>|<a href="#">刪除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check"/>
</td>
<td>2</td>
<td>成人用品</td>
<td>充氣的</td>
<td>這裡面的充氣電動矽膠的</td>
<td><a href="#">修改</a>|<a href="#">刪除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" name="check"/>
</td>
<td>3</td>
<td>電腦辦公</td>
<td>聯想,小米</td>
<td>筆記本特賣</td>
<td><a href="#">修改</a>|<a href="#">刪除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" />
</td>
<td>4</td>
<td>饞嘴零食</td>
<td>辣條,麻花,黃瓜</td>
<td>年貨</td>
<td><a href="#">修改</a>|<a href="#">刪除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" name="check"/>
</td>
<td>5</td>
<td>床上用品</td>
<td>床單,被套,四件套</td>
<td>都是套子</td>
<td><a href="#">修改</a>|<a href="#">刪除</a></td>
</tr>
</table>
</body>
</html>
6 省市聯動案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*用這種方法演算法程式碼少。思路複雜一點，這種方法對應值要與陣列下標相同，廣東，湖南，福建0，1,2和陣列中對應城市位置相同
* <script>
準備工作 : 準備資料
var provinces = [
["深圳市","東莞市","惠州市","廣州市"],
["長沙市","岳陽市","株洲市","湘潭市"],
["廈門市","福州市","漳州市","泉州市"]
];
1. 確定事件: onchange
2. 函式: selectProvince()
3. 函式裡面要搞事情了
得到當前操作元素
得到當前選中的是那一個省份
從陣列中取出對應的城市資訊
動態建立城市元素節點
新增到城市select中
function selectProvince(){
var province = document.getElementById("province");
//得到當前選中的是哪個省份
//alert(province.value);
var value = province.value;
//從陣列中取出對應的城市資訊
var cities = provinces[value];
var citySelect = document.getElementById("city");
//清空select中的option
citySelect.options.length = 0;
for (var i=0; i < cities.length; i++) {
// alert(cities[i]);
var cityText = cities[i];
//動態建立城市元素節點 <option>東莞市</option>
//建立option節點
var option1 = document.createElement("option"); // <option></option>
//建立城市文字節點
var textNode = document.createTextNode(cityText) ;// 東莞市
//將option節點和文字內容關聯起來
option1.appendChild(textNode); //<option>東莞市</option>
// 新增到城市select中
citySelect.appendChild(option1);
}
}
*/
function gg()
{
//根據idss獲取省
var province = document.getElementById("ss");
//獲取省的值
var p_value=province.value;
//alert(p_value);這裡根據選內容是0.1.2.3
//獲取市的列表項
var city = document.getElementById("city");
//新增3個空的項進city列表
var option1=document.createElement("option");
var option2=document.createElement("option");
var option3=document.createElement("option");
//當值等於1的時候說明是廣東省
if(p_value==1)
{
city.options.length = 0;//這個是用於清除上一次選擇的內容，不然幾個省都有
//創出幾個城市的文字
var text1=document.createTextNode("廣州市");
var text2=document.createTextNode("惠州市");
var text3=document.createTextNode("東莞市");
//文字加到option中
option1.appendChild(text1);
option2.appendChild(text2);
option3.appendChild(text3);
//城市加到選項中
city.appendChild(option1);
city.appendChild(option2);
city.appendChild(option3);
}else if(p_value==2)//2湖南省
{
city.options.length = 0;
var text1=document.createTextNode("長沙市");
var text2=document.createTextNode("岳陽市");
var text3=document.createTextNode("株洲市");
option1.appendChild(text1);
option2.appendChild(text2);
option3.appendChild(text3);
city.appendChild(option1);
city.appendChild(option2);
city.appendChild(option3);
}else if(p_value==3)//3
{
city.options.length = 0;
var text1=document.createTextNode("廈門市");
var text2=document.createTextNode("滁州");
var text3=document.createTextNode("泉州");
option1.appendChild(text1);
option2.appendChild(text2);
option3.appendChild(text3);
city.appendChild(option1);
city.appendChild(option2);
city.appendChild(option3);
}else
{
city.options.length = 0;
}
}
</script>
</head>
<body>
//先建立好左邊選項，當左邊選項發生改變時就啟用gg()方法
<select id="ss" onchange="gg()">
<option value="0">請選擇</option>
<option value="1">廣東省</option>
<option value="2">湖南省</option>
<option value="3">福建省</option>
</select>
<select id="city">
</select>
</body>
</html>
7 商品左右選擇
YPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
步驟分析
1. 確定事件: 點選事件 :onclick事件
2. 事件要觸發函式 selectOne
3. selectOne要做一些操作
(將左邊選中的元素移動到右邊的select中)
1. 獲取左邊Select中被選中的元素
2. 將選中的元素新增到右邊的Select中就可以
-->
<script>
function selectOne(){
// 1. 獲取左邊Select中的所有元素
var leftSelect = document.getElementById("leftSelect");
// 可以看成一個數組，拿到所有選項
var options = leftSelect.options;
//找到右側的Select
var rightSelect = document.getElementById("rightSelect");
//遍歷選項陣列找出被選中的option
for(var i=0; i < options.length; i++){
var option1 = options[i];
if(option1.selected){
// 2. 將選中的元素新增到右邊的Select中就可以
rightSelect.appendChild(option1);
}
}
}
//將左邊所有的商品移動到右邊
function selectAll(){
// 1. 獲取左邊Select中被選中的元素
var leftSelect = document.getElementById("leftSelect");
var options = leftSelect.options;
//找到右側的Select
var rightSelect = document.getElementById("rightSelect");
//遍歷找出被選中的option
for(var i=options.length - 1; i >=0; i--){
var option1 = options[i];
rightSelect.appendChild(option1);
}
}
</script>
</head>
<body>
<table border="1px" width="400px">
<tr>
<td>分類名稱</td>
<td><input type="text" value="手機數碼"/></td>
</tr>
<tr>
<td>分類描述</td>
<td><input type="text" value="這裡面都是手機數碼"/></td>
</tr>
<tr>
<td>分類商品</td>
<td>
<!--左邊-->
<div style="float: left;">
已有商品<br />
<select multiple="multiple" id="leftSelect" ondblclick="selectOne()">
<option>華為</option>
<option>小米</option>
<option>錘子</option>
<option>oppo</option>
</select>
<br />
<a href="#" onclick="selectOne()"> >> </a> <br />
<a href="#" onclick="selectAll()"> >>> </a>
</div>
<!--右邊-->
<div style="float: right;">
未有商品<br />
<select multiple="multiple" id="rightSelect">
<option>蘋果6</option>
<option>腎7</option>
<option>諾基亞</option>
<option>波導</option>
</select>
<br />
<a href="#"> << </a> <br />
<a href="#"> <<< </a>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交"/>
</td>
</tr>
</table>
</body>
</html>