JavaScript简单的实例应用

1、显示当前时间：

<!doctype>
<html>
    <head>
        <meta charset='utf-8'>
        <script type='text/javascript'>
            function showtime(){
                var now_time = new date();    //创建时间对象的实例
                var hours = now_time.gethours();    //获得当前小时数
                var minutes = now_time.getminutes();    //获得当前分钟数
                var seconds = now_time.getseconds();    //获得当前秒数
                var timer = "" + ((hours > 12) ? hours - 12 : hours);
                timer += ((minutes < 10) ? ":0" : ":") + minutes;
                timer += ((seconds < 10) ? ":0" : ":") + seconds;
                timer += "  " + ((hours > 12) ? "pm" : "am"); 
                document.getElementById("aa").text = timer;
                settimeout('showtime()', 1000);
              }  
            </script>
    </head>
    <body onload="showtime()">
        <div id="aa"></div>
    </body>
</html>

2、当鼠标经过图像时图像的震动效果：

<!doctype>
<html>
    <head>
        <meta charset='utf-8'>
        <script type='text/javascript'>
            var rector = 3, stopit = 0, a = 1;
            function init(which){
                stopit = 0;
                zhend =  which;
                zhend.style.left = 0;
                zhend.style.top = 0;    
              }  
            function rattleimage(which){
                if((!document.all && !document.getElementById) || stopit = 1)
                    return;
                if(a == 1){
                     zhend.style.top = parseInt(zhend.style.top) + rector;
                } else if(a == 2){
                     zhend.style.left = parseInt(zhend.style.left) + rector;
                } else if(a == 3){
                     zhend.style.top = parseInt(zhend.style.top) - rector;
                } else if(a == 4){
                     zhend.style.left = parseInt(zhend.style.left) - rector;
                }
               else {
                     zhend.style.left = parseInt(zhend.style.left) - rector;
                } 
                if(a < 4)
                   a++;
                else
                    a = 1;
                settimeout('rattleimage()', 50); 
          }
          function stoprattle(which){
            stopit = 1;
             which.style.left = 0;   
             which.style.left = 0;
           }
        </script>
    </head>
    <body>
        <img src="test.png" class="zhendimage" onMouseover="init(this);rattleimage()" onmoouseout="stoprattle(this)"  />
    </body>
</html>

3、自由切换图像：

<!doctype>
<html>
    <head>
        <meta charset='utf-8'>
        <script type='text/javascript'>
            var img = new array(3);
            var nums = 0;
            if(document.images){
                for(i = 1; i <= 3; i ++){
                    img[i] = new image();
                    img[i].src = 'images/00' + i + '.png';
                }
            }
            function fort(){
                nums ++;
                document.images[0].src = img[nums].src;
                if(nums == 3)
                    nums = 0;    
              }  
            function slide(){
                setInterval('fort()', 1000); 
            }
        </script>
    </head>
    <body onload="slide()">
        
    </body>
</html>

posted on 2018-01-09 19:27 minoz 阅读(312) 评论(0) 编辑收藏举报