js页面切换效果学习(基础)

浏览数：23 / 时间：2015年06月09日

技术分享

css代码

.div1{
    width: 130px;
    height: 130px;

}
.div2{
    width: 20px;height:160px;
    margin-top: 0px;
    float: left;
}
body{ font-size: 12px;}
.div2 li{
    list-style-type: none;
    margin-top: 3px;
    background-color: wheat;
    height: 40px;
    text-align: center;
    padding-top: 1px;

}
.div2 ul{
    padding: 0px;
    margin-top: -2px;
    margin-left: 0px;
}
.blinks,.qt{
margin-top: 1px;width:110px;
height: 160px ;
/**/

float: left;

}
.blinks ul,.qt ul{padding: 0px;
    margin-top:2px;
    margin-left: 0px;
padding-left: 3px;
}
.blinks li,.qt li{list-style-type: none;
line-height: 15px;
padding-top: 1.1px;}

.qt{
display: none;
}
html+js代码

<html>
<head>
    <title></title>
    页面切换效果学习
    <link href="sh.css" type="text/css" rel="stylesheet"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!--<script  language="JavaScript" src="js1.js" ></script>-->
    <script>
        function change1(obj){

            if(obj==‘zs‘){
                zs.style.display=‘block‘;
                rz.style.display=‘none‘;
            }else if(obj==‘rz‘){
                rz.style.display=‘block‘;
                zs.style.display=‘none‘;
            }
        }
    </script>
</head>
<body>
<div class="div1">
    <div class="div2">
     <ul>
    <li onmousemove="change1(‘zs‘)"><a href="#">视频</a></li>
    <li onmousemove="change1(‘rz‘)"><a href="#">游戏</a></li>
    <li>新闻 </li>
     </ul>
    </div>
<div id=‘zs‘class="blinks" >
    <ul>
    <li><a href="#" >招生招生招生招生</a></li>
    <li><a href="#" >招生招生招生招生</a></li>
        <li><a href="#" >招生招生招生招生</a></li>
        <li><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 id="rz" class="qt" >
    <ul>
    <li><a href="#" >111111111111</a></li>
    <li><a href="#" >111111111111</a></li>
        <li><a href="#" >111111111111</a></li>
        <li><a href="#" >111111111111</a></li>
        <li><a href="#" >111111111111</a></li>
        <li><a href="#" >111111111111</a></li>
        <li><a href="#" >111111111111</a></li>
        <li><a href="#" >111111111111</a></li>
    </ul>
</div>
</div>
</body>
</html>

技术分享

<html>
<head>
    <title></title>
    <h1>简易js购物车.复选框全选和取消</h1></br>
    <!--<link href="css.css" type="text/css" rel="stylesheet"/>-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!--<script  language="JavaScript" src="js1.js" ></script>-->
    <script >
        function gw(obj){
            var  count=0;
            var sg=document.getElementsByName(‘sg‘)
            var sgl=document.getElementsByClassName(‘sgl‘)
            for(var i= 0;i<sg.length;i++){
                if(sg[i].checked){
                    count+=parseFloat(sg[i].value)*parseInt(sgl);
                }
            }
            span1.innerText=(count)+‘元‘;
        }

    </script>
</head>
<body >
<input type="checkbox" name="sg" onclick="gw(this)" value="10">苹果 10块<input type="text"name="sl" id="sl1"></br>
<input type="checkbox" name="sg" onclick="gw(this)" value="20">香蕉 20块</br>
<input type="checkbox" name="sg" onclick="gw(this)" value="30">西瓜 30块</br>
<input type="checkbox" name="sg" onclick="gw(this)" value="25">荔枝 25块</br>
<input type="checkbox" name="sg" onclick="gw(this)" value="40">哈密瓜 40块</br>
总价是:<span id="span1">0元</span>
</body>
</html>

技术分享

<html>
<head>
    <title></title>
    <!--<link href="css.css" type="text/css" rel="stylesheet"/>-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!--<script  language="JavaScript" src="js1.js" ></script>-->
    -<script >
        function select1(obj) {
            var sg = document.getElementsByName(‘sg‘);
            if (obj.innerText == ‘全选‘) {
                for (i = 0; i < sg.length; i++) {
                    sg[i].checked = true
                }
            }else{
                for(i=0;i<sg.length;i++){
                    sg[i].checked=false

                }
            }
        }
    function select2(obj){
         var sg = document.getElementsByName(‘sg‘);
            if (check1.checked) {
                for (i = 0; i < sg.length; i++) {
                    sg[i].checked = true
                }
            }else{
                for(i=0;i<sg.length;i++){
                    sg[i].checked=false

                }
            }
        }
</script>
</head>
<body>
<input type="checkbox" name="sg" onclick="gw(this)" value="10">苹果 10块</br>
<input type="checkbox" name="sg" onclick="gw(this)" value="20">香蕉 20块</br>
<input type="checkbox" name="sg" onclick="gw(this)" value="30">西瓜 30块</br>
<input type="checkbox" name="sg" onclick="gw(this)" value="25">荔枝 25块</br>
<input type="checkbox" name="sg" onclick="gw(this)" value="40">哈密瓜 40块</br>
<a href="#" onclick="select1(this)">全选</a>
<a href="#"onclick="select1(this)">取消</a></br>
<input type="checkbox" name="" id="check1" onclick="select2(this)">是否全选
</body>
</html>