js 基础案例

浏览数：26 / 时间：2015年06月09日

让时钟在input框里面显示

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 
 9 <div id="yyy"></div>
10 <form>
11 <input type="text" name="user" id="user" size="100"style="padding:8px;">
12 </form>
13 <script>
14 setInterval(function bb () {
15     var h2 =document.getElementById(‘yyy‘);
16     var d=new Date();
17     var yy=d.getFullYear();
18     var mm=d.getMonth()+1;
19     mm=mm<10 ? ‘0‘+mm : mm;
20     var dd=d.getDay();
21     dd=dd<10 ? ‘0‘+dd : dd;
22     var hh=d.getHours();
23     hh=hh<10 ? ‘0‘+hh : hh;
24     var mi=d.getMinutes();
25     mi=mi<10 ? ‘0‘+mi : mi;
26     var ss=d.getSeconds();
27     ss=ss<10 ? ‘0‘+ss : ss;
28     var tt= yy+‘年‘+mm+‘月‘+dd+‘日‘+hh+‘:‘+mi+‘:‘+ss+‘星期‘+‘日一二三四五六‘.charAt(new Date().getDay());
29     h2.innerHTML=‘<font color=red>今天是：‘+tt;
30     document.getElementById(‘user‘).value=tt;//让时钟在input标签里面
31 },1000);
32 
33 
34 </script>
35 </body>
36 </html>

页面显示星期几的方法

方法一：放在标签里面显示推荐

1 window.onload = function  () {
2     var week = document.getElementById(‘week‘);
3     week.innerHTML =‘星期‘+‘日一二三四五六‘.charAt(new Date().getDay());
4 }

方法二直接输出：不推荐

1 document.write(‘星期‘+‘日一二三四五六‘.charAt(new Date().getDay()));

今天是：2015年4月6日16：56:7 星期六兼容性超好的代码

setInterval(function bb () {
    var h2 =document.getElementById(‘yyy‘);
    var d=new Date();
    var yy=d.getFullYear();
    var mm=d.getMonth()+1;
    mm=mm<10 ? ‘0‘+mm : mm;
    var dd=d.getDay();
    dd=dd<10 ? ‘0‘+dd : dd;
    var hh=d.getHours();
    hh=hh<10 ? ‘0‘+hh : hh;
    var mi=d.getMinutes();
    mi=mi<10 ? ‘0‘+mi : mi;
    var ss=d.getSeconds();
    ss=ss<10 ? ‘0‘+ss : ss;
    var tt=yy+‘年‘+mm+‘月‘+dd+‘日‘+hh+‘:‘+mi+‘:‘+ss+‘星期‘+‘日一二三四五六‘.charAt(new Date().getDay());
    h2.innerHTML=‘今天是：‘+tt;
},1000);

第二种显示日期的方法：

function cc () {
    var hh =document.getElementById(‘week‘).innerHTML=new Date().toLocaleString();

}setInterval(cc,1000);

对话框获取标签里面的内容

 1 <script>
 2 window.onload = function(){
 3     var aaa = document.getElementsByClassName (‘aa‘);
 4     //alert(aaa.item(0).innerHTML);//获取下标为0的元素里面的内容结果为bbb
 5     //alert(aaa.length);//获取元素的个数2
 6     //aaa.innerHTML = ‘kkkk‘;//必须要在（‘aa’）后面加上[0]才可以
 7     for(i=0;i<aaa.length;i++){   //把class=aa的标签里面的内容对话框全部读出来
 8         //aaa[i].innerHTML = ‘----你好‘;//把标签里面的内容替换
 9           aaa[i].innerHTML +=‘----你不好‘;//在标签的内容后面添加----你不好
10         //alert(aaa[i].innerHTML);
11     }
12 
13 }
14 </script>
15 <h1 class="aa">bbb</h1>
16 <p class="aa">bbbCCCC</p>
17 <h2 class=‘aa‘>hhhhhhh</h2>

点击事件获取内容

 1 window.onload =fucntion (){  //为整个网页加载完最后执行的代码
 2 
 3 }
 4 <script>
 5 window.onload =function  () {    
 6     var btn = document.getElementsByTagName(‘button‘)[0];
 7     btn.onclick= function  () {
 8         alert(this.innerHTML);
 9     }
10 }
11 </script>
12 <button>show</button>

表单默认里面hello

<script>
var u=document.getElementById(‘user‘);
u.value = ‘hello‘;
</script>
<form id="" name="" action="" method="post" >
姓名：<input type="text" name="user" id="user">
</form>

简单的必填表单验证

 1 <script>
 2 function a (id) {
 3     return document.getElementById(id);
 4 }
 5 function check () {
 6     var name = a(‘uname‘);
 7      if(name.value== ‘‘){
 8          alert(‘姓名必须填写‘);
 9          name.focus();
10          return false;
11      }
12      return true;
13 }
14 
15 </script>
16 </head>
17 
18 <body>
19 <form  name="name" action="save.php" method="post" onSubmit="return check()">
20 姓名：<input id="uname" type="text" name="uname">
21 <br><input type="submit" value="提交">
22 </form>