Python_day21--onclick轮播图、文本框内容拷贝、onload轮播图、有广告的轮播图、登陆页面进阶版

最新推荐文章于 2024-10-19 19:21:26 发布

Biu_Biu_0329

最新推荐文章于 2024-10-19 19:21:26 发布

阅读量633

点赞数

CC 4.0 BY-SA版权

文章标签： web css js

本文链接：https://blog.youkuaiyun.com/Biu_Biu_0329/article/details/80940402

本文详细讲解了如何使用JavaScript实现手动和自动轮播图，包括onclick事件触发的图片切换，页面onload时的自动轮播，并探讨了带有广告的轮播图以及登录页面的进阶设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、轮播图--触发事件onclick

诉求：在淘宝广告位上经常能够看到图片的自动播放，以及手动切换图片；我们先达到最基本的要求，点击按钮实现图片的轮播切换；

onclick 属性由元素上的鼠标点击触发。

注释：onclick 属性不适用以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。

首先我们需要将页面上的显示出来“下一个“和图片，然后通过javaScirpt编写触发事件的逻辑语句，通过逻辑语句来实现图片的切换

并且我们会发现在真正的淘宝广告会不断的跳转，实现真正的“轮播”；

第一步：

首先我们先把框架搭建起来，然后再实现逻辑上的图片跳转，

<body>
<div>
    <input type="button" value="下一页" onclick="changeImg()">

    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>

    <img src="img/img1.jpg" id="img" onclick="changeImg()">
</div>

</body>

第二步：我们使用JS来写业务逻辑，当我们执行某个事件的时候会触发逻辑发生，以此来实现轮播；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01</title>
    <style>
        div {
            text-align: center;
        }
    </style>
    <script>
        // 定义一全局变量， 控制图片循环的顺序;
        var i = 1;


        function changeImg() {
//                var img = document.getElementById('img').src;
//                alert(img);

//                document.getElementById('img').src = 'img/img2.jpg'
            // 当点击下一页的时候， 循环改变图片的内容;

            // 每次触发事件， 则i+1;实现下一张照片;
            i++;
            // 修改照片的链接为下一张照片
            document.getElementById("img").src = "img/img" + i + ".jpg";
            // 6为轮播图片的总数， 如果i===6， 则重头轮播, 重置i为1;
            if (i === 6) {
                i = 0;
            }
        }
    </script>
</head>
<body>


<div>
    <input type="button" value="下一页" onclick="changeImg()">

    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>

    <img src="img/img1.jpg" id="img" onclick="changeImg()">
</div>

</body>
</html>

这里的图片你可以再某宝或某东是上来下在他们，以便共你使用

二、练习--文本框的内容拷贝

诉求：在我们注册或填写“密码“和“再次确认密码“时经常旁边会有一个复制以上文本的按钮，我们这里就要实现上述功能；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_练习_文本框内容拷贝</title>
    <script>
        function copytext() {
            var username = document.getElementById("username").value
            var name = document.getElementById("name").value = username
        }
    </script>
</head>
<body>

<div>
    用户名：<input type="text" name="username" id="username">
    <br>
    姓名：<input type="text" name="name" id="name">
    <input type="button" value="复制用户名" onclick="copytext()">

</div>
</body>
</html>

三、自动轮播图--页面触发onload

诉求：要求我们不需要手动点击按钮，要我们跳转到也面的时候图片自动每隔几秒自动轮换；

这里我们要提到的是onload：

onload 属性在对象已加载时触发。

onload 常用在 <body> 中，一旦完全加载所有内容（包括图像、脚本文件、CSS 文件等），就执行一段脚本。

分析：我们只要把上面的轮播图代码稍稍进行改造就可以，同时用到onclick事件和 onload事件；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onload事件</title>

    <style>
        div {
            text-align: center;
        }
    </style>
    <script>
        // 定义一全局变量， 控制图片循环的顺序;
        var i = 1;

        function  init() {
            //每隔固定时间， 去修改图片(changeImg()),
            // setInterval默认时间单位为毫秒；
            setInterval('changeImg()', 3000)
        }

        function changeImg() {
//                var img = document.getElementById('img').src;
//                alert(img);

//                document.getElementById('img').src = 'img/img2.jpg'
            // 当点击下一页的时候， 循环改变图片的内容;

            // 每次触发事件， 则i+1;实现下一张照片;
            i++;
            // 修改照片的链接为下一张照片
            document.getElementById("img").src = "img/img" + i + ".jpg";
            // 6为轮播图片的总数， 如果i===6， 则重头轮播, 重置i为1;
            if (i === 6) {
                i = 0;
            }
        }
    </script>

