<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{

                margin: auto;

                padding: 0px;

            }

            #a1{

                width: 1000px;

                height: 200px;

                border: 1px solid red;

                background-color: white;

                box-shadow: 8px 8px 8px gray;

                margin-top: 10px;

                overflow: hidden;

            }

            #a11{

                width: 1000px;

                height: 50px;

                border: 1px solid red;

                line-height: 50px;

            }

            #a2{

                width: 1000px;

                height: 50px;

                border: 1px solid red;

                margin-top: 20px;

            }

            #a21{

                width: 150px;

                height: 30px;

                margin-top: 20px;

                margin-left: 50px;

            }

            #a4{

                width: 1000px;

                height: 250px;

                border: 1px solid red;

                background-color: white;

                box-shadow: 8px 8px 8px gray;

                margin-top: 10px;

                overflow: hidden;

            }

            #a41{

                width: 1000px;

                height: 50px;

                border: 1px solid red;

                line-height: 50px;

            }

            #a42{

                width: 1000px;

                height: 50px;

                border: 1px solid red;

                margin-top: 20px;

            }

            #a421{

                width: 150px;

                height: 30px;

                margin-top: 20px;

                margin-left: 50px;

            }

            #a43{

                width: 1000px;

                height: 50px;

                border: 1px solid red;

                line-height: 50px;

                margin-left: 50px;

            }

            #a44{

                width: 1000px;

                height: 50px;

                border: 1px solid red;

                margin-top: 10px;

            }

            .a441{

                width: 50px;

                height: 50px;

                border: 1px solid red;

                background-color: white;

                margin-left: 20px;

                float: left;

            }

            #a5{

                width: 1000px;

                height: 600px;

                border: 1px solid red;

                background-color: white;

                box-shadow: 8px 8px 8px gray;

                margin-top: 10px;

                overflow: hidden;

            }

            #a51{

                width: 1000px;

                height: 50px;

                border: 1px solid red;

                line-height: 50px;

                margin-left: 20px;

            }

            #a52{

                width: 1000px;

                height: 50px;

                border: 1px solid red;

                margin-top: 20px;

                margin-left: 20px;

            }

            #a521{

                width: 150px;

                height: 30px;

                margin-top: 20px;

                margin-left: 50px;

            }

            #a53{

                width: 1000px;

                height: 50px;

                border: 1px solid red;

                line-height: 50px;

                margin-left: 20px;

            }

            .a54{

                width: 400px;

                height: 100px;

                border: 1px solid red;

                background-color: white;

                box-shadow: 8px 8px 8px gray;

                margin-top: 20px;

                transition: 2s;

            }

            #a6{

                width: 1000px;

                height: 200px;

                border: 1px solid red;

                background-color: white;

                box-shadow: 8px 8px 8px gray;

                margin-top: 10px;

                overflow: hidden;

            }

            #a61{

                width: 1000px;

                height: 50px;

                border: 1px solid red;

                line-height: 50px;

                margin-left: 20px;

            }

            #a62{

                width: 1000px;

                height: 50px;

                border: 1px solid red;

                margin-top: 20px;

                margin-left: 20px;

            }

            #a63{

                width: 1000px;

                height: 50px;

                border: 1px solid red;

                margin-top: 10px;

                margin-left: 20px;

            }

        </style>

    </head>

    <body>

        <div id="a1">

            <div id="a11">

                1、while循环

            </div>

            <div id="a2">

                <input type="submit" name="a21" id="a21" value="循环出现提示框5次" onclick="b1()"/>

            </div>

        </div>

        <div id="a4">

            <div id="a41">

                2、for循环

            </div>

            <div id="a42">

                <input type="submit" name="a421" id="a421" value="批量修改样式" onclick="b2()"/>

            </div>

            <div id="a43">

                固定元素个数

            </div>

            <div id="a44">

                <div class="a441">

                </div>

                <div class="a441">

                </div>

                <div class="a441">

                </div>

                <div class="a441">

                </div>

            </div>

        </div>

        <div id="a5">

            <div id="a51">

                if判断for循环

            </div>

            <div id="a52">

                <input type="submit" name="a521" id="a521" value="批量修改样式" onclick="b3()"/>

            </div>

            <div id="a53">

                元素个数不定

            </div>

            <div class="a54">

            </div>

            <div class="a54">

            </div>

            <div class="a54">

            </div>

        </div>

        <div id="a6">

            <div id="a61">

                if判断for循环

            </div>

            <div id="a62">

                <input type="checkbox" name="chk" id="1a" value="2" />

                <input type="checkbox" name="chk" id="2b" value="3" />

                <input type="checkbox" name="chk" id="3c" value="4" />

                <input type="checkbox" name="chk" id="4d" value="6" />

                <input type="checkbox" name="chk" id="5e" value="5" />

                <input type="checkbox" name="chk" id="6f" value="7" />

            </div>

            <div id="a63">

                <input type="submit" name="qx" id="qx" value="全选" onclick="b4()"/>

                <input type="submit" name="a632" id="a632" value="不选" onclick="b5()"/>

                <input type="submit" name="a633" id="a633" value="反选" onclick="b6()"/>

            </div>

        </div>

    </body>

