js项目练习第二课

最新推荐文章于 2023-09-29 18:26:51 发布

weixin_30267697

最新推荐文章于 2023-09-29 18:26:51 发布

阅读量6.6w

点赞数 1

文章标签： 5g ux ui

原文链接：http://www.cnblogs.com/Lesson-J/p/9812924.html

版权

本文介绍了使用JavaScript实现百度输入法的弹出层效果，创建了一个简易的JS年历功能，并展示了如何通过单一按钮来控制播放列表的显示与隐藏。这些实践有助于提升JavaScript操作DOM和交互设计的能力。

摘要由CSDN通过智能技术生成

百度输入法

<style>
        *{
    
            list-style: none;
            text-decoration: none;
            padding: 0;
            margin: 0;
        }
        a:hover{
    
            text-decoration: none;
        }
        ul{
    
            width: 60px;
            border: 1px solid #3A50AD;
            margin-top: 10px;
        }
        li{
    
            width: 60px;
            height: 20px;
            text-align: center;
        }
        li:hover{
    
            background-color: #2aabd2;
        }
        .close{
    
            border-top: 1px solid #3A50AD;
        }
        .u1{
    
            display: none;
        }
    </style>
</head>
<body>
    <button class="b1">输入法</button>
    <span></span>
    <ul class="u1">
        <li><a href="#">手写</a></li>
        <li><a href="#">拼写</a></li>
        <li class="close"><a href="#">关闭</a></li>
    </ul>

<script src="js/jquery-3.2.1.min.js"></script>

    <script>
        var $ulEle = $("ul");
        $(".b1").on("click",function () {
            $ulEle.toggleClass("u1");
        })
        $(".close").on("click",function(){
            $ulEle.addClass("u1");
        })
        $ulEle.children("li:not(.close)").on("click",function () {
            $("span").text($(this).children("a").text());
        })

    </script>

点击div显示其内容

<style>
        .d1{
    
            width: 500px;
            margin: 0 auto;
        }
        p{
    
            width: 400px;
            height: 80px;
            border: 2px solid #eee;
            padding:5px;
            margin: 10px auto;
            font-size: 11px;
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <div class="d1">
        <p><strong>新华网</strong>北京5月29日电(新华社记者)从三聚氰胺到瘦肉精，从染色馒头到毒豆芽，在食品中添加非食用物质和滥用食品添加剂已成为百姓餐桌上突出的"不安全因素"。近期以来，从北京到广东，从浙江到宁夏，一场打击食品非法添加的"风暴"席卷全国。
        </p>
        <p>
            4月21日，国务院部署严厉打击食品非法添加和滥用食品添加剂专项行动后，广东省高度重视，随即召开了全省电视电话会议。省委领导强调，食品安全是"高压线"，决不能"下不为例"；抓好食品安全要突出一个"<strong>严</strong>"字，做到<strong>严防</strong>、<strong>严查</strong>、<strong>严处</strong>。
        </p>
        <p>
            <strong>宁夏重点开展了四轮问题乳粉彻查清缴工作</strong>，对全区养殖源头、鲜奶收购和乳制品生产、经营、餐饮等环节的2.7万家单位进行了全面清查，共查处问题乳粉案件4起、涉案企业3家，吊销2家乳粉生产企业生产许可证。
        </p>
        <p>
            做好风险监测工作是许多地方加强食品安全的重点工作之一。在北京，<strong style="color:red;">全市设立了3000个风险监测点</strong>，建立了包括3000余种食品添加剂和非法添加物的数据库，对110家国内外食品相关组织、媒体发布的线索进行监测，及时进行风险评估，加强抽检控制。
        </p>
    </div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
    <script>
        $("p").on("click",function () {
            var text = $(this).text();
            alert(text);
        })
    </script>

求出数组中所有数字的和

<style>
        *{
   
            margin: 10px;
        }
        input{
   
            width: 260px;
            margin: 15px auto;
        }
        span{
   
            font-size: 12px;
            color: #5e5e5e;
        }
        h3{
   
            color: red;
            }
    </style>
</head>
<body>
    <input type="text"><span>输入数字求和,数字之间用半角","号分隔</span>
    <p>
        <button>求和</button>
    </p>
    <h3></h3>
<script src="../jquery-3.2.1.min.js"></script>

    <script>
        $("button").on("click",function () {
   
            var valEle = $("input").val().replace(/,/g,"");
            var sum = 0;
            for(var i = 0;i < valEle.length; i++){
   
                sum += Number(valEle[i]);
            }
            $("h3").text(sum);
        })

    </script>

弹出层效果

    <style>
        .d1{
    
            width: 300px;
            height: 100px;
            position: absolute;
            top: 50%;
            left: 50%;
            border: 4px solid orange;
            margin: -50px 0 0 -150px;
            background-color: #fff;
            z-index: 1000;
        }
        .d2{
    
            border-bottom: 2px solid orange;
            background-color: yellow;
            overflow: hidden;
            height: 20px;
        }
        .b2{
    
            border: 1px solid orange;
            color: orange;
            float: right;
            margin: 4px 3px;
            font-size: 9px;
            background-color: #fff;
            height: 12px;
            width: 12px;
            padding: 0;
        }
        .d3{
    
            position:absolute;
            width: 100%;
            height: 100%;
            background-color: rgba(128,128,128,0.3) ;
            top: 0;
            left: 0;
            z-index: 999;
        }
        .hide{
    
            display:none;
        }

    </style>
</head>
<body>
<button class="b1">弹出层</button>
<div class="d3 hide">

    <div class="d1">
        <div class="d2">
            <button class="b2">×</button>
        </div>
    </div>
</div>

<script src="js/jquery-3.2.1.min.js"></script>
<script>
    var $divEle = $('.d3');
    $(".b1").on("click",function () {
        $divEle.removeClass("hide");
    });
    $(".b2").on("click",function () {
        $divEle.addClass("hide");
    })
</script>

函数传参,改变div任意属性的值

<style>
        .d1{
    
            width: 380px;
            height: 100px;
            margin: 0 auto;
        }
        li{
    
            margin: 10px ;
            list-style: none;
        }
        .d2{
    
            width: 200px;
            height: 200px;
            background-color: #0f0f0f;
            color: #fff;
            font-size: 12px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="d1">
    <ul>
        <li>
            <lable>属性名:
                <input name="divSty" type="text" id="divSty">
            </lable>
        </li>
        <li>
            <lable>属性值:
                <input name="val" type="text" id="val">
            </lable>
        </li>
        <li>
            <button class="b1">确定</button>
            <button class="b2">重置</button>
        </li>
    </ul>
</div>

<div class="d2">在上方输入框驶入"属性名"及"属性值",点击确定按钮查看效果</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script>

    $(".b1").on("click",function () {
        var divSty = $("#divSty").val();
        var val = $("#val").val();
        $(".d2").css(divSty,val);
    })
    $(".b2").on("click",function () {
        $(".d2").attr("style","");
    })
</script>

简易选项卡

<style>
        *{
    margin: 0;padding: 0}
        .hide{
    
            display: none;
        }
        .outer{
    
            width: 500px;
            margin: 10px auto;
            border: 1px solid #000000;
            height: 500px;
        }
        .title{
    
            background-color: #000000;
            overflow: hidden;
            height: 30px;
        }
        .title>ul>li{
    
            float: left;
            list-style: none;
            width: 80px;
            color:#fff;
            line-height: 30px;
            padding: 0 10px;
        }
        .text li{
    
            margin: 10px 25px;
        }
    </style>
</head>
<