Input框中获取时间

Input框不只是只能用来当文件框输入文字，

还可以其他很多用途，input框还可以用来当按
钮，下面我教大家用input框获取精确时间，框
里的时间会随时间的变动而变动，可以用来看时
间，样式也可以自定义；
首先创建一个表单，里面在放一个
框：

创建一个表单后，给它一个show_time的名
称，再给这个标签添加一个onSubmit事件属性，
这个属性是表单提交时使用的使用的，onSubmit
属性只能在表单中使用，会在提交表单时触发，

里输入文字：现在的北京时间是：，然后再接 着写标签，的type值设为文本框text， 再给这个标签一名称为：namel，文本框的文字大小设 为16， 接下来设置的样式：  1、 设置文本框的内边距Padding：10px 10px; 使这个文本框撑大， 2、 设置文本框的背景颜色，background： linear-gradient(to right, red, blue); 这个是CSS3中的渐变色设置； 3、 把文本框的边框样式设为border:none， 去掉文本框的自带边框样式设置； 4、 设置圆角效果，border-radus设置5个px值； 5、 字体颜色设为白色；

接下来是JavaScript的代码设置：

1、 var t = new Date();Date对象用于处理日期和
时间,自动把当前日期和时间保存为其初始值，返回
当日的日期和时间；
2、 getHours()方法克返回时间的小时字段。
由getHours()返回的值是一个两位数字。不过
返回值不总是两位的，如果该值小于10，则会
返回一位数字；
3、 getMinutes()方法克返回时间的分钟字段。返回的值
是一个两位的数字。不过返回值不总是两位的，如果
该值小于 10，则仅返回一位数字。
4、 getSeconds()方法可返回时间的秒。返回的值是一个
两位的数字。不过返回值不总是两位的，如果该值小
于 10，则仅返回一位数字。
5、 timeValue += ((hours <= 12) ? hours : hours - 12);
这个是在网页上添加时；
6、 timeValue += ((minutes < 10) ? “:0” : “:”) + minutes;
这个是在网页上添加分；
7、 timeValue += ((seconds < 10) ? “:0” : “:”) + seconds;
这个是在网页上添加秒；
8、 timeValue += (hours < 12) ? “上午” : " 下午";
这个是在网页添加上下午；
9、 document.show_time.namel.value = show_str;
这个是让时间显示到网页上;
10、 timerID是网页刷新时间；
11、 写完上面的代码后就是调用他了

在body后面加上Onload=”gettime”调用这个方法；
教程结束，接下来就是看成果的时候了：