</html>

<script type="text/javascript">

    function b1(){

        for(var i= 0;i<5;i++){

            alert("这是第"+i+"弹窗")

        }

    }

    function b2(){

        var a421 = document.getElementsByClassName("a441");

        for(var i = 0;i<a421.length;i++){

            a421[i].style.backgroundColor = "yellow"

        }

    }

    function b3(){

        var a521 = document.getElementsByClassName("a54");

        /*if(a54.style.background == "white"){*/

            for (var i =0;i < a521.length ;i++){

                a521[i].style.backgroundColor = "yellow";

                a521[i].style.height = "100px";

                a521[i].style.width = "500px";

            }

    /*}*/

        /*else{

                a521[i].style.width = "400px";

                a521[i].style.height = "100px";

                a521[i].style.background-color = "white";

        }*/

    }

    function b4 (){

        var chk = document.getElementsByClassName("chk");

        var qx = document.getElementsByClassName("qx");

        for(var i = 0;i<chk.length;i++){

            if(qx.checked){

                chk[i].checked = true;

            }

        }

    }

</script>

JS 20180416作业的更多相关文章

  1. js大作业(0)

    DAY1:在看HTML5游戏开发实战.手写了一遍乒乓球.自己玩了半小时.实话讲,和本科学的MFC差别不大.通过setInterval函数获取用户的输入 从而允许多用户操作.parseInt把字符串化为 ...

  2. 百度前端学院js课堂作业合集+分析(更新中...)

    第一课:简陋的登录框 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  3. JS 20180416考试

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. JS 20180415作业

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. JS 20180416课时训练

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 树莓派.使用Node.js来制作一个作业检查仪

    先上图 前段时间, 花了点时间给女儿做了个数学习题的小程序 首页 做题界面(题目每次都随机生成, 加减乘除都有) 做题记录 现在问题来了, 怎么才能随时知道作业有没有完成呢? 每次打开做题记录页面刷新 ...

  7. vue js计算精度问题处理，兼容XP系统

    js计算精度问题(浮点数误差,大数计算出错) JavaScript 运算时经常遇到会 0.000000001 和 0.999999999 这样奇怪的结果. 网上教程一大篇,原理请百度,抄作业往下看!! ...

  8. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  9. kettle作业中的js如何写日志文件

    在kettle作业中JavaScript脚本有时候也扮演非常重要的角色,此时我们希望有一些日志记录.下面是job中JavaScript记录日志的方式. job的js写日志的方法. 得到日志输出实例 o ...

随机推荐

  1. 0926MySQL中ICP索引下推

    转自 http://blog.itpub.net/22664653/viewspace-1678779/ [MySQL]MySQL5.6新特性之Index Condition Pushdown2015 ...

  2. oracle 工具：tkprof

    https://docs.oracle.com/cd/B10501_01/server.920/a96533/ex_plan.htm http://blog.csdn.net/dba_waterbin ...

  3. Python - 字符串模板的安全替换(safe_substitute) 具体解释

    字符串模板的安全替换(safe_substitute) 具体解释 本文地址: http://blog.csdn.net/caroline_wendy/article/details/27057339 ...

  4. IPC总结学习

    写的不错. http://www.cnblogs.com/CheeseZH/p/5264465.html IPC的方式通常有管道(包括无名管道和命名管道).消息队列.信号量.共享存储.Socket.S ...

  5. Ruby的case语句

    Ruby的case语句 case语句使用的是===判断方式,可以进行更加广义的相等判断: 可以进行类型的判断,可以进行正则表达式的判断: array = ["a",1,nil] a ...

  6. hdu4762Cut the Cake（概率+大数操作（java）+C++高精度模板）

    题目链接:点击打开链接 题目描写叙述:现有一个大蛋糕.上面随机分布了n个草莓,然后将草莓切成m块,问n个草莓全在一块蛋糕上面的概率? 解题思路:细致分析可得:C(n,1)/m^(n-1) 因为m< ...

  7. Find a way--hdoj

    Find a way Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  8. 【概率证明】—— sum and product rules of probability

    1. sum and product rules of probability ⎧⎩⎨p(x)=∫p(x,y)dyp(x,y)=p(x|y)p(y) sum rule of probability 的 ...

  9. 一个域名如何解析到多个ip地址

    一.域名解析多ip实例 简单一句话: dns 解析时多添加几个不同IP的A记录 例如: 上图中我给域名解析到两个不同的ip,大概等十分钟后我们ping 一下的结果如下 可以看到已经实现了一个域名解析到 ...

  10. SpringBoot中拦截器和过滤器的使用

    一.拦截器 三种方式 继承WebMvcConfigurerAdapter   spring5.0 以弃用,不推荐 实现WebMvcConfigurer  推荐 继承WebMvcConfiguratio ...