综合应用例子
【例题1】用户上传文件类型判断
【例题2】生成随机四位验证码
【例题3】时间的显示
【例题4】模拟闹钟
【例题5】模拟计时器（较完整）
【例题6】网页轮播片
【例题1】用户上传文件类型判断
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>文件类型判断</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript">
function check() {
var f1 = document.getElementById("file");
// alert(f1);
var path = f1.value;
//文件类型数组
var typearr=['bmp','jpg','png'];
//获取上传文件后缀
var filetype = path.substring(path.lastIndexOf(".")+1);
//数组里查询filetype是否存在
if(typearr.indexOf(filetype.toLowerCase())>-1){
alert("good type");
return true;
}
else{
alert("您上传的文件类型不正确，请重新选择！");
return false;
}
}
</script>
</head>
<body>
<form >
<input type="file" name="file" id="file">
<input type="submit" value="upload"
onclick="return check()">
</form>
</body>
</html>【例题2】生成随机四位验证码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>生成随机的四位验证码</title>
<script type="text/javascript">
function yzm(){
//生成4位数字验证码
var result="";
//var hh=[];
for(i=1;i<=4;i++){
//生成随机数,范围0-9
//hh.push(Math.ceil(Math.random()*9)); //ceil()函数保证生成的数不是小数。及1~10
result+=Math.floor(Math.random()*10); //floor()表示从0~9，否则1~10
}
document.getElementById("yzm").innerHTML=result;
//document.write(result);
}
</script>
</head>
<body onload="yzm()"> <!-- 一加载就载入 -->
<p id="yzm" onclick="yzm()">8888</p>
</body>
</html>【例题3】时间的显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>时间的显示</title>
<script type="text/javascript">
function xs(){
var date =new Date();
var year=date.getFullYear();
var month=date.getMonth()+1;
var date1=date.getDate(); //日
var day=date.getDay(); //星期
var hour=date.getHours(); //小时
var min=date.getMinutes(); //分钟
var sec=date.getSeconds(); //秒
// var mmin=date.getMillseconds();//毫秒
var wtime=date.toTimeString();
document.write("今天是"+year+"年"+month+"/"+date1+'的星期'+day+"/"+
"的"+hour+"点"+min+"分"+sec+"秒"+"<br>"
); //今天是2018年9/24的星期1/的20点58分22秒
}
</script>
</head>
<body>
<script type="text/javascript">
/* var myDate=new Date("1 Jan 2018");
document.write(myDate);//Mon Jan 01 2018 00:00:00 GMT+0800 (中国标准时间)
myDate.setDate(32); //设置一个月32天
document.write(myDate);//Thu Feb 01 2018 00:00:00 GMT+0800 (中国标准时间)
*/
xs();
</script>
</body>
</html>【例题4】模拟闹钟
<!DOCTYPE html>
<html>
<head>
<title>计时器示例</title>
<script type="text/javascript">
function doTimer(){
alert("Ding Ling Ling.....");
setTimeout(doTimer,2000);
}
function stopTimer(){
//关闭计时器
clearTimeout(timerId);
}
</script>
</head>
<body>
<input type="button" value="stop" onclick="stopTimer()">
<script type="text/javascript">
var timerId = setTimeout(doTimer,1000);
alert(timerId);
</script>
</body>
</html>【例题5】模拟计时器（较完整）
<!DOCTYPE html>
<html>
<head>
<title>模拟计时器效果</title>
<script type="text/javascript">
var ss =0;
var timerId;
function startT(){
timerId =setTimeout(startT,1000);
//修改时间
var myDate = new Date("1111/1/1 00:00:00");
ss++;
myDate.setSeconds(ss);
txt = document.getElementById("txt");
txt.innerHTML=addZero(myDate.getHours())+":"+addZero(myDate.getMinutes())+":"+addZero(myDate.getSeconds());
// //获取按钮对象
document.getElementById("ss").disable=true;
document.getElementById("ee").disable=true;
document.getElementById("cc").disable=true;
//document.write();
}
//位数小于2位，补0
function addZero(num){
if(num<10)
return "0"+num;
else
return num;
}
function endT(){
clearTimeout(timerId);
document.getElementById("ss").disable=false;
document.getElementById("ee").disable=true;
document.getElementById("cc").disable=true;
}
function clearT(){
clearTimeout(timerId);
document.getElementById("txt").innerHTML="00:00:00";
ss=0;
document.getElementById("ss").disable=true;
document.getElementById("ee").disable=false;
document.getElementById("cc").disable=false;
}
</script>
</head>
<body>
<p id = "txt">00:00:00</p>
<input type="button" value="start" onclick="startT()" id="ss">
<input type="button" value="stop" onclick="endT()" id="ee" disable="true">
<input type="button" value="clear" onclick="clearT()" id="cc" disable="true">
</body>
</html>【例题6】网页轮播片
<!DOCTYPE html>
<html>
<head>
<title>网页轮播</title>
<script type="text/javascript">
var imgs = ["a.jpg","b.jpg","c.jpg"];
var i =0;
function changeImg(){
var tp = document.getElementById("tp");
//随机播放图片
// tp.src = imgs[Math.floor(Math.random()*3)];
if(i>imgs.length-1)
i =0;
//顺序播放
tp.src = imgs[i++];
}
setInterval(changeImg,2000);
</script>
</head>
<body>
<img id = "tp" src="a.jpg">
</body>
</html>
扫一扫
102
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
