js的常用场景效果

转自https://www.cnblogs.com/tangdiao/p/9481681.html
1.checkbox的使用场景，学习之后就是购物车页面的自动计算的上手示例。

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

代码部分

<!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变色

具体代码

<!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>

js的常用场景效果的更多相关文章

Node.js：常用工具util
概要:本篇博客的主要内容是介绍node.js的常用工具util. 1.util.inherits util.inherits(constructor,superConstructor)是一个实现对象间 ...
git常用命令常用场景
在使用git之前,一直用的是svn版本管理:与svn最大不同的是,git有两个仓库,一个是本地仓库,一个是服务器上共享的仓库:本地仓库是每个开发者自己独有的,即使commit提交也只是提交到本地仓库: ...
Vue.js之常用指令
vue常用指令 vue.js官方给自己的定义是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍vue.js的常用指令. 官网:点我一.v-text.v-html v-text:用于绑定文本 v ...
01-THREE.JS 第一个场景
THREE.JS第一个场景 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
【温故知新】——原生js中常用的四种循环方式
一.引言本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0 网页输出“欢迎下次光临” 在网页中弹出框输入1 网页输出“查询中……” 在 ...
Node.js：常用工具
ylbtech-Node.js:常用工具 1.返回顶部 1. Node.js 常用工具 util 是一个Node.js 核心模块,提供常用函数的集合,用于弥补核心JavaScript 的功能过于精简 ...
使用WebGL + Three.js制作动画场景
使用WebGL + Three.js制作动画场景 3D图像,技术,打造产品,还有互联网:这些只是我爱好的一小部分. 现在,感谢WebGL的出现-一个新的JavaScriptAPI,它可以在不依赖任何插 ...
jquery-12 jquery常用动画效果有哪些
jquery-12 jquery常用动画效果有哪些一.总结一句话总结:jquery可以用户animate()自定义动画,也可以slide和fade系列方法来设置动画. 1.动画效果如何设置执行时间 ...
jQuery中常用网页效果应用
一.常用网页效果应用 1.表单应用表单由表单标签.表单域和表单按钮组成. 1.1单行文本框应用例:获取和失去焦点改变样式首先,在网页中创建一个表单,HTML代码如下 <form actio ...

随机推荐

Java基础IO类之字符串流（查字符串中的单词数量）与管道流
一.字符串流定义:字符串流(StringReader),以一个字符为数据源,来构造一个字符流. 作用:在Web开发中,我们经常要从服务器上获取数据,数据返回的格式通常一个字符串(XML.JSON), ...
深入理解跳跃链表在Redis中的应用
0.前言前面写了一篇关于跳表基本原理和特性的文章,本次继续介绍跳表的概率平衡和工程实现,跳表在Redis.LevelDB.ES中都有应用,本文以Redis为工程蓝本,分析跳表在Redis中的工程实现 ...
Dict.setdefault()
""" setdefault方法参数输入已有键,返回对应值,找不到已有键,创建新键,值为None """ >>> dict ...
ubuntu 下 shell 搜索命令
一.在当前目录及其子目录查找以mesos开头,并以.jar结尾的文件,并打印出来 sudo find ./ -name mesos*.jar -print 二.whereis, locate 也有类似 ...
并查集 2019年8月10日计蒜客联盟周赛 K.数组
题目链接:https://nanti.jisuanke.com/t/40860 题意:给一个长度为n的数组a[],n<1e5,a[i]<1e5 三个操作: 1 x y:把所有值为x的数据改 ...
B.Obtain Two Zeroes
题目:包含两个零题意:你被给予两个数a和b,你可以对这两个数进行操作每次操作你可以选择任意的正整数x,可以进行a = a - x,b = b - 2x或者a = a - 2x,b = b - x两 ...
Java并发：线程限制
最近又学到了很多新知识,感谢优锐课老师细致地讲解,这篇博客记录下自己所学所想,也和大家分享.了解有关Java中的并发问题和线程限制的更多信息. 在此文中,我们将探讨线程限制,它的含义以及如何实现.因此 ...
Beego在views中格式化显示时间（int64转string）
最近在使用beego开发系统的过程中,遇到时间转换问题,需求如下: 通过以下函数获取Unix时间戳,后台数据库格式为int64: time.Now().Unix() 效果图: 从数据库获取数据,直接以 ...
使用Vim编辑器，如何退出
我们输入“冒号”,即":"(不需双引号),在下方会出现冒号,等待输入命令,我输入的是WQ.功能如下. W:write,写入 Q:quit,退出再回车,就保存退出了其实,保存退出 ...
python学习-if
# 判断"""if 条件(True/False): 条件为真时,执行的代码(要干的事情)[elif 条件: 条件为真时,执行的代码(要干的事情)elif 条件: 条件为真 ...

js的常用场景效果

js的常用场景效果的更多相关文章

随机推荐

热门专题