htmlJs中轮播图

最新推荐文章于 2023-12-04 20:00:00 发布

qq_40707269

最新推荐文章于 2023-12-04 20:00:00 发布

阅读量136

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_40707269/article/details/109739306

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

错误写法
倒计时结束后跳转
采用while的方式跳转，
问题在于while的方式计算太快了，完全没有中间间歇状态
一瞬间就完成了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        直接使用类选择器
         */
        #ps {
            text-align: center;

        }
        /*表示p标签，位置放在中间
        */
        p span{
            color: red;/*给定时器设计颜色，采用包裹的方式设置好定时器*/


        }
    </style>
</head>
<body>

<p id = "ps"><span id = "time"></span>秒后跳转去首页</p>
<script>
    //设置一个X秒后去首页的一个装置
    //首先用p标签包裹所有内容，在p标签里设置span标签进行倒计时设计
    var second = 6;
    var time = document.getElementById("time");//document是window对象中的属性
    function showTime(){
        //显示倒计时

        while (second > 3){
            time.innerHTML = second;//设置span标签里的内容
            second--;//设定好倒计时
        }


    }
    showTime();
</script>



</body>
</html>

所以采用重复计时器，setintervel（）重读调用函数，设置时间间隔让你看清楚是正确的做法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        直接使用类选择器
         */
        #ps {
            text-align: center;

        }
        /*表示p标签，位置放在中间
        */
        p span{
            color: red;/*给定时器设计颜色，采用包裹的方式设置好定时器*/


        }
    </style>
</head>
<body>

<p id = "ps"><span id = "time"></span>秒后跳转去首页</p>
<script>
    //设置一个X秒后去首页的一个装置
    //首先用p标签包裹所有内容，在p标签里设置span标签进行倒计时设计
    var second = 6;
    var time = document.getElementById("time");//document是window对象中的属性
    function showTime(){
        //显示倒计时
            if(second > 0){
                second = second - 1;
                time.innerHTML = second;//设置span标签里的内容
            }
            else {
                location.href = "https://www.baidu.com";//网页进行跳转
            }


    }
    setInterval(showTime,1000);//使用延时计时器，重复进行调用
</script>



</body>
</html>

DOM属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        直接使用类选择器
         */
      .ys1{
          color: red;
      }
      .ys2{
          color: blue;
      }
    </style>
</head>
<body>
<p class="ys1" id="c1">
    自由
</p >

<p class="ys2">
    呵呵
</p>
<input type="checkbox" name = "sex" value="read">
<input type="checkbox" name = "sex" value="fly">
<input type="checkbox" name = "sex" class="button">

<ul>
    <li>javaee</li>
    <li>ios</li>
    <li>php</li>
</ul>

<input type="text" id = t1 value="nihao1">
<script>
    var arry = document.getElementsByName("sex");//根据name选择标签
    //根据name拿到相同name的对象进行操作
    //返回的是一个数组

    //document.getElementsByClassName();
    //根据class拿到相同class的对象进行操作
    document.getElementsByTagName("li");
    //根据标签的名字，拿到相同标签对象进行操作

    var t = document.getElementById(t1);//拿到id为t1的对象
    alert(t1.value);//查看对象中的value值
    t1.value = "你好吗";//修改属性值


    var s = document.getElementsByClassName("ys1");//通过classname获取对象
    s[0].className= "ys2";//class属性要写成className




</script>



</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
<input type="text"id = "f">
<script>
    var ins = document.getElementById("f");
    function Oclik(){
        alert("啊，我得到焦点了");
    }
    function focus(){
        alert("啊，我没焦点了");
    }
    ins.onfocus = Oclik;//绑定获取焦点事件
    ins.onblur = focus;





</script><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body id = bo onload="fun()">  <!--直接在标签上是带着函数()-->
你好
<script>
    bod = document.getElementById(bo);
    function fun(){
        alert("加载完毕了");
    }
    








</script>



</body>
</html>



</body>
</html>

onload事件，在body加载完成之后可以使用onload事件进行加载，
onload需要写在body标签上
onsubmit事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body id = bo onload=ff()>  <!--直接在标签上是带着函数()-->
<form action="" onsubmit="show()">
    <input type="text">我是XX
    <input type="submit" value="提交">
</form>
<script>
    bod = document.getElementById(bo);


    var f = document.getElementsByTagName("form");
     function show(){
        alert("你他妈把表单提交了");
    }//这种方式是将匿名函数赋值给了一个变量

    function ff(){
         alert("身体执行完了");
    }













</script>



</body>
</html>