javaScript简单项⽬案例
js简单案例
！！本篇均为博主课堂上实验案例，⽬的是为了托管代码，所以会有不⾜之处
案例⼀：完成多分⽀案例“年龄层判断”（代码和效果图）。
代码：
<!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()⽅法及动态输⼊实现矩形周长⾯积计算”的案例（代码和效果图）。
<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>
效果图：
案例三：完成“⼆维数组的数据访问实现试题展⽰”的案例（代码和效果图）。
<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>
效果图：
案例四：完成“考试倒计时的实现”的案例（代码和效果图）。
<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 ElementById("im");
javascript动态效果var ElementById("time");
var ks=new Date;
var Time();
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>
效果图：
案例五：完成“随机点名器的实现”的案例（代码和效果图）代码：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。