JS——练手案例

最新推荐文章于 2024-05-13 11:40:35 发布

我在东软打代码

最新推荐文章于 2024-05-13 11:40:35 发布

阅读量259

点赞数

分类专栏： JS 文章标签： js

本文链接：https://blog.csdn.net/weixin_46758732/article/details/119344455

版权

JS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

JS练手案例

keyCode判断用户按下哪个键
模拟京东按键输入内容
模拟京东快递单查询
发送短信案例

keyCode判断用户按下哪个键

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>keyCode 判断用户按下哪个键</title>
</head>
<body>
    <script>
        //键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
        // console.log(e.keyCode);
        /*
        *1、我们的keyup 和 keydown 事件不区别字母大小写 a 和 A 得到的都是65
        * 2、我们的keypress 事件区分字母大小写 a 和 A 得到的都是65
        * */
        document.addEventListener('keyup',function (e) {
            console.log(e.keyCode);
            //我们可以利用keyCode返回的ASCII码值来判断用户按下了哪个键
            if(e.keyCode === 65){
                alert('您按下的a键');
            }else {
                alert('您没有按下a键');
            }
        })
        document.addEventListener('keypress',function(e){
            console.log('press:' + e.keyCode);
        })
    </script>
</body>
</html>

在这里插入图片描述

模拟京东按键输入内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟京东按键输入内容</title>
</head>
<body>
    <input type="text">
    <script>
        /*
        * 核心思路：检测用户是否按下了s键，如果按下了s键，就
        * 把光标定位到搜索框里面
        * 使用键盘事件对象里面的keyCode判断用户按下的是否搜索s键
        * 搜索框获得焦点：使用js里面的focus（）方法
        * */
        var search = document.querySelector('input');
        document.addEventListener('keyup',function(e){
            if(e.keyCode === 83){
                search.focus();
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

模拟京东快递单查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟京东快递单查询</title>
    <style>
        .search {
            position: relative;
            width: 178px;
            margin: 100px;
        }
        .con {
            display: none;
            position: absolute;
            top:-40px;
            width: 171px;
            border: 1px solid rgba(0, 0, 0, .2);
            box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
            padding: 5px 0;
            font-size: 18px;
            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;
        }
    </style>
</head>
<body>
     <div class="search">
         <div class="con">123</div>
         <input type="text" placeholder="请输入您的快递单号" class="jd">
     </div>
     <script>
         //快递单号输入内容时，上面的大号字体盒子（con）显示（这里面的字号更大）
         //表单检测用户输入：给表单添加键盘事件
         //同时把快递单号里面的值（value)获取过来赋值给con盒子（innerText）作为内容
         //如果快递单号里面的内容为空，则隐藏大号字体盒子（con）盒子
         var con = document.querySelector('.con');
         var jd_input = document.querySelector('.jd');
         jd_input.addEventListener('keyup',function(){
             if(this.value == ''){
                 con.style.display = 'none';
             }else {
                 con.style.display = 'block';
                 con.innerText = this.value;
             }

         })
         //当我们失去焦点，就隐藏这个con盒子
         jd_input.addEventListener('blur',function () {
             con.style.display = 'none';
         })
         //当我们获得焦点，就显示这个con盒子
         jd_input.addEventListener('focus',function (evt) {
             if(this.value !== ''){
                 con.style.display = 'block';
             }
         })
     </script>
</body>
</html>

在这里插入图片描述

发送短信案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发送短信案例</title>
</head>
<body>
    手机号码：<input type="number"><button>发送</button>
    <script>
        /*
        * 按钮点击之后，会禁用disable 为true
        * 同时按钮里面的内容会变化，注意button里面的内容通过innerHTML修改
        * 里面秒数时有变化的，因此需要用到定时器
        * 定义一个变量，在定时器里面，不断递减
        * 如果变量为0说明到了时间，我们需要停止定时，并且复原按钮初始状态
        * */
        var btn = document.querySelector('button');
        var time = 30;//定义剩下的秒数
        btn.addEventListener('click',function () {
            btn.disabled = true;
            var timer = setInterval(function () {
               if(time == 0){
                   //清除定时器和复原按钮
                   clearInterval(timer);
                   btn.disabled = false;
                   btn.innerHTML = '发送';
                   tiem = 3;//这个3需要重新开始
               }else {
                   btn.innerHTML = '还剩下' + time + '秒';
                   time--;
               }

            },1000);
        })
    </script>
</body>
</html>

在这里插入图片描述

我在东软打代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS——练手案例

JS练手案例keyCode判断用户按下哪个键模拟京东按键输入内容模拟京东快递单查询发送短信案例keyCode判断用户按下哪个键<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>keyCode 判断用户按下哪个键</title></head><body> <script>
复制链接

扫一扫