• 转自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的常用场景效果的更多相关文章

  1. Node.js：常用工具util

    概要:本篇博客的主要内容是介绍node.js的常用工具util. 1.util.inherits util.inherits(constructor,superConstructor)是一个实现对象间 ...

  2. git常用命令常用场景

    在使用git之前,一直用的是svn版本管理:与svn最大不同的是,git有两个仓库,一个是本地仓库,一个是服务器上共享的仓库:本地仓库是每个开发者自己独有的,即使commit提交也只是提交到本地仓库: ...

  3. Vue.js之常用指令

    vue常用指令 vue.js官方给自己的定义是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍vue.js的常用指令. 官网:点我 一.v-text.v-html v-text:用于绑定文本 v ...

  4. 01-THREE.JS 第一个场景

    THREE.JS第一个场景 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  5. 【温故知新】——原生js中常用的四种循环方式

    一.引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0   网页输出“欢迎下次光临” 在网页中弹出框输入1   网页输出“查询中……” 在 ...

  6. Node.js：常用工具

    ylbtech-Node.js:常用工具 1.返回顶部 1. Node.js 常用工具 util 是一个Node.js 核心模块,提供常用函数的集合,用于弥补核心JavaScript 的功能 过于精简 ...

  7. 使用WebGL + Three.js制作动画场景

    使用WebGL + Three.js制作动画场景 3D图像,技术,打造产品,还有互联网:这些只是我爱好的一小部分. 现在,感谢WebGL的出现-一个新的JavaScriptAPI,它可以在不依赖任何插 ...

  8. jquery-12 jquery常用动画效果有哪些

    jquery-12 jquery常用动画效果有哪些 一.总结 一句话总结:jquery可以用户animate()自定义动画,也可以slide和fade系列方法来设置动画. 1.动画效果如何设置执行时间 ...

  9. jQuery中常用网页效果应用

    一.常用网页效果应用 1.表单应用 表单由表单标签.表单域和表单按钮组成. 1.1单行文本框应用 例:获取和失去焦点改变样式 首先,在网页中创建一个表单,HTML代码如下 <form actio ...

随机推荐

  1. 网站出现bug，我深夜被叫醒处理，用一个触发器解决了问题

    凌晨两点,我正在睡梦之中,此时电话忽然想起,在漆黑的深夜中显得格外刺耳. 这个时间点电话响了肯定没好事,因为我的手机在夜间模式下,除非被同一个电话号码打三次,否则是静音,因此电话那边的人肯定有急事找我 ...

  2. tp5实现支付宝电脑支付(详解)

    首先吐槽一下支付宝的官方文档,它只是简单介绍一下开发的流程和参数,而对于新人来说如果只看它的官方文档很多时候是看不懂的,我也是边看文档边网上查资料才把它弄懂.下面我详细介绍支付宝的电脑支付是如何实现 ...

  3. SpringBoot+Mybatis 实现动态数据源切换方案

    背景 最近让我做一个大数据的系统,分析了一下,麻烦的地方就是多数据源切换抽取数据.考虑到可以跨服务器跨数据库抽数,再整理数据,就配置了这个动态数据源的解决方案.在此分享给大家. 实现方案 数据库配置文 ...

  4. 挑战10个最难的Java面试题（附答案）【下】【华为云技术分享】

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...

  5. [TimLinux] JavaScript 元素动态显示

    1. css的opacity属性 这个属性用于:设置元素的不透明级别,取值范围:从 0.0 (完全透明)到 1.0(完全不透明),元素所在的文本流还在.这个属性的动态变化可以用来设置元素的淡入淡出效果 ...

  6. Bayer图像处理 raw 数据解析

    Bayer是相机内部的原始图片, 一般后缀名为.raw. 很多软件都可以查看, 比如PS. 我们相机拍照下来存储在存储卡上的.jpeg或其它格式的图片, 都是从.raw格式转化 过来的. .raw格式 ...

  7. DARLING in the FRANXX

    那是一种叫比翼的鸟,这种鸟只有半边翅膀,如果雌鸟和雄鸟不紧靠在一起的话,它们就无法飞上天空,是不完整的生物. 但是,为什么,我总认为这种生活方式是如此美丽,感觉如此美丽. 那是一种叫比翼的鸟,我以前从 ...

  8. 制作Win10系统安装U盘和安装纯净版Win10

    重要提示 (以下为操作或安装前的必读提示) 1.准备8G或8G以上的U盘(32G以内).制作U盘会格式化U盘,此U盘内的数据需要提前备份至其他U盘或移动硬盘. 2.在格式化.删除分区和重新安装操作系统 ...

  9. JavaWeb中的MVC 下

    代码较多,请先略过代码,看懂逻辑在研究代码 引入 回顾上一节中的项目,最终的层次结构: 在MVC上中,我们分析了MVC设计模式具备的优点,以及不足,并在其基础上增了Service层用于处理业务逻辑,但 ...

  10. Linux之find命令操作技巧

    一.前言 工作中,我们常用find命令查找某些文件或者删除一些旧的日志文件,所以学会find命令的操作技巧就极为重要. 二.find常用参数选项 -depth 从指定目录下最深层的子目录开始查找 -m ...