• 转自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. 【CKB.DEV 茶话会】如何在 CKB 上实现用户自定义 Token

    本贴内容主要来自于 CKB.DEV 茶话会第一期,本期主题是:如何在 CKB 上实现 UDT,分享人是:Cipher 王博. 茶话会现场视频: https://v.qq.com/x/page/x303 ...

  2. <算法基础><排序>三种高级排序——快速排序，堆排序，归并排序

    这三种排序算法的性能比较如下: 排序名称 时间复杂度(平均) 时间复杂度(最坏) 辅助空间 稳定性 快速排序 O(nlogn) O(n*n) O(nlogn) 不稳定 堆排序 O(nlogn) O(n ...

  3. 3分钟了解ServiceStage 应用智能化运维【华为云分享】

    [摘要] 微服务云应用平台(ServiceStage)是面向企业及开发者的一站式DevOps平台服务,支持基于微服务的应用开发.治理.部署及运维监控的全生命周期管理,并提供大规模容器集群管理及中间件服 ...

  4. 来看看Python炫酷的颜色输出与进度条打印

    英语单词优化 上篇文章写到了Python开发英语单词记忆工具,其中依赖了bootstrap.css jQuery.js 基础html模块以及片段的css样式.有些朋友问,怎么能将这个练习题打包成单独的 ...

  5. CF1236B Alice and the List of Presents

    题意翻译 有nn种物品和mm个背包,每种物品有无限个,现将若干个物品放到这些背包中,满足: 1.每个背包里不能出现相同种类的物品(允许有空背包): 2.在所有的mm个背包中,每种物品都出现过. 求方案 ...

  6. Swift语法注意

    一直没有太弄明白可选值以及解包.下面说一下几点理解: OC中与Swift的nil 的区别: OC中nil表示指向不存在对象的指针 swift中表示值不存在,任何类型的可选值都可以为nil,包含基本数据 ...

  7. hdu3999 The order of a Tree

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3999 题意:给一序列,按该序列插入二叉树,给出字典序最小的插入方法建相同的一棵树出来.即求二叉树的先序 ...

  8. E - Unimodal Array CodeForces - 831A

    Array of integers is unimodal, if: it is strictly increasing in the beginning; after that it is cons ...

  9. ARTS-S golang panic返回默认值

    package main import "fmt" func fn_test_panic() (a int) { a = 2 panic("This is panic&q ...

  10. Day 07 字符串内置方法和爬虫基础3

    目录 异常处理 LeetCode使用之两数之和(示例) 字符串内置方法 爬虫基础3 selenium基本使用 selenium模拟百度登录 selenium爬取京东商品信息 异常处理 try: pri ...