<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0px auto;
                padding: 0px;
            }
            .box{
                width: 1000px;
                height: 100px;
                border: 1px solid red;
                line-height: 100px;
                text-align: center;
            }
            .box1{
                width: 500px;
                height: 200px;
                border: 1px solid red;
                background-color: cadetblue;
                line-height: 100px;
                text-align: center;
            }
            .box2{
                width: 100px;
                height: 50px;
                border: 1px solid red;
                border-radius: 5px;
                background-color: burlywood;
                float: left;
                margin-top: 25px;
                margin-left: 25px;
                transition: 1s;
            }
            .box3{
                width: 50px;
                height: 50px;
                border: 1px solid red;
                background-color: cadetblue;
                float: left;
                border-radius: 10px;
                margin-top: 25px;
                margin-left: 25px;
                transition: 1s;
            }
            /*.box4{
                width: 50px;
                height: 50px;
                border: 1px solid red;
                background-color: burlywood;
                float: left;
                border-radius: 25px;
                margin-top: 25px;
                margin-left: 25px;
            }*/
        </style>
    </head>
    <body>
        <div class="box">
            <button onclick="dianji('blue')">背景变蓝</button>
            <button onclick="dianji('green')">背景变绿</button>
            <button onclick="dianji('yellow')">背景变黄</button>
            <button onclick="dianji('')">恢复原样</button>
        </div>
        <div class="box">
            <button onclick="dianjia('width','500px')">背景变窄</button>
            <button onclick="dianjia('background-color','green')">背景变绿</button>
            <button onclick="dianjia('height','200px')">背景变宽</button>
            <button onclick="dianjia()">恢复原样</button>
        </div>
        <div class="box">
            <input type="" name="" id="" value="这是原来的文字" />
            <button onclick="dianjib('value','这是改变后的文字')">改变文字</button>
            <button onclick="dianjib('title','这是title')">添加title属性</button>
        </div>
        <div class="box">
            <button onclick="dianjic('box1')">变色、变高、变窄</button>
            <button onclick="dianjic('box')">恢复原样</button>
        </div>
        <div class="box">
            <button onclick="dianjid()">循环出现提示框五次</button>
        </div>
        <div class="box">
            <button onclick="dianjie('background-color','cadetblue')">批量修改样式</button>
            <div class="box2" name ="1" ></div>
            <div class="box2" name ="1" ></div>
            <div class="box2" name ="1" ></div>
            <div class="box2" name ="1" ></div>
            <div class="box2" name ="1" ></div>
        </div>
        <div class="box">
            <button onclick="dianjif('burlywood','100px')">批量修改样式</button>
            <div class="box3" name ="1" ></div>
            <div class="box3" name ="1" ></div>
            <div class="box3" name ="1" ></div>
            <div class="box3" name ="1" ></div>
            <div class="box3" name ="1" ></div>
        </div>
        <div class="box">
            <input type="checkbox" name="" id="" value="" class="check"/>
            <input type="checkbox" name="" id="" value="" class="check"/>
            <input type="checkbox" name="" id="" value="" class="check"/>
            <input type="checkbox" name="" id="" value="" class="check"/>
            <input type="checkbox" name="" id="" value="" class="check"/>
            <input type="checkbox" name="" id="" value="" class="check"/>
            <button onclick="dianjig('quanxuan')">全选</button>
            <button onclick="dianjig('fanxuan')">反选</button>
            <button onclick="dianjig('buxuan')">全都不选</button>
        </div>
    </body>
</html>
<script type="text/javascript">
    function dianji(color){
        var sj1 = document.getElementsByTagName("div")[0];
        sj1.style.backgroundColor = color;
    }

    function dianjia(x,y){
        var sj2 = document.getElementsByTagName("div")[1];
        sj2.style[x] = y;
    }
    function dianjib(name,room){
        var sj3 = document.getElementsByTagName("input")[0];
        sj3.setAttribute(name,room);
    }
    function dianjic(name){
        var sj4 = document.getElementsByTagName("div")[3];
        sj4.setAttribute("class",name);
    }
    function dianjid(){
        for (var i = 1;i <= 5;i++) {
            alert("这是第"+ i +"次弹出");
        }
    }
    function dianjie(x,y){
        for(var i = 0;i < document.getElementsByClassName("box2").length + i;i++){
            var box = document.getElementsByClassName("box2");
            box[0].setAttribute("class","box3");
        }
    }
//    每次循环把box2的第0项改变为box3,下次循环时,上次循环中的box2第1项变为这次循环中box2的第0项,同时长度lenggth减1
    function dianjif(x,y){
        var moren = document.getElementsByName("1")[0].getAttribute("class");
        if( moren == "box3"){
            for(var i = 0;i < document.getElementsByClassName("box3").length + i;i++){
            var boxa = document.getElementsByClassName("box3");
            boxa[0].setAttribute("class","box2");
            }
        }else {
            for(var i = 0;i < document.getElementsByClassName("box2").length + i;i++){
            var box = document.getElementsByClassName("box2");
            box[0].setAttribute("class","box3");
            }
        }
//        var sj5 = document.getElementsByClassName("box3");
//        if (sj5[0].getAttribute("name") == "1") {
//            for (var i = 0;i < sj5.length;i++) {
//            sj5[i].style.backgroundColor = x;
//            sj5[i].style.width = y;
//            sj5[i].setAttribute("name","2");
//        }
//        } else{
//            for (var i = 0;i < sj5.length;i++) {
//            sj5[i].style.backgroundColor = "cadetblue";
//            sj5[i].style.width = "50px";
//            sj5[i].setAttribute("name","1");
//            }
//        }
    }
    function dianjig(xuanbuxuan){
        var zhuangtai = document.getElementsByClassName("check");
        if (xuanbuxuan == "quanxuan") {
                for(var i = 0;i < zhuangtai.length;i++){
                zhuangtai[i].checked = true;
            }
        } else if(xuanbuxuan == "buxuan"){
                for(var i = 0;i < zhuangtai.length;i++){
                zhuangtai[i].checked = false;
                }
        } else{
                for(var i = 0;i < zhuangtai.length;i++){
                    var djzt = zhuangtai[i].getAttribute("checked");
                    if (zhuangtai[i].checked == true) {
                        zhuangtai[i].checked = false;
                    } else{
                        zhuangtai[i].checked = true;
                    }
                }
        }
    }
