求javascript代码。。。时间显示 和 表单验证
发布网友
发布时间:2022-04-28 13:20
我来回答
共1个回答
热心网友
时间:2022-04-12 01:27
由于这是从我空间里拷过来的,运行效果的图片看不到。
1、表单验证只举个简单例子
<script>
function check_input(){
if(document.myform.username.value.length<6){
alert("用户名不能少于6个字符!");
return false;
}
return true;
}
</script>
<form name="myform" onsubmit="return check_input()">
用户名:<input name="username">
</form>
2、时间显示
在网页上显示当前时间的方法太多了,我在这里只写下我自己用的JavaScript实现的方法。若要在页面上显示时间,首先要确定显示谁的时间。为什么这么说?这是因为现在的网页大多是动态的,用户所获取的信息都是从服务器端请求得到的,也就是说大多数重要的信息都是保存在服务器端。这样来说,时间就有服务器时间和客户端时间。简单的说,服务器时间就是你访问的主机上的时间,而客户机时间则是你自己电脑上的时间,你可以随时改变你的电脑时间,但却绝改不了主机时间。
举个简单的例子,当你和QQ群里的好友聊天时,都会显示信息发送的时间,你会发现你发送信息的时间有时和自己电脑上的不一致,而且好像所有的时间都没出问题,都差不多。其实这是因为那里显示的都是QQ服务器上的时间,你们用的时间都是同一个。
好了,这里只说最简单的时间显示,甚至在界面上都不任何修饰。这里要显示的是客户端时间,也就是说把登录网页的用户的右下角的时间显示在网页上。
要让用户的当前时间显示出来,首先要做的就是获取用户的当前时间。JavaScript提供了一个Date类,这个类的无参构造函数构造出来的时间就是系统当前时间,而js实现的是静态网页,它运行的所有信息都只是运行它的电脑的信息。这样,我们使用一个构造函数就可以获取当前时间了。代码如下:
var date = new Date();
这样获取的是一个Date型数据,但它包含很多信息,若此时我们直接将这个date打印到网页上,它所显示的将是下面这个样子:
Fri Dec 17 2010 09:13:46 GMT+0800 (China Standard Time)
这段信息中包含的信息依次是:Fri,即Friday,星期五;Dec,即December,十二月;17是17日,2010则是2010年,09:13:46则是当前时间了。GMT+0800,表示这里的时间是格林威治时间再加上8个小时的时区。括号里的China Standard Time是对前面的GMT+0800的说明,即“中国标准时间”。
显然,若我们将这段信息打印到网页上,并不是所有人都能看得懂,而且有些信息还是不必要甚至多余的。我们理想中要显示的应该是这样的:
2010年12月17日 星期五 09:13:46
然后让这段文字不断更新,形成秒数不断更新的样子,就像电子表一样。
既然我们已经获取了一大段信息,虽然信息的格式不能令我们满意,但我们可以为它们包装一下。我们要做的就是把这段文字进行解析拆分,分成一块一块的文字,然后再在这些块后面加上“年”,“月”,“星期”等等。如何拆分呢?
对于Date数据的信息拆分,Js也提供了函数。前面我们已经获取了一个Date型数据,并保存在了date里,接下来我们要对date进行一次手术,让它肢解(暴力了…)。好了,我们开始吧。
我们从大的数据开始获取,按照年月日,星期,时分秒来解析。Js的Date型数据拆分,或者说单元块的获取函数都很容易理解。就是一个getXXX(),XXX为年月日等的英文单词,其中首字母大写即可。比如说获取年份:
var y = date.getYear();
这样我们就得到了年份,为方便后面的使用,先将获取的年份保存在y里。需要说明的是,这样获取的都是一些int型的数据(当然,js里是没有那么清楚的数据类型的划分)。为什么要特别说明这个呢?其实这只是为后来的月,日,时分秒等为一位数时做点准备,总之先记下,获取的是int型数据。
按照这个方法,我们还可以获取更多信息:
var m = date.getMonth()+1;
var d = date.getDate();
var w = date.getDay();
var h = date.getHours();
var f = date.getMinutes();
var s = date.getSeconds();
以上获取的依次是:月、日、星期、时、分、秒,我已经将它们分别保存起来了。估计你也注意到了,在获取月的时候,我在月获取后又加了个1给它。这是因为,在js(事实上任何编程语言都是如此),0表示的1月,1表示2月,依次类推。若不加1,显示出来的会有0月,1月,2月这样的。但我们绝不会希望显示一个0月。所以我要给它加个1,这样才能正确显示月份。
特殊的还不止月份一个,我们获取的星期也是一个特别值,它不符合中国人的习惯。获取星期得到的也是int型,从0到6,依次代表星期日、星期一到星期六。但这个我们不需要给它加1了,因为就算是星期一,我们也不想显示成星期1,而是要中文“星期一”。所以我们还需要定义一个数组,分别将中文的数字保存起来用。数组如下:
var week=["日","一","二","三","四","五","六"];
这样,week[0]就是“日”,week[1]就是“一”,等等,和获取的星期就对应了。
至此,数据拆分完毕。下面我们要对数据来一点修补。补什么?你肯定也想显示出09:13:46这样的时间吧,但你如果现在就将上面的数据拼接起来,只会显示9:13:46,甚至以后还有可能显示出2011年 1月1日 星期六 0:0:0。看到差别了吗?对,显示的0:0:0总是很怪异。我们要的是2011年 01月01日 星期六00:00:00。
所以我们要对每个数据都判断是否小于10,当然,年份就不用了。如果小于10我们就要给它前面补个0。代码如下:
if(m<10){
m="0"+m;
}
if(d<10){
d="0"+d;
}
if(h<10){
h="0"+h;
}
if(f<10){
f="0"+f;
}
if(s<10){
s="0"+s;
}
这样,所有的数据也就都会显示我们预期的效果了。不过有些浏览器会将2010年显示成110年,原因我还不知道。为保万全,最好加一个判断,如下:
if(y<1000){
y+=1900;
}
因为现在已经是2010年了,如果年份小于1000,除非用户恶作剧,基本可以断定显示成了110。给它加上1900也就得到我们要的2010了。
我们来将这些数据拼接起来:
var time=y+"年"+m+"月"+d+"日 星期 "+week[w]+" "+h+":"+f+":"+s;
接着把这个字符串time放置到网页上的某个位置,我放在了一个id为time的div里。
time.innerHTML=time;
将这个函数放置在body标签里,用onload事件触发即可显示出当前时间。不过它是不变的,只显示网页加载的时间。所以我们要让它每秒都执行一次,这样每一秒的时间都是正确的了。代码如下:
setTimeout("nowTime()",1000);
这个方法的过程是,延迟指定的时间(单位:微秒)后,执行一次指定的代码。我把前面的代码都放在了一个名为nowTime的方法里,我又想每一秒都执行一次这个方法,所以代码如上。指定1000,即1000微秒,也就是1秒。这样,每一秒都会执行以上全部代码:获取当前时间,进行解析、拼接、显示,延迟一秒,再重复以上代码。如此,我们就能看到网页上显示实时时间了。
运行效果如下:
为了网页需要,我的这段显示有了css的修饰。不过除了文字颜色和背景外,文字部分完全一致。
剩下的只是扩展了。只要你愿意想,你可以显示成任意的框架,给文字加背景,模仿电子表等等,都是可以的,完整的代码就不给出了。下面是我看到一个样式:
这是一个日历样子的,只不过是一个层,加上文字的放置位置上的变化,实现的过程也是类似的。显然,这个例子里由于没有处理年份,出现了110年这样的错误。
参考资料:http://user.qzone.qq.com/378527566/infocenter