javaScript简单项目案例 | 字节青训营笔记

拿奖去喝AD钙
170 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的的第13天！

😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀

[@5V)GZ]0U6U)M9_NOZVUD6D.gif

🍻1、发送短信案例

案例分析：

1、按钮点击之后，会禁用 disable 为true

2、同时按钮里面的内容会发生变化，注意 button 里面的内容通过 innerHTML修改

3、定义一个变量，在定时器里面不断递减

4、如果变量为0，说明到了事件，我们需要停止定时器，并且复原按钮的初始状态

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./发送短信.css">
</head>
<body>
    手机号码: <input type="number" name="" id=""> <button>发送</button>
</body>
<script src="./发送短信.js"></script>
</html>

JavaScript

var btn=document.querySelector('button');
var timer=3;
btn.addEventListener('click',function(){
    btn.disabled=true;
    var timee=setInterval(function(){
        if(timer==0){
            clearInterval(timee);
            btn.disabled=false;
            btn.innerHTML='发送';
            timer=3;
        }
        else{
            btn.innerHTML=timer+'秒';
            timer--;
        }
    },1000);
})

效果

image.png

image.png

Screenshot_2022_0823_195302.gif

🍻2、仿京东商城抢购倒计时(简单实现)案例

案例分析：

1.用规定时间-现在时间=剩余时间 需要用到Date内置对象。

2.将剩余时间分别转化为时分秒。

3.应用innerHTML将时分秒写进文档中。

4.核心算法：使用setInterval() 循环调用该函数。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./倒计时.css">
</head>
<body>
    <div class="box">
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>
</body>
<script src="./倒计时.js"></script>
</html>

CSS

.box{
    width: 300px;
    margin: 100px auto;
}
span{
    width: 30px;
    height: 30px;
    display: inline-block;
    font-size: 15px;
    background-color: black;
    color: rgb(234, 229, 230);
    text-align: center;
    line-height: 30px;
    font-weight: 700;
}

JavaScript

var hour=document.querySelector('.hour');
var minute=document.querySelector('.minute');
var second=document.querySelector('.second');
var inputTime=+new Date("2022-8-23 22:00:00")
countDown();
setInterval(countDown,1000);
function countDown() {
    var nowTime = +new Date(); //返回的是当前时间总的毫秒数

    var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数
    var h = parseInt((times / 60 / 60) % 24); //时
    h = h < 10 ? "0" + h : h;
    hour.innerHTML = h; //把剩余的小时给 hour 盒子
    var m = parseInt((times / 60) % 60); //分
    m = m < 10 ? "0" + m : m;
    minute.innerHTML = m; //把剩余的分钟给 minute 盒子
    var s = parseInt(times % 60); //秒
    s = s < 10 ? "0" + s : s;
    second.innerHTML = s; //把剩余的秒数给 second 盒子
  }

效果

image.png

Screenshot_2022_0823_195933.gif

🍻3、跟随鼠标移动的天使案例

案例分析：

1.鼠标不断的移动，使用鼠标移动事件:mousemove

2.在页面中移动，给document注册事件

3.图片要移动距离，而且不占位置，我们使用绝对定位即可

4.核心原理∶每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标做为图片的top和left值就可以移动图片

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./跟随鼠标事件.css">
</head>
<body>
    <img src="./天使.png" alt="">
</body>
<script src="./跟随鼠标事件.js"></script>
</html>

CSS

img{
    position: absolute;
}

JavaScript

var pic=document.querySelector('img');
document.addEventListener('mousemove',function(e){
    var x=e.pageX;
    var y=e.pageY;
    pic.style.left=x-60+'px';
    pic.style.top=y-45+'px';
})

效果

Screenshot_2022_0823_200614.gif

🍻4、模拟京东快递单号查询案例

案例分析：

（1）按下s 键，就把光标定位到文本框里面。

  • 核心思路：检测用户是否按下了s 键，如果按下 s 键，就把光标定位到文本框里面。

  • 使用键盘事件对象里面的 e.keyCode 判断用户按下的是否是 s 键。

  • 文本框获得焦点： 使用 javascript 里面的 focus() 方法。

