一、实时刷新（1秒）的时钟
需要注意的地方：
JavaScript代码放置的位置问题，如果放在body元素之前，可能会出现getElementById找不到id，这是可能容易忽略的地方。要是忽略了，可能会骂街。。
另外，注意一下setInterval函数的调用方法，怎么写是正确的，怎么写是错误的！！
其他的没什么，上代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>实时时钟显示</title> <style type="text/css"> *{ margin:0px auto; padding:15px; color:#90F; text-align:center;} </style> <script type="text/javascript"> var myDate=function() { var date=new Date(); var year=date.getFullYear(); var month=date.getMonth(); var day=date.getDate(); var hours=date.getHours(); var minutes=date.getMinutes(); var seconds=date.getSeconds(); var str=year+'年'+month+'月'+day+'日'+' '+hours+'时'+minutes+'分'+seconds+'秒'; var myClock=document.getElementById("clock"); myClock.innerHTML=str; }; var timeOut=function() { //这种写法错误 不能使用双引号 //window.setInterval("myDate()“,1000); //注意这里不是setTimeout函数 以毫秒为单位 //写法错误 函数的小括号不能省略 //window.setInterval('myDate',1000); //注意这里不是setTimeout函数 以毫秒为单位 //写法正确 注意使用的是单引号 //window.setInterval('myDate()',1000); //注意这里不是setTimeout函数 以毫秒为单位 //下面的写法也可以 函数没有小括号 window.setInterval(myDate,1000); //注意这里不是setTimeout函数 以毫秒为单位 //下面的写法也是可以的 //不过据说这时myDate()函数会立即执行 这个待研究 //window.setInterval(myDate(),1000); //注意这里不是setTimeout函数 以毫秒为单位 } window.onload=timeOut; </script> </head> <body> <h1> 测试时间 <p id="clock"> </p> </h1> </body> </html>
运行截图：
这里插一段循环计数的定时器代码：
<script type="text/javascript">
function count(start, end)
{
var time=null;
var ct=start;
this.s=function()
{
console.log(ct);
ct+=1;
if(ct>end)
{
ct=start;
}
}
s();
time=setInterval("s()",1000);
this.cancel=function()
{
clearInterval(time);
}
return this;
}
var temp=count(1,5);
//temp.cancel(); 用于取消定时器
</script>
二、生成10个100-1000之间的随机整数数
需要用的函数Math.random()，以及Math.floor()函数
参考网址：http://www.111cn.net/wy/js-ajax/57062.htm
Math.random()函数，默认生成的是介于0-1之间的随机小数，那如果按照题目的意思，我们就应该使用(Math.random()*(1000-100+1)+100)，然后再取整，这样就可以达到我们的要求了。
代码：
for(var i=0;i<10;i++) { var temp=Math.floor(Math.random()*901+100); console.log(temp); document.write(temp+' '); }
运行截图：
三、一个简单的登陆表单验证代码段
JavaScript代码：
var check=function() { var log_name=document.getElementById("log_name"); if(!log_name.value) {alert("请输入用户名");} var log_pass=document.getElementById("log_password"); if(!log_pass.value) {alert("请输入密码");} }
html代码(这里我们暂时忽略css代码，我这里也确实没有写CSS代码来控制样式，这里它不是重点)：
<form> <label>用户名：</label> <input id="log_name" type="text" placeholder="请输入用户名"> <label>密 码：</label> <input id="log_password" type="password" placeholder="请输入密码"> <input type="submit" value="登陆" onClick="check()"> </form>
运行截图，什么也不输入的时候，直接点击submit按钮：
这里啰嗦几句：
那就是如何检测输入框 的内容为空，我们分别测试一下以下几种情况：
‘’，“”，null，undefined
经过测试，只有“”和‘’，是可以成功检测的，当然按照刚刚上面的代码那样使用！符号测试也是可以的。
以下是测试代码，为了分别，我直接把代码也截到图里面了。
“”的情况：
‘’的情况：
null的情况（从截图中可以看出，用户名的输入框并没有被正确的检测出来）：
undefined的情况（同样没正确检测出来）：
四、cookie的使用（设置、获取以及有效期设置）
注意几点：
首先，cookie的设置和获取函数怎么实现的？
其次，有效期怎么设置（一个月）？
再次，使用正则表达式过滤字符串的空格时的注意事项。。。
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <Script type="text/javascript"> function save() { if((document.myForm.uname.value)&&(document.myForm.upass.value)) { if(confirm("是否保存用户名密码?")) { saveUserName(); saveUserPass(); } } else if(!document.myForm.uname.value) { alert("用户名不能为空！"); document.myForm.uname.focus(); //document.myForm.uname.select(); return false; //这句话不可少 否则输入焦点将不能定位到输入框 确切的说是定位了然后又移开了（过程一闪而过） } else if(!document.myForm.upass.value) { alert("密码不能为空！"); //document.myForm.upass.select(); document.myForm.upass.focus(); return false; } } function saveUserName(){ var userName =''; userName = document.myForm.uname.value; var exp=new Date(); exp.setTime(exp.getTime()+30*24*60*60*1000); //设置过期时间为一个月 document.cookie="un="+userName+";expires=" + exp.toGMTString(); ; } function saveUserPass(){ var userPass =''; userPass = document.myForm.upass.value; document.cookie="pwd="+userPass; } /*function getCookie(key,cookie){ var r=new RegExp(key+'=([^;]+)','i') var m=r.exec(cookie); if(m)return m[1]; return '' }*/ function getCookie(key,cookie) { //var strCookie=document.cookie; //获取cookie字符串 var arrCookie=cookie.split(";"); //将多cookie切割为多个名/值对 for(var i=0;i<arrCookie.length;i++) { var arr=arrCookie[i].split("="); //注意这里一定要有str来接收返回值 这里的正则表达式是不会改变arr[0]的值的 切结！！！！！ str=arr[0].replace(/(^s*)|(s*$)/g,"");//正则表达式去掉字符串头和尾的空格 if((key==str)) { return arr[1]; } } return ""; } function show(){ var strCookie = document.cookie; var userName ; var userPass ; if(strCookie == null){ //cookie为空 document.myForm.uname.value=""; document.myForm.upass.value=""; }else{ userName = getCookie('un',strCookie); userPass = getCookie('pwd',strCookie); //alert(userPass); document.myForm.uname.value = userName; document.myForm.upass.value = userPass; } } </Script> <style type="text/css"> *{ margin:0 auto; padding:15px; color:#90F;} </style> </head> <body> <form action="test1.html" name="myForm" method="post"> 用户名：<input type="text" name="uname" placeholder="请输入用户名"/> 密  码: <input type="text" name="upass" placeholder="请输入密码"/><!--这里为了看到密码，故没有设置隐藏密码--> <br /> <br /> <input type="submit" name="submit" value="提交" onclick="return save()"/> <input type="button" value="自动填充用户名密码" onClick="show()"/> <input type="reset" name="reset" value="重置"/> </form> </body> </html>
运行截图（IE11可以正常运行，但是chrome不行，不知道为什么。。。）：
点击提交，会弹出保存密码对话框，选择确定，会跳转到另外一个页面。
顺便上一下另外一个页面的代码，便于实际测试运行（两个页面文件嬴荡放在同一目录下）：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试字符串</title> <script type="text/javascript"> var s = " asd ddd bbb sss "; document.write(s.length+' '); document.write(s+' '); var reg = /s/g; //去掉所以的空格 var ss = s.replace(reg, ""); document.write(ss.length+' '); document.write(ss+' '); var reg=/(^s*)|(s*$)/g; //去掉头尾的空格 var ss = s.replace(reg, ""); document.write(ss.length+' '); document.write(ss+' '); </script> <style type="text/css"> *{ margin:0 auto; padding:15px; color:#90C; text-align:center;} </style> </head> <body> </body> </html>
五、滚动显示文字
实现一个文本输入框内的文字滚动显示，从右向左滚动
这里运用了一个string对象的substring方法
substring(<从位置>，<到位置>)——截取一个子字符串
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>文字循环显示</title> <script type="text/javascript"> var str="这是一串测试文字。你知道吗？我不知道。" var loopDisplay=function() { txt.value=str; str=str.substring(1,str.length)+str.substring(0,1); //重新拼接字符串 setTimeout(loopDisplay,500); //定式刷新 产生滚动显示效果 } </script> <style type="text/css"> p input{ display:block; margin:0 auto; margin-top:100px; width:300px; height:50px; font-size:20px; border:2px solid #666; border-radius:5px; box-shadow:0px 0px 10px #0000FF;} </style> </head> <body onLoad="loopDisplay()"> <p><input id="txt" type="text"></p> </body> </html>
截图如下：
以上是，从右往左滚动，那么，从左往右滚动呢？
很简单，上面的代码：改一句
str=str.substring(str.length-1,str.length)+str.substring(0,str.length-1); //重新拼接字符串