</head>
<body onload="init()">
<div>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>

    <img src="img/img1.jpg" id="img" onclick="changeImg()">
</div>


</body>
</html>

四、有广告的轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04_1_带有广告的轮播图</title>
    <style>
        div{

            text-align: center;
        }



    </style>
    <script>
        function init() {
            setInterval("changeimg()",1000);

            displaytime=setInterval("showAd()",1000)

        }

        function showAd() {
            document.getElementById('ad').style.display = "block";

            clearInterval(displaytime);

            hidtime = setInterval("hidAd()",1000)

        }

        function hidAd() {
            document.getElementById('ad').style.display = "none";

            clearInterval(hidtime);

        }

        var i =1;


        function changeimg() {
            i ++;
            document.getElementById("img").src = "img/img"+i+".jpg";
            if (i === 5){
                i=0;
            }
        }
    </script>
</head>
<body onload="init()">
<br>
<br>

<div>
    <img src="img/img1.jpg" id="img">
    
</div>
<br>

<div align="center">
    <img src="img/img7_ad.jpg" id="ad" style="display: none;" >

</div>

</body>
</html>

五、登陆页面--进阶

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_登陆页面进阶</title>

    <script>
        //
        function checkForm() {

//  **********************判断是否填写用户名*************************
            var user = document.getElementById("user").value;
// 1 == '1' : True
// 1 === '1': Flase
            if (user === "") {
                alert("用户名不能为空");
                return false;
            }


// **********************判断是否填写密码*************************
            var passwd = document.getElementById("passwd").value;
            if (passwd === "") {
                alert("密码不能为空");
                return false;
            }
//**********************判断两次密码是否一致*******************************
            var repasswd = document.getElementById("repasswd").value;
            if (passwd !== repasswd){
                alert("两次密码不一致！");
                return false

            }

//*************************判断邮箱是否合法***************************
            var email = document.getElementById("email").value;
            var patt1 = new RegExp(".+@\\w+\\.com");

            if (!patt1.test(email)){

                alert("邮箱地址不合法");
                return false
            }


        }

        function showTips(id,info) {
            document.getElementById(id+"Tip").innerHTML="<span style='color: darkgrey'>" +info+ "</span>"
            
        }
        
        function Check(id,info) {
            var Uvalue = document.getElementById(id).value;
            if (Uvalue ===""){
                document.getElementById(id+"Tip").innerHTML="<span style='color: red'>" +info+ "</span>"
            }
            else {
                document.getElementById(id+"Tip").innerHTML="<span style='color: green'>ok</span>"
            }
        }
        
        function checkpasswd() {
            var passwd = document.getElementById("passwd").value;
            var repasswd = document.getElementById("repasswd").value;
            if (passwd !== repasswd){
                alert("两次密码不一致！");
                return false
            }
            
        }

        function checkemil(id , info) {
            var email = document.getElementById("email").value;
            var patt1 = new RegExp(".+@\\w+\\.com");

            if (!patt1.test(email)){
                document.getElementById(id+"Tip").innerHTML="<span style='color: red'>" +info+ "</span>"
            }
            else {
                document.getElementById(id+"Tip").innerHTML="<span style='color: green'>ok</span>"
            }

        }

    </script>

</head>
<body>

<form action="" method="get" >
    <!--onsubmit="return checkForm()"-->

    用户: <input type="text" name="user" id="user" onfocus="showTips('user','数字字母下划线组成')"
               onblur="Check('user','用户名不能为空')">
    <span id="userTip"></span>
    <br/>
    密码:<input type="password" name="passwd" id="passwd" onfocus="showTips('passwd','8～16位数字字母下划线组成')"
              onblur="Check('passwd','密码不能为空')">
    <span id="passwdTip"></span>
    <br/>
    重复密码:<input type="password" name="repasswd" id="repasswd" onfocus="showTips('repasswd','密码请保持一至')"
                onblur="checkpasswd()">
    <span id="repasswdTip"></span>
    <br/>
    邮箱地址:<input type="text" name="email" id="email" onfocus="showTips('email','6～18位数字字母下划线组成,并且由字母开头')"
                onblur="checkemil('email','邮箱地址不能为空')">
    <span id="emailTip"></span><br/>
    <input type="submit" value="提交">
    <input type="reset" value="重置">


</form>




</body>
</html>