（2）当我们在文本框中输入内容时，文本框上面自动显示大字号的内容。

  • 快递单号输入内容时， 上面的大号字体盒子（con）显示(这里面的字号更大）。

  • 表单检测用户输入： 给表单添加键盘事件。

  • 同时把快递单号里面的值（value）获取过来赋值给 con 盒子（innerText）做为内容。

  • 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子。

- 注意：keydown 和 keypress 在文本框里面的特点：他们两个事件触发的时候，文字还没有落入文本框中。

  • keyup 事件触发的时候，文字已经落入文本框里面了，所以这里采用 keyup 事件。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./京东快递单号查询.css">
</head>
<body>
    <div class="search">
        <div class="con"></div>
        <input type="text" placeholder="请输入你的快递单号" class="jd">
    </div>
</body>
<script src="./京东快递单号查询.js"></script>
</html>

CSS

*{
    margin: 0;
    padding: 0;
}
.search{
    position: relative;
    width: 300px;
    margin: 150px auto;
}
.con{
    display: none;
    position: absolute;
    top: -40px;
    width: 170px;
    border: 1px soild black;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    padding: 5px 0;
    font-size: 19px;
    line-height: 20px;
    color: #333;
}
.con::before{
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: 28px;
    left: 18px;
    border: 8px solid #000;
    border-style: solid dashed dashed;
    border-color: #fff transparent transparent;
}
.jd {
    padding-left: 5px;
    outline: none;
}

JavaScript

var inputs=document.querySelector('input');
var con=document.querySelector('.con');
document.addEventListener('keyup',function(e){
    if(e.keyCode == 83){
        inputs.focus();
    }
})
inputs.addEventListener('keyup',function(){
    if(this.value==''){
        con.style.display='none';
    }
    else{
        con.style.display='block';
        con.innerHTML=this.value;
    }
})
inputs.addEventListener('blur',function(){
    con.style.display='none';
})
inputs.addEventListener('focus',function(){
    if(this.value!=''){
        con.style.display='block';
    }
})

image.png

Screenshot_2022_0823_201025.gif

🍻5、 动态生成表格案例

案例分析：

（1）因为里面的学生数据都是动态的，我们需要 js 动态生成，这里我们模拟数据，自己定义好数据。数据我们采用对象形式存储。

（2）所有的数据都是放到 tbody 里面的行里面。

（3）因为行很多，我们需要循环创建多个行（对应多个人）。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./动态表格.css">
</head>
<body>
    <table class="ta">
        <thead class="theads">
                <tr>
                    <th> 姓名</th>
                    <th> 科目</th>
                    <th> 成绩</th>
                    <th> 操作</th>
                </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</body>
<script src="./动态表格.js"></script>
</html>

CSS

.ta{
    background-color: azure;
    text-align: center;
    border-collapse: separate;
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-spacing: 0;
    width: 500px;
    margin: 150px auto;
    font-size: 20px;
}
.theads{
    background-color: rgb(213, 203, 203);
}
a{
    text-decoration: none;
}
td {
    border: 1px solid black;
    border-top: none;
    border-left: none;
}
th {
    border: 1px solid black;
    border-top: none;
    border-left: none;
}

JavaScript

var datas=[
    {
        name:'小魏',
        subject:'JavaScript',
        score:100
    },
    {
        name:'小张',
        subject:'JavaScript',
        score:99
    },
    {
        name:'小段',
        subject:'JavaScript',
        score:98
    },
    {
        name:'小海',
        subject:'JavaScript',
        score:88
    },
    {
        name:'小伟',
        subject:'JavaScript',
        score:100
    },
    {
        name:'小秦',
        subject:'JavaScript',
        score:99
    },
    {
        name:'小8',
        subject:'JavaScript',
        score:88
    }
]


var tbody=document.querySelector('tbody');
for(var i=0;i<datas.length;i++){
    var tr=document.createElement('tr');
    tbody.appendChild(tr);
    for(var k in datas[i]){
         var td=document.createElement('td');
         td.innerHTML=datas[i][k];
         tr.appendChild(td);
    }
    var td=document.createElement('td');
    td.innerHTML='<a href="JavaScript:;">删除</a>';
    tr.appendChild(td);
    
}

var as=document.querySelectorAll('a');
for(var i=0;i<as.length;i++){
    as[i].onclick=function(){
        tbody.removeChild(this.parentNode.parentNode);
    }
}

image.png

image.png

Screenshot_2022_0823_202004.gif

🍻总结

🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈

今天主要学习了javaScript简单项目案例，这些项目介绍了如何使用JavaScript来控制页面，使页面成为一个动态效果。这些布局在网页中是常见的，学习这些基本布局可以对我们开发网页有很大的帮助。学习淘宝 京东等页面的布局方式以及效果实现，可以让我们选择更合适的方法来实现网页效果。

🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈

avatar
文章
阅读
粉丝