js簡單案例
- 案例一：完成多分支案例“年齡層判斷”（代碼和效果圖）。
- 案例二：完成“prompt()方法及動態輸入實現矩形周長面積計算”的案例（代碼和效果圖）。
- 案例三：完成“二維數組的數據訪問實現試題展示”的案例（代碼和效果圖）。
- 案例四：完成“考試倒計時的實現”的案例（代碼和效果圖）。
- 案例五：完成“隨機點名器的實現”的案例（代碼和效果圖）
- 案例六：完成“下拉列表框的應用”的案例（代碼和效果圖）。
- 案例七：完成“正則表達式實現表單嚴謹驗證”的案例（代碼和效果圖）。
- 案例八：完成“計算器功能實現”的案例（代碼和效果圖）。
- 案例九：完成“視頻體彩 11 選 5 的實現方案2”的案例（代碼和效果圖）。
- 案例十：完成“動態增加表格的行和單元格”的案例（代碼和效果圖）。
- 案例十一:完成“動態刪除表格的行”的案例（代碼和效果圖）。
- 案例十二：完成“表格複選的全選功能”的案例（代碼和效果圖）。
- 案例十三：完成“動態選中並刪除表格多行”的案例（代碼和效果圖）。
- 案例十四：完成“用getElementByID方法實現加法器”的案例（代碼和效果圖）。
- 案例十五：完成“實現簡易選項卡”的案例（代碼和效果圖）。
- 案例十六：完成“動物像冊”的案例（代碼和效果圖）。
！！本篇均爲博主課堂上實驗案例，目的是爲了託管代碼，所以會有不足之處
案例一：完成多分支案例“年齡層判斷”（代碼和效果圖）。
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>年齡層判斷</title>
</head>
<body>
<script>
var age=19;
if(age>=18){
alert("adult");
}else if(age>=6){
alert("teenager");
}else{
alert("kid");
}
if(age){
document.write("Hello");
}else{
document.write("BYE");
}
</script>
</body>
</html>
效果圖：
案例二：完成“prompt()方法及動態輸入實現矩形周長面積計算”的案例（代碼和效果圖）。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>矩形周長面積計算</title>
</head>
<body>
<script>
var w=prompt("請輸入矩形的寬","1");
var h=prompt("請輸入矩形的高","1");
alert("矩形的周長爲："+2*(parseFloat(h)+parseFloat(w)));
alert("矩形的面積爲："+h*w);
</script>
</body>
</html>
效果圖：
案例三：完成“二維數組的數據訪問實現試題展示”的案例（代碼和效果圖）。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>試題展示</title>
</head>
<body>
<script>
var questions = new Array();
var questionxz = new Array();
var answers = new Array();
questions[0]="下列選項中（ ）可以用來檢索下拉列表框中被選項目的索引號。";
questionxz[0]=["A.selectedLndex","B.options","C.length","D.lenght"];
answers[0]='A';
questions[1]="在javaScript中（ ）方法可以對數組元素進行排序。";
questionxz[1]=["A.add()","B.join()","C.sort()","D.length()"];
answers[1]="C";
for(var i=0;i<questions.length;i++){
document.write(questions[i]+"<br />");
for(var j=0;j<4;j++){
document.write(questionxz[i][j]+"<br />");
}
document.write("答案是"+answers[i]+"<br />");
}
</script>
</body>
</html>
效果圖：
案例四：完成“考試倒計時的實現”的案例（代碼和效果圖）。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>考試倒計時</title>
<style>
#time{
height: 100px;
padding: 20px 5px 5px 126px;
background: ;
color: #0000FF;
font-size:28px;
}
</style>
</head>
<body>
<div id="time"></div>
<img id="im" src="img/考試倒計時2.jpg" />
<script>
var im=document.getElementById("im");
var time=document.getElementById("time");
var ks=new Date;
var msks=ks.getTime();
var js=msks+60*60*1000;
function jsover(){
var syfz=Math.floor((js-new Date().getTime())/(1000*60));
var sym=Math.floor((js-new Date().getTime()-syfz*1000*60)/1000);
if(syfz<5) {
//time.style.background="url(img/考試倒計時1.jpg) no-repeat";
im.src="img/考試倒計時1.jpg"
}
if(syfz<2){
im.src="img/考試倒計時3.jpg"
//time.style.background="url(img/考試倒計時1.jpg)no_repeat";
}
if(syfz<0){
time.innerHTML="";
clearInterval(timeID);
}else{
time.innerHTML="高考結束還剩"+syfz+"分"+sym+"秒";
}
}
timeID=setInterval("jsover()",1000);
</script>
</body>
</html>
效果圖：
案例五：完成“隨機點名器的實現”的案例（代碼和效果圖）
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>隨機點名器</title>
<style type="text/css">
#bodybj {
background: url(img/開燈.jpg) no-repeat center top;
}
#box {
margin: auto;
width: 550px;
font-size: 66px;
height: 94px;
color: #138eee;
text-align: center;
margin-top: 250px;
}
#bt {
margin: auto;
width: 200px;
text-align: center;
margin-top: 75px;
color:aquamarine;
font-size: 25px;
cursor: pointer;
}
</style>
</head>
<body id="bodybj" background="img/開燈.jpg">
<div id="box">親，準備好點名了嗎</div>
<div id="bt" onclick="doit()">開始點名</div>
<script>
var namelist=["王思聰","王健林","馬雲","趙麗穎","迪麗熱巴","古力娜扎","馬化騰"];
var mytime=null;
function doit(){
var bt=window.document.getElementById("bt");
if(mytime==null){
bt.innerHTML="停止點名";
show();
}else{
bt.innerHTML="開始點名";
clearInterval(mytime);
mytime=null;
}
}
function show(){
var box=window.document.getElementById("box");
var num=Math .floor(Math.random()*100000)%namelist.length;
box.innerHTML=namelist[num];
mytime=setTimeout("show()",1);
}
</script>
</body>
</html>
效果圖：
案例六：完成“下拉列表框的應用”的案例（代碼和效果圖）。
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function disable(){
x.disabled=true;
}
function enable(){
x.disabled=false;
}
function getlength(){
alert(x.length);
}
function changesize(){
x.size=4;
}
function selectmultiple(){
x.multiple=true;
}
function getindex(){
alert(x.selectedIndexx);
}
function getoptions(){
var txt="選中的選項";
var i;
for(i=0;i<x.length;i++){
if(x.options[i].selected){
txt=txt+"\n"+x.options[i].txt;
}
}
}
function changeText(){
x.options[x.selectedIndex].text="甜瓜";
}
function removeoption(){
x.remove(x.selectedIndex);
}
</script>
</head>
<body>
<form>
<select id="myselect">
<option value="水果1">蘋果</option>
<option value="水果2">梨子</option>
<option vallue="水果3">梨子</option>
<option value="水果4">橙子</option>
</select>
<br /><br />
<input type="button" onclick="disable()" value="禁用列表" />
<input type="button" onclick="enable()" value="啓用列表" />
<input type="button" onclick="getlength()" value="列表有幾種選擇" />
<input type="button" onclick="changesize()" value="修改列表大小" />
<input type="button" onclick="selectmultiple()" value="選擇多個" />
<p>在你點擊“選擇多個”按鈕之前，儘量選擇一個以上的選項（通過按shift或ctrl鍵）然後嘗試點擊</p>
<input type="button" onclick="getindex()" value="彈出選中索引" />
<input type="button" onclick="getoptions()" value="輸出選中選項" />
<input type="button" onclick="changeText()" value="設置你的選項" />
<input type="button" onclick="removeoption()" value="移除你的選項" />
</form>
<script>
var x=document.getElementById("myselect");
document.write(alert("form的子對象select的值是：",x.value));
x.onchange=function(){
alert("from的子對象select的值是："+x.value);
}
</script>
</body>
</html>
效果圖：
案例七：完成“正則表達式實現表單嚴謹驗證”的案例（代碼和效果圖）。
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>正則表達式實現表單嚴謹驗證</title>
</head>
<body>
<form name="cform" method="post" action="實驗二三元運算符實現圖片切換.html" onsubmit="return checkForm();">
用戶賬號：<input name="user" /><br />
用戶密碼：<input name="pass" type="password" /><br />
<input type="submit" value="驗證" />
</form>
<script>
function checkForm(){//驗證賬號
var user=cform.user.value;
var pass=cform.pass.value;
if(!(/^[a-zA-Z]\w{3,15}$/.test(user))){
alert("用戶賬號由字母、數字、下劃線、字母開頭，4-16位");
cform.user.select();
return false;
}
if(!(/^\w{4,16}$/.test(pass))){
alert("密碼由4~16位字符組成");
cform.pass.select();
return false;
}
return true;
}
</script>
</body>
</html>
效果圖：
案例八：完成“計算器功能實現”的案例（代碼和效果圖）。
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>計算器功能實現</title>
<style type="text/css">
#sDiv {
text-align: center;
border: solid 1px;
width: 200px;
border-radius: 15px
}
#t {
border: solid 1px;
width: 150px;
border-radius: 15px;
margin: 10px 0;
font-size: 20px;
padding: 0 3px;
}
input[type=button] {
width: 30px;
height: 30px;
margin: 4px;
font-size: 20px;
}
#equ {
width: 150px;
font-size: 26px;
padding-bottom: 30px;
}
</style>
</head>
<body>
<div id="sDiv">
<input type="text" name="box" id="box" value="" /><br/>
<input type="button" name="" id="" value="1" onclick="calCulate(this.value)" />
<input type="button" name="" id="" value="2" onclick="calCulate(this.value)" />
<input type="button" name="" id="" value="3" onclick="calCulate(this.value)" />
<input type="button" name="" id="" value="4" onclick="calCulate(this.value)" /><br />
<input type="button" name="" id="" value="5" onclick="calCulate(this.value)" />
<input type="button" name="" id="" value="6" onclick="calCulate(this.value)" />
<input type="button" name="" id="" value="7" onclick="calCulate(this.value)" />
<input type="button" name="" id="" value="8" onclick="calCulate(this.value)" /><br />
<input type="button" name="" id="" value="9" onclick="calCulate(this.value)" />
<input type="button" name="" id="" value="0" onclick="calCulate(this.value)" />
<input type="button" name="" id="" value="." onclick="calCulate(this.value)" />
<input type="button" name="" id="" value="C" onclick="s(' ' )" /><br/>
<input type="button" name="" id="" value="+" onclick="calCulate(this.value)" />
<input type="button" name="" id="" value="-" onclick="calCulate(this.value)" />
<input type="button" name="" id="" value="*" onclick="calCulate(this.value)" />
<input type="button" name="" id="" value="/" onclick="calCulate(this.value)" /><br/>
<input type="button" name="" id="equ" value="=" onclick="e(this.value)" />
</div>
<script>
input = document.getElementById('box');
function s(v) {
input.value = v
}
function calCulate(v) {
input.value += v
}
function e() {
try {
s(eval(input.value))
} catch (e) {
s('Error')
}
}
function operator(type) {
switch (type) {
case "backspace":
var str = input.value;
//str = (str != "0") ? str : "";
str = str.substr(0, str.length - 1);
str = (str != "") ? str : "0";
input.value = str;
break;
case "opposite":
input.value = -input.value;
break;
case "percent":
input.value = input.value / 100;
break;
case "pow":
input.value = Math.pow(input.value, 2);
break;
case "sqrt":
input.value = Math.sqrt(input.value);
break;
}
}
</script>
</body>
</html>
效果圖：
案例九：完成“視頻體彩 11 選 5 的實現方案2”的案例（代碼和效果圖）。
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>體彩實現</title>
</head>
<body><img src="img/體彩.jpg" />
<script>
var arr = [];//建立一個空數組
function add() {
number = Math.floor(Math.random() * 11 + 1);//獲取隨機數
for (x in arr)
if (arr[x] == number)
return;//發現重複數字返回
arr.push(number)//壓入數組
}
do {
add();
} while (arr.length < 5)
/*輸出數組*/
for (x in arr)
if (arr[x] < 10)
arr[x] = '0' + arr[x];//格式化輸出
document.write("<h1 style='color: firebrick'>本期的幸運號碼：", arr.join(" "), "</h1>");
</script>
</body>
</html>
效果圖：
案例十：完成“動態增加表格的行和單元格”的案例（代碼和效果圖）。
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table id="info" align="center" width="300" border="1">
<caption>學生基本信息統計表</caption>
<tr><th>學號</th><th>姓名</th><th>年齡</th></tr>
</table>
<button onclick="add()">增加一行</button>
<script>
function add(){
var tab=document.getElementById("info");
var r=tab.insertRow(1);
var c1=r.insertCell(0);
var c2=r.insertCell(1);
var c3=r.insertCell(2);
c1.innerHTML='364656';
c2.innerHTML='小曼';
c3.innerHTML='19';
}
</script>
</body>
</html>
效果圖：
案例十一:完成“動態刪除表格的行”的案例（代碼和效果圖）。
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function del(a){
var index=a.parentNode.parentNode.rowIndex;
document.getElementById("mytable").deleteRow(index);
}
</script>
</head>
<body>
<table id="mytable" border="1">
<tr>
<td>行1</td>
<td><a onclick="del(this)">刪除</a></td>
</tr>
<tr>
<td>行2</td>
<td><input type="button" value="刪除" onclick="del(this)"</td>
</tr>
<tr>
<td>行3</td>
<td><input type="button" value="刪除" onclick="del(this)"></td>
</tr>
</table>
</body>
</html>
效果圖：
案例十二：完成“表格複選的全選功能”的案例（代碼和效果圖）。
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格複選的全選功能</title>
<style type="text/css">
table{
border-collapse: collapse;
}
td{
text-align: center;
border: 1px solid;
}
</style>
</head>
<body>
<table id="tb">
<caption><h2>請選擇前端設計參考書</h2></caption>
<tr style="font-weight: bold;">
<td><input id="all" type="checkbox" value="全選" onclick="all_check()"</td>
<td>書稱</td>
<td>價格（元）</td>
<td>數量</td>
</tr>
<tr>
<td><input name="ic" type="checkbox" value="1" onclick="single_check()"</td>
<td>JavaScript入門提高</td>
<td>39</td>
<td>6</td>
</tr>
<tr>
<td><input name="ic" type="checkbox" value="2" onclick="single_check()"</td>
<td>JavaScript編程藝術</td>
<td>29</td>
<td>5</td>
</tr>
<tr>
<td><input name="ic" type="checkbox" value="3" onclick="single_check()"</td>
<td>鋒利的javaScript</td>
<td>36</td>
<td>9</td>
</tr>
<tr>
<td><input name="ic" type="checkbox" value="3" onclick="single_check()"</td>
<td>javaScript權威</td>
<td>59</td>
<td>5</td>
</tr>
<tr>
<td colspan="4" style="text-align: left;font-weight: 900;">刪除選中項</td>
</tr>
</table>
<script>
var oinput = document.getElementsByName("ic");
var allcheck=document.getElementById("all");
var tb=document.getElementById("tb");
function all_check(){
for(var i=0;i<oinput.length;i++){
if(allcheck.checked==true){
oinput[i].checked=true;
}else{
oinput[i].checked=false;
}
}
}
function single_check(){
var j=0;
for (var i=0;i<oinput.length;i++) {
if(oinput[i].checked==true){
j=j+1;
}
}
if(j==oinput.length){//當所有的都被選中
allcheck.checked=true;//全選按鈕打勾
}else{
allcheck.checked=false;
}
}
</script>
</body>
</html>
效果圖;
案例十三：完成“動態選中並刪除表格多行”的案例（代碼和效果圖）。
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格複選的全選功能</title>
<style type="text/css">
table{
width: 600px;
border: 1 solid #007108;
border-collapse: collapse;
background-color: #d9ffdc;
text-align: center;
padding: 5px;
}
td{
text-align: center;
border: 1px solid;
}
</style>
</head>
<body>
<table id="tb">
<caption><h2>我的購物車</h2></caption>
<tr style="font-weight: bold;">
<td><input id="all" type="checkbox" value="全選" onclick="all_check()"</td>
<td>商品1</td>
<td>價格（元）</td>
<td>數量</td>
</tr>
<tr>
<td><input name="ic" type="checkbox" value="1" onclick="single_check()"</td>
<td>商品2</td>
<td>39</td>
<td>6</td>
</tr>
<tr>
<td><input name="ic" type="checkbox" value="2" onclick="single_check()"</td>
<td>商品3</td>
<td>29</td>
<td>5</td>
</tr>
<tr>
<td><input name="ic" type="checkbox" value="3" onclick="single_check()"</td>
<td>商品4</td>
<td>36</td>
<td>9</td>
</tr>
<tr>
<td><input name="ic" type="checkbox" value="3" onclick="single_check()"</td>
<td>商品5</td>
<td>59</td>
<td>5</td>
</tr>
<tr>
<td colspan="4" style="text-align: center;font-weight: 900; "onclick="tremove()">刪除選中項</td>
</tr>
</table>
<script>
var oinput = document.getElementsByName("ic");
var allcheck=document.getElementById("all");
var tb=document.getElementById("tb");
function all_check(){
for(var i=0;i<oinput.length;i++){
if(allcheck.checked==true){
oinput[i].checked=true;
}else{
oinput[i].checked=false;
}
}
}
function single_check(){
var j=0;
for (var i=0;i<oinput.length;i++) {
if(oinput[i].checked==true){
j=j+1;
}
}
if(j==oinput.length){//當所有的都被選中
allcheck.checked=true;//全選按鈕打勾
}else{
allcheck.checked=false;
}
}
function tremove(){
for(var k=0;k<oinput.length;k++){
if(oinput[k].checked==true){
tb.deleteRow(k+1);
k=-1;
}
}
}
</script>
</body>
</html>
效果圖：
案例十四：完成“用getElementByID方法實現加法器”的案例（代碼和效果圖）。
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input id="tx1" placeholder="111" />+
<input id="tx2" placeholder="222" />=<span id="s1"></span><br />
<button onclick="jis()">計算</button>
<script>
function jis(){
var t1=document.getElementById("tx1").value;
var t2=document.getElementById("tx2").value;
document.getElementById("s1").innerHTML=parseFloat(t1)+parseFloat(t2);
}
</script>
</body>
</html>
效果圖：
案例十五：完成“實現簡易選項卡”的案例（代碼和效果圖）。
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>簡易選項卡</title>
<style>
body,ul,li{
margin: 0;
padding: 0;
}
body{
font: 12px/1.5 tahoma;
}
#outer{
width: 450px;
margin: 10px auto;
}
#tab{
overflow: hidden;
zoom: 1;
background: #000;
border:1px solid #000 ;
}
#tab li{
float: left;
color: #fff;
height: 30px;
line-height: 30px;
list-style-type: none;
padding: 0 20px;
}
#tab li.current{
color: #000;
background: #ccc;
}
#content{
border: 1px solid #000;
border-top-width: 0;
}
#content ul{
line-height: 25px;
display: none;
margin: 0 30px;
padding: 2px;
}
</style>
<script>
window.onload=function(){
var oLi=document.getElementById("tab").getElementsByTagName("li");
var oUl=document.getElementById("content").getElementsByTagName("ul");
for(var i=0;i<oLi.length;i++){
oLi[i].index=i;
oLi[i].onmouseover=function(){
for(var n=0;n<oLi.length;n++){
oLi[n].className="";
}
this.className="current";
for(var n=0;n<oUl.length;n++){
oUl[n].style.display="none";
}
oUl[this.index].style.display="block";
}
}
}
</script>
</head>
<body>
<div id=outer>
<ul id="tab">
<li class="current">第一課</li>
<li>第二課</li>
<li>第三課</li>
</ul>
<div id="content">
<ul style="display: block;">
<li>網頁特效原理</li>
<li>響應用戶操作</li>
<li>提示框效果</li>
<li>事件驅動</li>
<li>元素屬性操作</li>
<li>動手編寫</li>
<li>引入函數</li>
<li>網頁換膚效果</li>
</ul>
<ul >
<li>撒旦發射點</li>
<li>給v撒旦v</li>
<li>撒v噶啥的</li>
<li>過不少地方v吧</li>
<li>按國標</li>
<li>古巴的v啊</li>
<li>光度法v噶</li>
<li>安徽廣東</li>
</ul>
<ul >
<li>地方都是</li>
<li>不會的薩芬</li>
<li>王菲的</li>
<li>愛侶v從</li>
<li>不敢發士大夫</li>
<li>不會的吧</li>
<li>愛國VS</li>
<li>阿飛的v下</li>
</ul>
</div>
</div>
</body>
</html>
效果圖:
案例十六：完成“動物像冊”的案例（代碼和效果圖）。
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#imagegallery li{
display: inline;/*不會換行*/
list-style: none;
}
#imagegallery img{
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<h1>動物相冊</h1>
<ul id="imagegallery">
<li>
<a href="img/動物1.jpg" title="狗狗">
<img src="img/動物1.jpg" alt="狗"/>
</a>
</li>
<li>
<a href="img/動物2.jpg" title="雞雞">
<img src="img/動物2.jpg" alt="雞"/>
</a>
</li>
<li>
<a href="img/動物3.jpg" title="獅獅">
<img src="img/動物3.jpg" alt="獅"/>
</a>
</li>
<li>
<a href="img/動物4.jpg" title="貓貓">
<img src="img/動物4.jpg" alt="貓"/>
</a>
</li>
</ul>
<img id="placeholder" src="img/動物2.jpg" alt="動物相冊" />
<p id="description">選擇你喜歡的圖片</p>
<script>
function showPic(whichpic){
var source = whichpic.getAttribute("href");
var placeholder=document.getElementById("placeholder");
placeholder.setAttribute("src",source);
var text=whichpic.getAttribute("title");
var desription=document.getElementById("description");
desription.firstChild.nodeValue=text;
}
window.onload=function(){
var gallery=document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for (var i=0;i<links.length;i++) {
links[i].onclick=function(){
showPic(this);
return false;
}
}
}
</script>
</body>
</html>
效果圖：
