首页 > 代码库 > JS(七)

JS(七)

2024-08-27 01:16:52   218人阅读

JS又上完了,还是感觉JS技巧性很强,需要多积累经验...看了一下PHP的内容,感觉搭建环境好麻烦,结果回来下了个wamp感觉好像就可以了.....

1.红绿蓝颜色条:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页背景颜色控制2</title>
    <script type="text/javascript">
    window.onload = function(){
        //找对象
        var inputsObj = document.getElementsByTagName("input");
        //加时间
        for(var i=0;i<inputsObj.length;i++){
            inputsObj[i].onchange = function(){
                //找对象
                var red = document.getElementById("red").value;
                var green = document.getElementById("green").value;
                var blue = document.getElementById("blue").value;
                //输出颜色
                document.body.style.backgroundColor="rgb("+red+","+green+","+blue+")";
                //找到span标记并写入内容
                var spanObj = document.getElementsByTagName("span");
                for(var j=0;j<spanObj.length;j++){
                    spanObj[j].innerHTML = inputsObj[j].value;
                }
            }
        }
    }
    </script>
</head>
<body>
红：<input type="range" min="0" max="255" id="red" value="255"><span id="res_red">255</span><br>
绿：<input type="range" min="0" max="255" id="green" value="255"><span id="res_green">255</span><br>
蓝：<input type="range" min="0" max="255" id="blue" value="255"><span id="res_blue">255</span><br>    
</body>
</html>

2.选项卡切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡切换</title>
    <style type="text/css">
        body,ul,li{margin: 0px;padding: 0px;}
        ul li{list-style: none;}
        .box{
            width:298px;
            height: 98px;
            margin: 10px;
            border: 1px solid #eee;
            overflow: hidden;
        }
        .title{
            height: 27px;
            position: relative;
        }
        .title ul{
            position:absolute;
            width: 301px;
            left:-1px;
        }
        .title ul li{
            height: 26px;
            line-height: 26px;
            float: left;
            width: 58px;
            text-align: center;
            overflow: hidden;
            background: #fff;
            border-bottom: 1px solid #eee;
            padding:0px 1px;
            background: #f7f7f7;
        }
        .title ul li.select{
            background: #fff;
            border-bottom-color: #fff;
            border-left: 1px solid #eee;
            border-right: 1px solid #eee;
            padding:0px;
            font-weight: bold;
        }
        .content .cont{margin: 10px 10px 10px 20px;}
        .content .cont ul li{
            float: left;
            width: 133px;
            height: 25px;
            line-height: 25px;
            overflow: hidden;
        }
        a:link,a:visited{text-decoration: none;color: #000;}
        a:hover{color:#f90;}
    </style>
    <script type="text/javascript">
    window.onload = function(){
        var div_titleObj = document.getElementById("title");
        var lisObj = div_titleObj.getElementsByTagName("li");
        var div_contentObj = document.getElementById("content");
        var divsObj = div_contentObj.getElementsByTagName("div");
        for(var i=0; i<lisObj.length; i++){
            lisObj[i].id = i;
            lisObj[i].onclick = function(){
                for(var j=0; j<divsObj.length; j++){
                    divsObj[j].style.display = "none";
                    lisObj[j].className = "";
                }
                divsObj[this.id].style.display = "block";
                lisObj[this.id].className = "select";
            }
        }

    }
    </script>
</head>
<body>
    <div class="box" id="box">
        <div class="title" id="title">
            <ul>
                <li class="select"><a href="#">公告</a></li>
                <li><a href="#">规则</a></li>
                <li><a href="#">论坛</a></li>
                <li><a href="#">安全</a></li>
                <li ><a href="#">公益</a></li>
            </ul>
        </div>
        <div class="content" id="content">
            <div class="cont"  style="display: block;">
                <ul>
                    <li><a href="#">阿里云总裁胡晓明</a></li>
                    <li><a href="#">云计算将成为新经济爆发点</a></li>
                    <li><a href="#">天猫超市发放10亿红包</a></li>
                    <li><a href="#">高圆圆跑步公开课上线</a></li>
                </ul>
            </div>
            <div class="cont" style="display: none;">
                <ul>
                    <li><a href="#">2016春节发货调整公告</a></li>
                    <li><a href="#">广告法禁用语大全</a></li>
                    <li><a href="#">邮费争议问题汇总</a></li>
                    <li><a href="#">炒信规则调整意见反馈</a></li>
                </ul>
            </div>
            <div class="cont" style="display: none;">
                <ul>
                    <li><a href="#">趣解2016电商四大趋势</a></li>
                    <li><a href="#">全职妈妈两年两皇冠</a></li>
                    <li><a href="#">创业社区招募管理员</a></li>
                    <li><a href="#">滥发信息体检工具上线</a></li>
                </ul>
            </div>
            <div class="cont" style="display: none;">
                <ul>
                    <li><a href="#">拉你进Q群微信刷单？</a></li>
                    <li><a href="#">推荐店铺安全管理利器</a></li>
                    <li><a href="#">谨防炒信”黑吃黑“</a></li>
                    <li><a href="#">警方铲除炒信诈骗团伙</a></li>
                </ul>
            </div>
            <div class="cont" style="display: none;">
                <ul>
                    <li><a href="#">公益宝贝获中华慈善奖</a></li>
                    <li><a href="#">公益发展指数阿里五星</a></li>
                    <li><a href="#">公益宝贝卖家发票索取</a></li>
                    <li><a href="#">公益机构淘宝开店攻略</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

 

JS(七)


联系
我们