• 转自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. .Net Core+Vue.js模块化前后端分离快速开发框架NetModular更新日志(2019-12-08)

    源码 GitHub:https://github.com/iamoldli/NetModular 码云:https://gitee.com/laoli/NetModular 欢迎star~ 文档 ht ...

  2. 上手spring boot项目(三)之spring boot整合mybatis进行增删改查的三种方式。

    1.引入依赖. <!--springboot的web起步依赖--><dependency> <groupId>org.springframework.boot< ...

  3. apache thrift 和 apache jersey 记录

    几篇好的入门文档链接: 1. Hello World by Thrift Using Java 2. Thrift 实例 Helloworld 3. Thrift版的Hello World 4. Th ...

  4. luogu P5514 [MtOI2019]永夜的报应

    题目背景 在这世上有一乡一林一竹亭,也有一主一仆一仇敌. 有人曾经想拍下他们的身影,却被可爱的兔子迷惑了心神. 那些迷途中的人啊,终究会消失在不灭的永夜中-- 题目描述 蓬莱山 辉夜(Kaguya)手 ...

  5. Mybatis底层源码分析

    MyBatis 流程图 Configuration.xml 该配置文件是 MyBatis 的全局配置文件,在这个文件中可以配置诸多项目.常用的内容是别名设置,拦截器设置等. Properties(属性 ...

  6. IO 单个文件的多线程拷贝

    package FileCopyThread; //自建的包,根据个人调整 import java.io.File; import java.io.FileNotFoundException; imp ...

  7. HDU1847 Good Luck In CET4 Everybody

    大学英语四级考试就要来临了,你是不是在紧张的复习?也许紧张得连短学期的ACM都没工夫练习了,反正我知道的Kiki和Cici都是如此.当然,作为在考场浸润了十几载的当代大学生,Kiki和Cici更懂得考 ...

  8. POJ 1325 Machine schedine (二分图-最小点覆盖数=最大匹配边数)

    As we all know, machine scheduling is a very classical problem in computer science and has been stud ...

  9. 摄像头CMOS和CCD的比较

    转载自网络,在此做一下总结,仅供参考: 1.CCD每曝光一次,在快门关闭后进行像素转移处理,将每一行中每一个像素(pixel)的电荷信号依序传入“缓冲器”中,由底端的线路引导输出至 CCD 旁的放大器 ...

  10. Typora常见的快捷方式

    操作类型 操作 快捷键 文件操作 新建 Ctrl + N    新建窗口 Ctrl + Shift + N    打开 Ctrl + O    快速打开 Ctrl + P    保存 Ctrl + S ...