</script>

0516js综合练习的更多相关文章

  1. AEAI DP V3.6.0 升级说明,开源综合应用开发平台

    AEAI DP综合应用开发平台是一款扩展开发工具,专门用于开发MIS类的Java Web应用,本次发版的AEAI DP_v3.6.0版本为AEAI DP _v3.5.0版本的升级版本,该产品现已开源并 ...

  2. H5+JS+CSS3 综合应用

    慕课网新教程H5+JS+CSS3 实现的七夕言情主题效果已经出炉了 从设计到实现到录制与编写用了快1个月的时间,说真的这个案例是慕课定制的,我之前也没有系统的做过这样的一个效果,在实现的时候自己也重新 ...

  3. [教程] [授权翻译] 使用补丁修改DSDT/SSDT [DSDT/SSDT综合教程]

    [教程] [授权翻译] 使用补丁修改DSDT/SSDT [DSDT/SSDT综合教程] http://bbs.pcbeta.com/viewthread-1571455-1-1.html [教程] [ ...

  4. iOS--知识综合应用成就时髦小功能点

    iOS--知识综合应用成就时髦小功能点

  5. Oracle 数据库基础学习 (七) SQL语句综合练习

    一.多表查询综合练习 1.  列出高于在30部门工作的所有人员的薪金的员工的姓名.部门名称.部门编号.部门人数 分析: 需要的员工信息: |-emp表:姓名.部门编号 |-dept表:部门名称.部门编 ...

  6. C#综合揭秘——通过修改注册表建立Windows自定义协议

    引言 本文主要介绍注册表的概念与其相关根项的功能,以及浏览器如何通过连接调用自定义协议并与客户端进行数据通信.文中讲及如何通过C#程序.手动修改.安装项目等不同方式对注册表进行修改.其中通过安装项目对 ...

  7. HTML5快速入门(三)—— 标签综合运用

    前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...

  8. Mybatis(综合案例)

    MyBatis本是apache的一个开源项目iBatis,2010年这个项目有Apache software foundation 迁移到了Google code,并改名MyBatis.2013年11 ...

  9. html5,表单的综合案例

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

随机推荐

  1. 用U盘安装Ubuntu15.04

    用UltraISO刻录Ubuntu15.04到U盘安装,出现:Failed to load idlinux.c32错误,解决办法如下: source url: http://www.ubuntukyl ...

  2. OpenCV轮廓检测,计算物体旋转角度

    效果还是有点问题的,希望大家共同探讨一下 // FindRotation-angle.cpp : 定义控制台应用程序的入口点. // // findContours.cpp : 定义控制台应用程序的入 ...

  3. Android实训案例(七)——四大组件之一Service初步了解,实现通话录音功能,抽调接口

    Service Service的神奇之处,在于他不需要界面,一切的操作都在后台操作,所以很多全局性(手机助手,语音助手)之类的应用很长需要这个,我们今天也来玩玩 我们新建一个工程--ServiceDe ...

  4. TCP/IP概述

    1) 链路层,有时也称作数据链路层或网络接口层,通常包括操作系统中的设备驱动程序和计算机中对应的网络接口卡.它们一起处理与电缆(或其他任何传输媒介)的物理接口细节. 2) 网络层,有时也称作互联网层, ...

  5. HOW to Use QP_PREQ_PUB.PRICE_REQUEST API to Price an Item

    In this Document Goal   Solution   References APPLIES TO: Oracle Advanced Pricing - Version 11.5.10 ...

  6. RubyGem默认源安装太慢,修改国内淘宝源

    原帖地址:http://www.hiceon.com/topic/Ruby-Gem-install-source-taobao/ WHY? 由于国内网络原因(你懂的),导致 rubygems.org ...

  7. AngularJS进阶(八)实现页面跳转并进行参数传递

    angularjs实现页面跳转并进行参数传递 注:请点击此处进行充电! Angular页面传参有多种办法,我在此列举4种最常见的: 1. 基于ui-router的页面跳转传参 (1) 在Angular ...

  8. “《编程珠玑》(第2版)第2章”:A题(二分搜索)

    A题是这样子的: 给定一个最多包含40亿个随机排列的32位整数的顺序文件,找出一个不在文件中的32位整数(在文件中至少缺失一个这样的数据——为什么?).在具有足够内存的情况下,如何解决该问题?如果有几 ...

  9. OpenCV+OpenCL stereo match 代码

    之前配置cuda跟opencv 的混合编程,发现只要使用的东西多半还要用opencv的代码编译一次,加上cuda的编译太浪费时间了,我看了几个博客,觉的opencl这个可能会比较好整,就把opencv ...

  10. Emmet for Dreamweaver:HTML/CSS代码快速编写神器

    Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示: ...