js小案例

最新推荐文章于 2024-08-14 15:45:18 发布

行云有影月含羞

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量134

点赞数

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/jiuyiqwer/article/details/130091997

版权

一次性定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .dn{
            height: 100px;
            width: 100px;
            background-color: aqua;
            display: none;
        }

    </style>
</head>
<body>
 <div id="dn" class="dn"></div>
 <input type="button" id="dd" value="点击清除器">
 <input type="button" id="tt" value="点击回复">
</body>
</html>
<script>
    const show = () => {
        document.getElementById("dn").style.display='block'
    }
    //第一种
    //const timeout1 = window.setTimeout(show,3*1000);
    //第二种
    const timeout2 = window.setTimeout('show()',3*1000);
    //第三种
    /*const timeout3 = window.setTimeout(()=>{

        document.getElementById("dn").style.display='block'
    },3*1000);*/
    let dd=document.getElementById("dd");
    dd.onclick=()=>{
        window.clearTimeout(timeout2);
    }



    let tt=document.getElementById("tt");
    tt.onclick=()=>{
        window.setTimeout(show,3*1000);
    }
</script>

周期定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .dn{
           background-color: crimson;
        }

    </style>
</head>
<body>
<div id="dn" class="dn"></div>
<input type="button" id="dd" value="点击清除器">

</body>
</html>
<script>


    let width=0;
    let height=0;
    const timeout3 = window.setInterval(()=>{
        document.getElementById("dn").style.width=width+'px';
        document.getElementById("dn").style.height=height+'px';
        width++;
        height++;
    },10);
    let dd=document.getElementById("dd");
    dd.onclick=()=>{
        window.clearTimeout(timeout3);
    }



</script>

表单效验

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .msg{
        color: red;
    }
    .login{
        font-size: 32px;
        text-align: center;
        color: green;
        background-color: yellow;
        position: fixed;
        top: 0;
        left: 600px;
        display: none;
    }
  </style>
</head>
<body>


<form id="f" action="#" method="post" >

  用户名：<input type="text" id="username" name="username"><span id="usernamespan" class="msg"></span> <br>
  密密码：<input type="password" id="password" name="password"><span id="passwordspan" class="msg"></span> <br>

  <button type="button" id="btn">提交</button>

</form>
<div id="login" class="login">恭喜你登录成功</div>
</body>
</html>

<script>

  let username = document.getElementById('username');
  let password = document.getElementById('password');

  let btn = document.getElementById('btn');
  btn.onclick = () => {
    //提交之前清空
    for (let c of document.getElementsByClassName("msg")) {
      c.innerHTML = '';
    };

    if(username.value == ''){
      document.getElementById('usernamespan').innerHTML = '请输入用户名';
      return;
    }
    if(password.value == ''){
      document.getElementById('passwordspan').innerHTML = '请输入密码';
      return;
    }

    //提交
    //document.getElementById('f').submit();
    document.getElementById('login').style.display = 'inline';

    window.setTimeout(() => {
      document.getElementById('login').style.display = 'none';
    },3*1000)

  }

</script>

图片轮播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .img{
            width: 100%;
            height: 200px;
            background-color: cadetblue;
            display: flex;
        }
        .ck{

            width: 50px;
            height: 100%;
            background-color: azure;
        }

    </style>
</head>
<body>
    <div class="img">
        <div class="ck">
            <img src="images/prev.png" alt="" height="100%" width="100%">
        </div>
        <div style="flex: 1">
            <img src="images/00.jpg" alt="" width="100%" height="100%" id="loop">
        </div>
        <div class="ck">
            <img src="images/next.png" alt="" height="100%" width="100%">
        </div>
    </div>
</body>
</html>
<script>
    let loop=document.getElementById("loop");
    let index=1;
    window.setInterval(()=>{
        loop.src='images/0'+index+'.jpg';
        index++;
        if (index>9){
            index=0;
        }
    },2000)
</script>

广告效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .gg{
            width: 300px;
            height: 200px;
            background-color: red;
            position: absolute;
            right: 0;
            bottom: 0;
            display: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="gg" class="gg"></div>
</body>
</html>
<script>
    let gg=document.getElementById("gg");
    window.setTimeout(()=>{
        gg.style.display='block';
    },3000)
    gg.onclick=()=>{
     window.open('http://4366uu.8faa7.com/120894/?bd_token=xXrn' +
         'qY8H3M6mL2RV5GaSS6civiYXLaBd@e3v159YRaghzNle8WehTx4fiQo51b' +
         'yg0&bd_vid=12182905947692843479');
    }
</script>