zoukankan html css js c++ java

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>

查看全文

相关阅读:
.netcore下Dapper helper类
 C#各版本新增加功能（系列文章）
MySQL 查询连续登陆7天以上的用户
 MySQL 8.0版本自动排序函数dense_rank() over()、rank() over()、row_num() over()用法和区别
 MYSQL 查看锁的方式
 MYSQL 回表查询原理，利用联合索引实现索引覆盖
 ES查询某个字段分词结果
 maven 安装和配置
 Java 注解
 Java 异常

原文地址：https://www.cnblogs.com/minozMin/p/8253121.html