1.利用定时器实现一个动态时钟
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<span id="time"></span>
<script type="text/javascript">
//定时器
setInterval(function(){
var date=new Date()
var hours=date.getHours()//小时
var minutes=date.getMinutes()//分钟
var seconds=date.getSeconds()//秒
//使用三目运算符,若变量名为hours的值小于九则返回"0"+9,大于9则返回自己本身
hours=hours>9? hours:"0"+hours
//使用三目运算符,若变量名为minutes的值小于九则返回"0"+9,大于9则返回自己本身
minutes=minutes>9? minutes:"0"+minutes
//使用三目运算符,若变量名为seconds的值小于九则返回"0"+9,大于9则返回自己本身
seconds=seconds>9? seconds:"0"+seconds
// 设置一个变量储存小时,分钟,秒
var result=hours+":"+minutes+":"+seconds
// 在id为time的span标签中输出result
document.getElementById("time").innerHTML=result
},1000)//以毫秒为单位跳动
</script>
</body>
</html>
2.利用setInterval()函数实现倒计时
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<span id="time"></span>
<script type="text/javascript">
// 设置一个变量并赋值
var i=100;
// 定时器
setInterval(function(){
i--
// // 在id为time的span标签中输出i
document.getElementById("time").innerHTML=i
// 当i=0时i=100继续进行倒计时
if(i==0){
i=100
}
},100)//以毫秒为单位跳动
</script>
</body>
</html>
3.去掉数组中重复的元素,如:arr_3=[1,2,3,1,4,3,2,5,7],将该数组中重复的元素去掉,得到一个新的数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// 创建一个数组
var arr_3=[1,2,3,1,4,3,2,5,7]
// 双重循环
for(var i=0;i<arr_3.length;i++){
for(var j=i+1;j<arr_3.length;j++){
// 若i=j时删除i
if(arr_3[i]==arr_3[j]){
arr_3.splice(i--,1)
}
}
}
document.write(arr_3)
</script>
</body>
</html>
4.某部门有张三、李四、王五、赵六、小白、小明、小红,共7名职员,由于临近年会,现请你帮助制作一个抽奖系统,随机抽取5名幸运儿,不能重复。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" id="a" value="抽奖啦!"/>
<span id="names">
<br />
王五<br />
李四<br />
小明<br />
小白<br />
赵六<br />
小红<br />
张三<br />
</span>
<script type="text/javascript">
document.getElementById("a").onclick=function(){
//原数组
var a1 = ["张三","李四","王五","赵六","小白","小明","小红"]
//输出数组
var out = [];
//输出个数
var num = 5;
while(out.length < num){
var temp = (Math.random()*a1.length) >> 0;
out.push(a1.splice(temp,1));
}
document.getElementById("names").innerHTML=out
}
</script>
</body>
</html>
5.完成对注册表单的设计与验证
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 先进行html网页设计 -->
<h3>欢迎注册**网站</h3>
<h4>姓名:<input type="text" id="a" placeholder="2-4个中文"/></h4>
<h4>密码:<input type="text" id="b" placeholder="至少6个数字必须是字母数字下划线"/></h4>
<h4>邮箱:<input type="text" id="c" placeholder="单域名邮箱"/></h4>
<h4>年龄:<input type="text" id="d" placeholder="整数"/></h4>
<input type="button" id="e" value="验证信息"/>
<script type="text/javascript">
// 与id为e的按钮绑定点击事件
document.getElementById("e").onclick=function(){
// 使用正则表达式进行判断a输入框中只能输入汉字,并且不能小于2位和大于4位
var a=/^[\u4e00-\u9fa5]{2,4}$/
var a1=document.getElementById("a").value
var isa2=a.test(a1)
if(isa2==false){
alert("名字格式不正确")
return
}
// 使用正则表达式进行判断b输入框中输入的数不能小于6
var b=/^[0-9a-zA-Z_]{6,}$/
var b1=document.getElementById("b").value
var isb2=b.test(b1)
if(isb2==false){
alert("密码格式不正确")
return
}
// 使用正则表达式进行判断c输入框中的邮箱格式
var c=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
var c1=document.getElementById("c").value
var isc2=c.test(c1)
if(isc2==false){
alert("邮箱格式不正确")
return
}
var d=/^[0-9]*$/
var d1=document.getElementById("d").value
var isd2=d.test(d1)
if(isd2==false){
alert("年龄格式不正确")
return
}
if(isa2&&isb2&&isc2&&isd2){
alert("验证成功")
}
}
</script>
</body>
</html>