使用JavaScript制作动态网页-2

最新推荐文章于 2023-10-03 20:22:05 发布

wxwxyh

最新推荐文章于 2023-10-03 20:22:05 发布

阅读量1.9k

点赞数 2

本文链接：https://blog.csdn.net/wxwxyh/article/details/100528898

版权

使用JavaScript制作动态网页-2

表单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
</head>
<body>
   <form action="#" method="GET" onsubmit="return check()" >
    账号：<input type="text" name="username"/>
    <br/>
    密码：<input type="password" name="userpwd"/>
    <br/>
    <span >账号或密码不存在</span>
    <br>
    <input type="submit" value="登录"  />
   </form> 

   <script type="text/javascript">
    var inputs = document.getElementsByTagName("input");  
    var sp = document.getElementsByTagName("span"); 
    function check(){     
        for(var i=0;i<inputs.length;i++){
            if(inputs[i].value==null || inputs[i].value==""){
                // alert("账号或密码不存在");
                
                return false;
            }
        }
        return true;
    }
   </script>
</body>
</html>

Window对象的常用方法

在这里插入图片描述

open() 方法
用于打开一个新的浏览器窗口或查找一个已命名的窗口
语法：
newWIn = window.open(“弹出窗口的url”, “窗口名称”, “窗口特征”
close()方法
close() 方法用于关闭浏览器窗口

1、某个窗口可以通过调用 self.close() 或只调用 close() 来关闭其自身
2、只有通过 JavaScript 代码打开的窗口才能够由 JavaScript 代码关闭

定时函数
setInterval( fn，millisec )方法
可按照指定的周期（以毫秒计）来调用函数或计算表达式，循环执行多次。
◆setTimeout( fn，millisec )方法
用于在指定的毫秒数后调用函数或计算表达式，只执示例行一次。
定时清除函数
clearInterval( timer ) 方法
可取消由 setInterval() 设置的 timeout
clearTimeout( timer ) 方法
可取消由 setTimeout() 方法设置的 timeout

课堂练习
需求说明
◼在页面制作一个10秒倒计时效果
◼效果如图所示
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计时器2</title>
</head>
<body>
    <h1>0</h1>
    <input type="button" value="开始" onclick="start()"/>
    <input type="button" value="暂停" onclick="pause()"/>
    <input type="button" value="停止" onclick="stop()"/>

    <script type="text/javascript">
    //1.获取元素
    var h=document.getElementsByTagName("h1")[0];
    var timer = null;
    //2.操作元素
    function start(){
        if(timer==null){
            timer=setInterval(function(){
                var t=h.innerHTML;
                if(t==10){
                    stop();
                    alert("时间到！");
                }else{
                    t++;
                    h.innerHTML=t;
                }
            },1000);
        }
    }
    function pause(){
        if(timer!=null){
            clearInterval(timer);
            timer=null;
        }
    }
    function stop(){
        // if(timer!=null){
            pause();
            h.innerHTML=0;

        // }
    }
    
    </script>
</body>
</html>