Day40 JavaScript 练习

最新推荐文章于 2024-07-20 14:45:00 发布

王小c

最新推荐文章于 2024-07-20 14:45:00 发布

阅读量145

点赞数

分类专栏：日记 Web开发

本文链接：https://blog.csdn.net/qq_31707969/article/details/104764159

版权

日记同时被 2 个专栏收录

131 篇文章 0 订阅

订阅专栏

Web开发

35 篇文章 0 订阅

订阅专栏

轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>



</head>
<body>

    <img id="img" src="img/banner_1.jpg" width="100%">

    <script>
        /*
            分析：
                1.在页面上使用img标签展示图片
                2.定义一个方法，修改图片对象的src属性
                3.定义一个定时器，每隔3秒调用方法一次。


         */


        //修改图片src属性
        var number = 1;
        function fun(){
            number ++ ;
            //判断number是否大于3
            if(number > 3){
                number = 1;
            }
            //获取img对象
            var img = document.getElementById("img");
            img.src = "img/banner_"+number+".jpg";
        }

        //2.定义定时器
        setInterval(fun,3000);

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

页面跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动跳转首页</title>
<style>
 p{
	text-align : center;
 }
 
 span{
	color:red;
 }
</style>
</head>
<body>
    <p>
        <span id="time">5</span>秒之后,自动跳转首页...
    </p>

<script>
    //获取倒计时秒数
    var time = document.getElementById("time");
    var second = 5;
    function showTime(){
		second -- ;
        if(second <= 0){
            //时间到了，跳转首页
            location.href = "https://www.baidu.com";
        }

        time.innerHTML = second;
        
    }

    setInterval(showTime,1000);

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

表单校验

<script>
    window.onload = function(){
        document.getElementById("form").onsubmit = function(){
            //验证用户名
            //验证密码
            //...
            //都成功则返回true
            //
            return checkUsername() && checkPassword();
        }

        document.getElementById("username").onblur = checkUsername;
        document.getElementById("password").onblur = checkPassword;
    }

    function checkUsername(){
        var username = document.getElementById("username").value;
        var reg_username = /^\w{6,12}$/;
        var flag = reg_username.test(username);
        var s_username = document.getElementById("s_username");
        if(flag){
            s_username.innerHTML = "<img height='25' width='35' src='img/gou.png'>"
        }else{
            s_username.innerHTML = "用户名格式有误";
        }
        return flag;
    }

    function checkPassword(){
        var password = document.getElementById("password").value;
        var reg_password = /^\w{6,12}$/;
        var flag = reg_password.test(password);
        var s_password = document.getElementById("s_password");
        if(flag){
            s_password.innerHTML = "<img height='25' width='35' src='img/gou.png'>"
        }else{
            s_password.innerHTML = "密码格式有误";
        }
        return flag;
    }

</script>