Web APIs实用案例

最新推荐文章于 2024-05-22 10:27:27 发布

VIP文章 WangZhang_521

最新推荐文章于 2024-05-22 10:27:27 发布

阅读量223

点赞数

分类专栏： Web API 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/WangZhang_521/article/details/123551040

版权

01-事件对象

<!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>事件对象</title>
</head>

<body>
    <button>点击</button>
    <script>
        let btn = document.querySelector('button');
        btn.addEventListener('click', function(e) {
    
            console.log(e);
        })
    </script>
</body>

</html>

02-事件对象常见属性

<!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>事件对象常见属性</title>
    <style>
        body {
    
            height: 3000px;
        }
        
        div {
    
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 100px;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        // mousemove 鼠标移动事件
        // click鼠标点击事件
        document.addEventListener('click', function(e) {
    
            //console.log(11);
            // console.log(e);
            // 1.获取光标相对于浏览器可视窗口左上角的位置
            console.log('clientX:' + e.clientX, 'clientY:' + e.clientY);
            // 2.获取光标相对于文档页面左上角的位置
            console.log('pageX:' + e.pageX, 'pageY:' + e.pageY);
            // 3.获取光标相对于当前DOM元素(比如div)左上角的位置
            console.log('offsetX:' + e.offsetX, 'offsetY:' + e.offsetY);


        })
    </script>
</body>

</html>

03-跟随鼠标的天使案例

<!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>跟随鼠标的天使案例</title>
    <style>
        img {
    
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <img src="images/tianshi.gif" alt="">
    <script>
        let img = document.querySelector('img');
        document.addEventListener('mousemove', function(e) {
    
            // 不断得到当前的鼠标坐标
            // console.log(e.pageX, e.pageY);
            // 把坐标给图片
            img.style.left = e.pageX - 48 + 'px'; //不带单位无效
            img.style.top = e.pageY - 40 + 'px';

        })
    </script>
</body>

</html>

效果展示

在这里插入图片描述

04-回车发布微博案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>微博发布</title>
    <style>
        * {
    
            margin: 0;
            padding: 0;
        }
        
        ul {
    
            list-style: none;
        }
        
        .w {
    
            width: 900px;
            margin: 0 auto;
        }
        
        .controls textarea {
    
            width: 878px;
            height: 100px;
            resize: none;
            border-radius: 10px;
            outline: none;
            padding-left: 20px;
            padding-top: 10px;
            font-size: 18px;
        }
        
        .controls {
    
            overflow: hidden;
        }
        
        .controls div {
    
            float: right;
        }
        
        .controls div span {
    
            color: #666;
        }
        
        .controls div .useCount {
    
            color: red;
        }
        
        .controls div button {
    
            width: 100px;
            outline: none;
            border: none;
            background: rgb(0, 132, 255);
            height: 30px;
            cursor: pointer;
            color: #fff;
            font: bold 14px '宋体';
            transition: all 0.5s;
        }
        
        .controls div button:hover {
    
            background: rgb(0, 225, 255);
        }
        
        .controls div button:disabled {
    
            background: rgba(0, 225, 255, 0.5);
        }
        
        .contentList {
    
            margin-top: 50px;
        }
        
        .contentList li {
    
            padding: 20px 0;
            border-bottom: 1px dashed #ccc;
            position: relative;
        }
        
        .contentList li .info {
    
            position: relative;
        }
        
        .contentList li .info span {
    
            position: absolute;
            top: 15px;
            left: 100px;
            font: bold 16px '宋体';
        }
        
        .contentList li .info p {
    
            position: absolute;
            top: 40px;
            left: 100px;
            color: #aaa;
            font-size: 12px;
        }
        
        .contentList img {
    
            width: 80px;
            border-radius: 50%;
        }
        
        .contentList li .content {
    
            padding-left: 100px;
            color: #666;
            word-break: break-all;
        }
        
        .contentList li .the_del {
    
            position: absolute;
            right: 0;
            top: 0;
            font-size: 28px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="w">
        <!-- 操作的界面 -->
        <div class="controls">
            <img src="./images/9.6/tip.png" alt="" /><br />
            <!-- maxlength 可以用来限制表单输入的内容长度 -->
            <textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200"></textarea>
            <div>
                <span class="useCount" id="useCount">0</span>
                <span>/</span>
                <span>200</span>
                <button id="send">发布</button</

最低0.47元/天解锁文章

WangZhang_521

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web APIs实用案例

01-事件对象<!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"> <tit
复制链接

扫一扫