欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js的常用场景效果

程序员文章站 2022-04-15 14:44:03
表格的隔行变色样式,checkbox的全选+反选功能实现商品购物车页面的结算功能。 ......
  • 转自https://www.cnblogs.com/tangdiao/p/9481681.html
  • 1.checkbox的使用场景,学习之后就是购物车页面的自动计算的上手示例。

做成给checkbox注册click事件就是模仿购物车页面的自动结算功能。

js的常用场景效果

代码部分

<!doctype html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>全选反选问题</title>
    <script>
        function checkall(obj){
            //让所有item的状态和全选保持一致
            var items = document.getelementsbyname("item");
            for(var i=0; i<items.length; i++){
                items[i].checked = obj.checked;
            }
        }

        window.onload = function(){    //当页面加载完成后获取所有的item
            //获取所有的item, 给每一个item添加点击事件: 判断所有的item是否被选中, 如果是, 全选应该被选中, 如果不是, 全选应该取消!
            var items = document.getelementsbyname("item");
            for(var i=0; i<items.length; i++){
                items[i].onclick = function(){
                    var flag = true;
                    for(var j=0; j<items.length; j++){
                        if(!items[j].checked){
                            flag = false;
                            break;
                        }
                    }
                    document.getelementbyid("all1").checked = flag;

                    /*if(flag){
                     document.getelementbyid("all1").checked = true;
                     }else{
                     document.getelementbyid("all1").checked = false;
                     }*/
                }
            }

        }


        function check(){
            //获取所有的item, 将每一个item的状态取反.
            var items = document.getelementsbyname("item");
            for(var i=0; i<items.length; i++){
                items[i].checked = !items[i].checked;
            }

            //==============================
            //判断所有的item是否被选中, 如果是, 全选应该被选中, 如果不是, 全选应该取消!
            var flag = true;
            for(var j=0; j<items.length; j++){
                if(!items[j].checked){
                    flag = false;
                    break;
                }
            }
            document.getelementbyid("all1").checked = flag;
        }

        function getsum(){
            //获取所有的item, 循环遍历, 依次判断每一个item是否被选中, 如果是累加value
            var items = document.getelementsbyname("item");
            var sum = 0;
            for(var i=0; i<items.length;i++){
                if(items[i].checked){
                    sum +=     parsefloat(items[i].value);
                }
            }
            document.getelementbyid("sumid").innerhtml = "总金额为: "+sum;
        }





    </script>
</head>

<body>
<div>商品列表</div>
<input type="checkbox" name="item" value="3000" />笔记本3000元<br />
<input type="checkbox" name="item" value="2500"/>htc手机2500<br />
<input type="checkbox" name="item" value="8000" />苹果电脑8000<br />
<input type="checkbox" name="item" value="1500" />ipad1500<br />
<input type="checkbox" name="item" value="400" />玩具汽车400<br />

<input type="checkbox" id="all1" name="all" onclick="checkall(this)"/>全选<br />
<input type="checkbox" id="all2" name="all" onclick="check()"/>反选<br />

<input type="button" value="总金额" onclick="getsum()" /><span id="sumid"></span>
</body>
</html>
  • 2.表格隔行变色+hover变色

js的常用场景效果

具体代码

<!doctype html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>表格的操作</title>
    <style type="text/css">
        table {
            border:#0099ff 1px solid;
            width:500px;
            border-collapse:collapse;
        }
        table th, table td {
            border:#0099ff 1px solid;
            padding:10px 0px 10px 10px;
        }
        table th {
            background-color:#00ccff;
        }

        .one {
            background-color:#ccff66;
        }
        .two {
            background-color:#897af1;
        }
        .over {
            background-color:#ff0000;
        }
        div{
            text-align: center;
            padding:20px;
            color:red;
        }
    </style>

    <script type="text/javascript">
        window.onload = function(){
            alert("效果1: 隔行变色");
            //获取所有的tr
            var atr = document.getelementsbytagname("tr");
            //循环遍历
            for(var i=1; i<atr.length; i++){
                if(i%2 == 0){//奇(偶)数行,设置为one
                    atr[i].classname = "one";
                }else{//偶(奇)数行,设置为one
                    atr[i].classname = "two";
                }
                //------------------------------
                var classnametemp;
                //光标移入元素时
                atr[i].onmouseover = function(){
                    classnametemp = this.classname;//记住改变之前的class
                    this.classname = "over";
                }
                //光标移出元素时
                atr[i].onmouseout = function(){
                    this.classname = classnametemp;
                }
            }
        }
    </script>
</head>
<body>
<table align="center">
    <tr>
        <th>电影名称</th>
        <th>电影介绍</th>
        <th>主演名单</th>
    </tr>
    <tr>
        <td>变形金刚</td>
        <td>很不错的电影</td>
        <td>机器人</td>
    </tr>
    <tr>
        <td>唐伯虎点秋香</td>
        <td>非常好的电影</td>
        <td>周星驰,巩俐</td>
    </tr>
    <tr>
        <td>东邪西毒</td>
        <td>群星云集的电影</td>
        <td>张国荣,梁朝伟...</td>
    </tr>
    <tr>
        <td>少林足球</td>
        <td>最厉害的足球电影</td>
        <td>周星驰,赵薇</td>
    </tr>
    <tr>
        <td>赌神</td>
        <td>小马哥演绎赌神</td>
        <td>周润发</td>
    </tr>
    <tr>
        <td>大话西游</td>
        <td>超级搞笑的电影</td>
        <td>周星驰</td>
    </tr>
    <tr>
        <td>疯狂的石头</td>
        <td>一部让人大笑不止的电影</td>
        <td>黄渤</td>
    </tr>
</table>
<div>(效果2: 试试将鼠标移入到表格行内...)</div>
</body>
</html>