训练一 随机数的数学运算
要求：生成一个0~ 100的随机数，并能够计算出其平方、平方根以及自然对数。
要点：Math随机数的使用，函数的使用。
<!DOCTYPE html>
<html lang="en">
<head>
<title>随机数</title>
<meta charset="UTF-8">
<script>
var rnd;
var sqrt,sqrt_root,log;
function getrandom(){
rnd=Math.floor(Math.random()*101);
alert("随机数为: "+rnd);
}
function cal(){
sqrt=Math.pow(rnd,2);
sqrt_root=Math.sqrt(rnd);
log=Math.log(rnd);
alert("随机数"+rnd+"的相关计算\n平方\t平方根\t自然对数\n"+sqrt+"\t"+sqrt_root+"\t"+log);
}
</script>
</head>
<body>
<input type="button" value="随机数" onclick="getrandom()">
<input type="button" value="计算" onclick="cal()">
</body>
</html>
训练二 生成4位验证码
要求：生成一个4位验证码，要求点击可刷新
要点： 利用 Math.random()函数生成随机数； 利用charAt取字符。
<!DOCTYPE html>
<html lang="en">
<head>
<title>验证码</title>
<meta charset="UTF-8">
<script>
var s="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
var rnd;
function GeneratRnd(){
var code="";
for(i=0;i<4;i++){
rnd=Math.floor(Math.random()*62);
code+=s.charAt(rnd);
}
return code;
}
function show(){
document.getElementById("msg").innerHTML=GeneratRnd();
}
window.onload=show;
</script>
</head>
<body>
<span id="msg"></span>
<input type="button" value="刷新" onclick="show()">
</body>
</html>
训练三 实时显示时间
要求：现实出所有的时间，格式为“X年X月X日 星期X xx:xx:xx”
要点： 1. 对Date()对象的熟练使用； 2. “星期一”这样的显示，通过数组查询方式;3. 每秒运行函数，setTimeout();
务必注意，Date.getMonth()返回是0~11; Date.getDay() 返回0~6.
<!DOCTYPE html>
<html lang="en">
<head>
<title>显示时间</title>
<meta charset="UTF-8">
<script>
function showtime(){
var sWeek= new Array("日","一","二","三","四","五","六")
var Mydate=new Date();
var Myear=Mydate.getFullYear();
var Mday=Mydate.getDate();
var Mmonth=Mydate.getMonth()+1; //注意这里月份返回0~11
document.getElementById("date").innerHTML=(Myear+"年"+Mmonth+"月"+Mday+"日"+" 星期"+sWeek[Mydate.getDay()]+"</br>");
var h=GeneralizeTime(Mydate.getHours());
var m=GeneralizeTime(Mydate.getMinutes());
var s=GeneralizeTime(Mydate.getSeconds());
document.getElementById("msg").innerHTML=(h+":"+m+":"+s+"")
setTimeout("showtime()",1000); //每秒执行一次showtime函数，自己调用自己，无限循环下去
}
function GeneralizeTime(time){
if (time<10)
return "0"+time;
else
return time;
}
window.onload=showtime; //这里一定不能使用showtime()；
</script>
</head>
<body>
<h1 id="date"></h1>
<span id="msg"></span>
</body>
</html>
网友评论