JavaScript 簡單使用的8個小案例
阿新 • • 發佈：2018-11-10
目錄：
1.抽獎系統
2.簡單驗證碼的使用
3.省市聯動
4.簡單輪播圖
5.表格資料增加和刪除
6.導航欄懸浮 、回到頂部
7.側邊欄iframe 的切換
8.摺疊選單
1.抽獎系統
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style> *{ margin: 0; padding: 0; } #box{ display: flex; padding: 0 450px; } #box span{ flex: 1; display: flex; border: red solid 1px; height: 100px; background-color: #4AB0F5; justify-content: center; align-items: center; font-size: 28px; } #button{ padding: 20px 450px; } #button button{ width: 80px; height: 50px; background-color: rosybrown; font-size: 20px; border: #B8860B solid 1px; border-radius: 8px; margin-right: 20px; } </style> <script> window.onload = function(){ } var number = prompt("請輸入你猜測的四位數字","") var num; function randomNum(){ var span = document.getElementsByTagName("span"); for (var i = 0; i < span.length; i++) { num = parseInt(Math.random()*10); span[i].innerHTML = num; } } var set; var flag = true; function beginNum(){ if(flag == true){ set = setInterval(randomNum,100); } flag = false; } function endNum(){ clearInterval(set); if(num==number){ alert("恭喜你猜中了！！！"); } else{ alert("很遺憾，下次繼續努力！"); } flag = true; } </script> <body> <div id="box"> <span>0</span> <span>1</span> <span>2</span> <span>3</span> </div> <div id="button"> <button onclick="beginNum()">開始</button> <button onclick="endNum()">結束</button> </div> </body> </html>
2.簡單驗證碼的使用
<script language="javascript"> var code; //在全域性 定義驗證碼 function createCode() { //建立驗證碼函式 code = ""; var codeLength =4;//驗證碼的長度 var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f','g','h','i','j','k', 'l','m','n','o','p','q','r','s','t','u','v','w','x','y','z');//所有候選組成驗證碼的字元，當然也可以用中文的 for(var i=0;i<codeLength;i++) { /* * 獲取36個數中的隨機一個 * 把獲得的值賦值給code */ var charIndex =Math.floor(Math.random()*36); code +=selectChar[charIndex]; } // 設定驗證碼的顯示樣式，並顯示 document.getElementById("discode").style.fontFamily="Fixedsys"; //設定字型 document.getElementById("discode").style.letterSpacing="5px"; //字型間距 document.getElementById("discode").style.color="#0ab000"; //字型顏色 document.getElementById("discode").innerHTML=code; // 顯示 } function but() {//驗證驗證碼輸入是否正確 var val1=document.getElementById("t1").value; var val2=code; if(val1!=val2){ alert("驗證碼錯誤!"); document.getElementById('t1').value=""; } } </script>
3.省市聯動
<script> //建立城市陣列 var cityArrs = [["鄭州市","濮陽市","南陽市"],["三亞市","海口市","三沙市"],["東莞市","廣州市","深圳市"]]; function showCity(){ //獲得省份的id var province = document.getElementById("province"); //獲得省份的value與陣列相對應 var value = province.value; var citys = cityArrs[value]; //獲得城市的id var city = document.getElementById("city"); //每次把select中的option給清空 city.options.length = 0; //改變透明度吧城市顯示出來 city.style.opacity = 1; //遍歷城市 for (var i = 0; i < citys.length; i++) { //獲得每一個城市 var cityText = citys[i]; //建立顯示城市的option var cityOption = document.createElement("option"); //建立城市中顯示的文字 var optionText = document.createTextNode(cityText); //吧文字內容新增到option中 cityOption.appendChild(optionText); //把option新增到city中 city.appendChild(cityOption); } } </script> <style> #city{ opacity: 0; } </style> <body> <select id="province" onclick="showCity()"> <option value="-1">選擇省份</option> <option value="0">河南省</option> <option value="1">海南省</option> <option value="2">廣東省</option> </select> <select id="city"> </select> </body>
4.簡單輪播圖
<script>
window.onload = function(){
init();
}
var index = 0;
function change(){
var img = document.getElementById("img")
var indexc = index%3 + 1;
img.src ="img/"+indexc+".jpg";
index = index + 1;
}
function init(){
setInterval("change()",2000);
}
</script>
<body>
<img src="img/1.jpg" width="100%" height="600px" id="img"/>
</body>5.表格資料增加和刪除
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" />
<style>
.bs-example {
display: flex;
flex: 1;
justify-content: space-around;
}
.input-group {
padding-right: 50px;
}
</style>
<script>
function getAlldata(){
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
var salry = document.getElementById("salry").value;
var td = document.createElement("td");
var textName = document.createTextNode(name);
td.appendChild(textName);
var td2 = document.createElement("td");
var textAge = document.createTextNode(age);
td2.appendChild(textAge);
var td3 = document.createElement("td");
var textSalry = document.createTextNode(salry);
td3.appendChild(textSalry);
var td4 = document.createElement("td");
var button4 = document.createElement("button");
button4.type = "button";
button4.className = "btn btn-danger"
button4.setAttribute("onclick","deleteData(this)")
td4.setAttribute("style","text-align: center");
var TextButton = document.createTextNode("刪除");
button4.appendChild(TextButton);
td4.appendChild(button4)
var tr = document.createElement("tr");
tr.appendChild(td);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
var tbody = document.getElementById("tbody");
tbody.appendChild(tr);
}
function deleteData(btn){
var childTd = btn.parentNode;
var childTr = childTd.parentNode;
var parentTbody = childTr.parentNode;
parentTbody.removeChild(childTr);
}
</script>
<body>
<div style="padding: 100px 100px 10px;">
<form class="bs-example bs-example-form" role="form">
<div class="input-group">
<span class="input-group-addon " >姓名</span>
<input id="name" type="text" class="form-control" placeholder="請輸入姓名">
</div>
<div class="input-group">
<span class="input-group-addon " >年齡</span>
<input id="age" type="text" class="form-control" placeholder="請輸入年齡">
</div>
<div class="input-group">
<span class="input-group-addon " >薪水</span>
<input id="salry" type="text" class="form-control" placeholder="請輸入薪水">
</div>
<div class="input-button">
<input id="allData" onclick="getAlldata()" type="button" value="提交" style="background-color: rosybrown; border: solid white 1px; border-radius: 3px; padding: 7px 12px;" />
</div>
</form>
<table id="table" class="table table-bordered table-hover table-striped">
<caption style="text-align: center; font-size: 28px; font-weight: bold;">員工資訊表</caption>
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>薪水</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>Tanmay</td>
<td>20</td>
<td>5000</td>
<td style="text-align: center;">
<button onclick="deleteData(this)" type="button" class="btn btn-danger">刪除</button>
</td>
</tr>
<tr>
<td>Sachin</td>
<td>25</td>
<td>4000</td>
<td style="text-align: center;">
<button onclick="deleteData(this)" type="button" class="btn btn-danger">刪除</button>
</td>
</tr>
<tr>
<td>Tanmay</td>
<td>20</td>
<td>5000</td>
<td style="text-align: center;">
<button onclick="deleteData(this)" type="button" class="btn btn-danger">刪除</button>
</td>
</tr>
<tr>
<td>Sachin</td>
<td>25</td>
<td>4000</td>
<td style="text-align: center;">
<button onclick="deleteData(this)" type="button" class="btn btn-danger">刪除</button>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="jquery-1.11.3/jquery.js"></script>
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</body>
</html>6.導航欄懸浮 、回到頂部
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
body{
height: 1500px;
}
div{
height: 100px;
background-color: burlywood;
}
#box{
background-color: #4AB0F5;
height: 50px;
width: 100%;
display: flex;
}
ul{
display: flex;
flex: 1;
list-style: none;
justify-content: space-around;
}
ul li{
display: flex;
justify-content: center;
align-items: center;
}
button{
position: fixed;
right: 50px;
bottom: 80px;
padding: 3px;
display: none;
}
</style>
<script>
window.onscroll = function(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var box1 = document.getElementById("box");
var goHead = document.getElementById("goHead");
if(scrollTop > 100){
box1.style.position = "fixed";
//oBox.style.margin = "0";
box1.style.top = "0";
}else{
//oBox.style.margin = "0"
box1.style.position = "static";
}
if(scrollTop > 400){
goHead.style.display = "block";
}else{
goHead.style.display = "none";
}
}
function goHead(){
document.documentElement.scrollTop = document.body.scrollTop =0;
}
</script>
<body>
<div>
</div>
<div id="box">
<ul>
<li>選單1</li>
<li>選單2</li>
<li>選單3</li>
<li>選單4</li>
<li>選單5</li>
<li>選單6</li>
</ul>
</div>
<button id="goHead" onclick="goHead()">
回到頂部
</button>
</body>
</html>
7.側邊欄iframe 的切換
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
ul li{
border: #080808 solid 1px;
list-style: none;
float: left;
display: inline-block;
line-height: 30px;
width: 80px;
text-align: center;
}
</style>
1、不使用js來操作
<body>
<nav>
<ul>
<li><a href="小鍵盤功能.html" target="inframe">選單一</a></li>
<li><a href="圖片切換.html" target="inframe">選單二</a></li>
<li><a href="懸浮 頂端.html" target="inframe">選單三</a></li>
</ul>
</nav>
<div class="iframe">
<iframe name="inframe">
</iframe>
</div>
</body>
2、js版本
<script>
window.onload = function(){
var change = document.getElementsByTagName("a");
for (var i = 0; i < change.length; i++) {
change[i].onclick = function(){
var ifreamHref = this.href;
document.getElementById("inframe").src = ifreamHref;
return false;//要特別注意 不加上去的話不管用
}
}
}
</script>
<body>
<nav>
<ul>
<li><a href="小鍵盤功能.html">選單一</a></li>
<li><a href="圖片切換.html" >選單二</a></li>
<li><a href="懸浮 頂端.html" >選單三</a></li>
</ul>
</nav>
<div class="iframe">
<iframe name="inframe" id="inframe">
</iframe>
</div>
</body>
</html>
8.摺疊選單
<script>
function showChiSele(select1) {
if(select1.getAttribute("showFlag") == "true") {
select1.nextSibling.style.display = "none";
select1.setAttribute("showFlag", "false");
} else {
select1.nextSibling.style.display = "block";
select1.setAttribute("showFlag", "true");
}
}
</script>
<body>
<div id="box">
<ul>
<li>
<a onclick="showChiSele(this)" showFlag="true" style="cursor: pointer;">一級選單</a><ul>
<li>二級選單</li>
<li>二級選單</li>
<li>二級選單</li>
<li>二級選單</li>
</ul>
</li>
</ul>
<ul>
<li>
<a onclick="showChiSele(this)" showFlag="true" style="cursor: pointer;">一級選單</a><ul>
<li>二級選單</li>
<li>二級選單</li>
<li>二級選單</li>
<li>二級選單</li>
</ul>
</li>
</ul>
</div>
</body>