ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

webapi01 -练习

2021-01-19 21:59:02  阅读:134  来源: 互联网

标签:function style 练习 tab var input document webapi01


webapi01
有错望指正!!!

微博下拉菜单

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            list-style: none;
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        
        .nav {
            width: 80px;
        }
        
        .tab {
            padding: 10px 0 10px;
            text-align: center;
        }
        
        .selector {
            display: none;
        }
        
        .selector ul {
            border: 1px solid orange;
            border-top: none;
            border-bottom: none;
        }
        
        .selector li {
            padding: 5px 20px;
            border-bottom: 1px solid orange;
        }
        
        .arrow {
            display: inline-block;
            width: 8px;
            height: 5px;
            margin: 0 0 0 5px;
            vertical-align: middle;
            background: url(icon.png) 0 -977px no-repeat;
        }
    </style>
</head>

<body>
    <div class="nav">
        <div class="tab">
            <i>微博</i>
            <em class="arrow"> </em>
        </div>
        <div class="selector">
            <ul>
                <li>评论</li>
                <li>私信</li>
                <li>@我</li>
            </ul>
        </div>
    </div>
    <script>
        // 获取事件源
        var nav = document.querySelector('.nav');
        console.dir(nav);
        var tab = document.querySelector('.tab');
        var sel = document.querySelector('.selector');
        var lis = document.querySelectorAll('li');
        console.log(lis);
        // 绑定事件 事件程序
        nav.onmouseover = function() {
            tab.style.backgroundColor = '#ccc';
            sel.style.display = 'block';
        }
        nav.onmouseout = function() {
            tab.style.backgroundColor = '';
            sel.style.display = 'none';
        }
        tab.onmouseover = function() {
            this.style.color = '#ff8400';
        }
        tab.onmouseout = function() {
            this.style.color = '#4c4c4c';
        }
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function() {
                this.style.color = '#ff8400';
                this.style.backgroundColor = '#fff5da';
            }
            lis[i].onmouseout = function() {
                this.style.color = '#4c4c4c';
                this.style.backgroundColor = '';
            }
        }
    </script>
</body>

</html>

结果图
在这里插入图片描述

用户名显示隐藏内容


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input {
            width: 200px;
            height: 30px;
            border: 1px solid #cccccc;
            outline: none;
        }
    </style>
</head>

<body>
    <input type="text" value="邮箱/ID/手机号">
    <script>
        // 获取事件源
        var input = document.querySelector('input');
        // 绑定事件 事件程序
        //onfocus 得到焦点  onblur 失去焦点
        input.onfocus = function() {
            input.value = '';
            input.style.borderColor = 'pink';
        }
        input.onblur = function() {
            input.value = '邮箱/ID/手机号';
            input.style.borderColor = '#ccc';
        }
    </script>
</body>

</html>

结果图
在这里插入图片描述

开关灯


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #fff;
        }
    </style>
</head>

<body>
    <button>开关灯</button>
    <script>
        var btn = document.querySelector('button');
        var flag = 0; //默认关着
        btn.onclick = function() {
            if (flag == 0) {

                document.body.style.backgroundColor = 'black';
                flag = 1;
            } else {
                document.body.style.backgroundColor = '#fff';
                flag = 0;
            }
        }
    </script>
</body>

</html>

结果图
在这里插入图片描述

标签:function,style,练习,tab,var,input,document,webapi01
来源: https://blog.csdn.net/m0_45270741/article/details/112759819

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有