夜光带你走进前端工程师（三十六 jS ）

最新推荐文章于 2019-10-23 11:41:00 发布

GeniusTeam-夜光

最新推荐文章于 2019-10-23 11:41:00 发布

阅读量165

点赞数

分类专栏： My thoughts 前端工程师 JS核心技术文章标签： js

本文链接：https://blog.csdn.net/weixin_41987706/article/details/90710875

版权

My thoughts 同时被 3 个专栏收录

911 篇文章 25 订阅

订阅专栏

前端工程师

48 篇文章 0 订阅

订阅专栏

JS核心技术

23 篇文章 1 订阅

订阅专栏

夜光序言：

忽然之间你忽略的我忽略的所有细节

当初的猜疑好奇爱恨痴嗔却已走远

忽然之间你发现的我发现的所有改变

当初的微笑眼泪喜怒哀乐都已抛在昨天

我没想过再遇见的时刻

所有回忆青丝成雪

忽然之间

你忽略的我忽略的所有细节

当初的猜疑好奇爱恨痴嗔却已熹微

忽然之间你发现的我发现的所有改变

当初的微笑当初的微笑眼泪喜怒哀乐都已云烟

正文：

tab栏封装

夜光

多个tab栏相互不影响

要想多个盒子不相互影响，我们可以通过id给他们分开

封装tab栏

    <script>
         window.onload = function(){
             function tab(){}
             tab("one");
             tab("two");
             tab("three");
         }
    </script>
</head>
<body>
<div class="box" id="one">
    <div class="mt">
        <span class="current">新闻</span>
        <span>体育</span>
        <span>八卦</span>
        <span>娱乐</span>
    </div>
    <div class="mb">
        <ul>

多个tab栏如何封装？

<script>
     window.onload = function(obj){
         function tab(){
             var target = document.getElementById(obj);
             var spans = target.getElementsByTagName("span");
             var lis = target.getElementsByTagName("li");
             //var spans = document..getElementById(obj).getElementsByTagName("span"); 但是不用这句话
             for(var i=0;i<spans.length;i++){
                 spans[i] = i;
                 spans[i].onmouseover = function()
                 {
                      for(var j=0;j<spans.length;j++)
                      {
                         spans[i].className = "";
                         lis[j].className = "";
                      }
                     this.className = "current";
                     lis[this.index].className = "show";
                 }
             }
         }
         tab("one");
         tab("two");
         tab("three");
     }
</script>

三个循环

夜光

两个小循环

For(初始化；条件；增量)

While（）当

Do{} while{}

While(条件) {语句}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    var sum=0;
    for(var i = 0;i<=100;i++)
    {
        sum=sum+i;
    }
    document.write(sum);

    var j=1;
    var sum1=0;
    while(j<=100)
    {
        sum1+=j;
        j++;
    }
    document.write(sum1);
</script>
</body>
</html>

Do while 至少执行一次

While 不一定

switch使用

夜光

多分支语句：switch

和 if else 十分相似

但是switch 效率更高

Switch(参数)

{

Case参数1：

语句；

Break；退出的意思

Case 参数2；

语句；

Break; 退出的意思

.................

Default; 默认的

语句；

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<script>
    window.onload = function(){
        var king = document.getElementById("king"); //获取元素
        var btn = document.getElementById("btn");
        btn.onclick = function(){
        var val = king.value; //这边如果用this指向事件的调用者btn
        switch(val)
        {
            case"苹果":
                alert("苹果：5元一斤");
                break;
            case"西瓜":
                alert("西瓜：2元一斤");
                break;
            default:
                alert("sorry,今天没货");

        }

      }
    }
</script>
</head>
<body>
<input type="text" id="king"> <button id="btn">查询价格</button>
</body>
</html>

下拉菜单

夜光

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<select name="" id="sale">
    <option value="1">路飞</option>
    <option value="2">索隆</option>
    <option value="3">山治</option>
    <option value="4">甚平</option>
</select>
</body>
</html>

下拉菜单的事件 onchange

Sale.onchange = function(){}

星座运势

夜光

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 350px;
            height: 250px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }
        .dt{
            padding-left: 20px;
            line-height: 30px;
            font-weight: 700;
            color: cornflowerblue;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="dt">星座运势</div>
    <div class="dd">

    </div>
</div>
</body>
</html>

继续优化：

.dd-t{
overflow: hidden;
}

//让字下来嘿嘿

GeniusTeam-夜光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
夜光带你走进前端工程师（三十六 jS ）

夜光序言：忽然之间你忽略的我忽略的所有细节当初的猜疑好奇爱恨痴嗔却已走远忽然之间你发现的我发现的所有改变当初的微笑眼泪喜怒哀乐都已抛在昨天我没想过再遇见的时刻所有回忆青丝成雪忽然之间你忽略的我忽略的所有细节当初的猜疑好奇爱恨痴嗔却已熹微忽然之间你发现的我发现的所有改变当初的微笑当初的微...
复制链接

扫一扫