1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             *{
  8.                 margin: auto;
  9.                 padding: 0px;
  10.  
  11.             }
  12.             #a1{
  13.                 width: 1000px;
  14.                 height: 200px;
  15.                 border: 1px solid red;
  16.                 background-color: white;
  17.                 box-shadow: 8px 8px 8px gray;
  18.                 margin-top: 10px;
  19.                 overflow: hidden;
  20.             }
  21.             #a11{
  22.                 width: 1000px;
  23.                 height: 50px;
  24.                 border: 1px solid red;
  25.                 line-height: 50px;
  26.  
  27.             }
  28.             #a2{
  29.                 width: 1000px;
  30.                 height: 50px;
  31.                 border: 1px solid red;
  32.                 margin-top: 20px;
  33.             }
  34.             #a21{
  35.                 width: 150px;
  36.                 height: 30px;
  37.                 margin-top: 20px;
  38.                 margin-left: 50px;
  39.             }
  40.             #a4{
  41.                 width: 1000px;
  42.                 height: 250px;
  43.                 border: 1px solid red;
  44.                 background-color: white;
  45.                 box-shadow: 8px 8px 8px gray;
  46.                 margin-top: 10px;
  47.                 overflow: hidden;
  48.             }
  49.             #a41{
  50.                 width: 1000px;
  51.                 height: 50px;
  52.                 border: 1px solid red;
  53.                 line-height: 50px;
  54.  
  55.             }
  56.             #a42{
  57.                 width: 1000px;
  58.                 height: 50px;
  59.                 border: 1px solid red;
  60.                 margin-top: 20px;
  61.             }
  62.             #a421{
  63.                 width: 150px;
  64.                 height: 30px;
  65.                 margin-top: 20px;
  66.                 margin-left: 50px;
  67.             }
  68.             #a43{
  69.                 width: 1000px;
  70.                 height: 50px;
  71.                 border: 1px solid red;
  72.                 line-height: 50px;
  73.                 margin-left: 50px;
  74.             }
  75.             #a44{
  76.                 width: 1000px;
  77.                 height: 50px;
  78.                 border: 1px solid red;
  79.                 margin-top: 10px;
  80.             }
  81.             .a441{
  82.                 width: 50px;
  83.                 height: 50px;
  84.                 border: 1px solid red;
  85.                 background-color: white;
  86.                 margin-left: 20px;
  87.                 float: left;
  88.             }
  89.             #a5{
  90.                 width: 1000px;
  91.                 height: 600px;
  92.                 border: 1px solid red;
  93.                 background-color: white;
  94.                 box-shadow: 8px 8px 8px gray;
  95.                 margin-top: 10px;
  96.                 overflow: hidden;
  97.             }
  98.             #a51{
  99.                 width: 1000px;
  100.                 height: 50px;
  101.                 border: 1px solid red;
  102.                 line-height: 50px;
  103.                 margin-left: 20px;
  104.             }
  105.             #a52{
  106.                 width: 1000px;
  107.                 height: 50px;
  108.                 border: 1px solid red;
  109.                 margin-top: 20px;
  110.                 margin-left: 20px;
  111.  
  112.             }
  113.             #a521{
  114.                 width: 150px;
  115.                 height: 30px;
  116.                 margin-top: 20px;
  117.                 margin-left: 50px;
  118.             }
  119.             #a53{
  120.                 width: 1000px;
  121.                 height: 50px;
  122.                 border: 1px solid red;
  123.                 line-height: 50px;
  124.                 margin-left: 20px;
  125.             }
  126.             .a54{
  127.                 width: 400px;
  128.                 height: 100px;
  129.                 border: 1px solid red;
  130.                 background-color: white;
  131.                 box-shadow: 8px 8px 8px gray;
  132.                 margin-top: 20px;
  133.                 transition: 2s;
  134.             }
  135.             #a6{
  136.                 width: 1000px;
  137.                 height: 200px;
  138.                 border: 1px solid red;
  139.                 background-color: white;
  140.                 box-shadow: 8px 8px 8px gray;
  141.                 margin-top: 10px;
  142.                 overflow: hidden;
  143.             }
  144.             #a61{
  145.                 width: 1000px;
  146.                 height: 50px;
  147.                 border: 1px solid red;
  148.                 line-height: 50px;
  149.                 margin-left: 20px;
  150.             }
  151.             #a62{
  152.                 width: 1000px;
  153.                 height: 50px;
  154.                 border: 1px solid red;
  155.                 margin-top: 20px;
  156.                 margin-left: 20px;
  157.  
  158.             }
  159.             #a63{
  160.                 width: 1000px;
  161.                 height: 50px;
  162.                 border: 1px solid red;
  163.                 margin-top: 10px;
  164.                 margin-left: 20px;
  165.  
  166.             }
  167.         </style>
  168.     </head>
  169.     <body>
  170.         <div id="a1">
  171.             <div id="a11">
  172.                 1、while循环
  173.             </div>
  174.  
  175.             <div id="a2">
  176.                 <input type="submit" name="a21" id="a21" value="循环出现提示框5次" onclick="b1()"/>
  177.             </div>
  178.  
  179.         </div>
  180.         <div id="a4">
  181.             <div id="a41">
  182.                 2、for循环
  183.             </div>
  184.             <div id="a42">
  185.                 <input type="submit" name="a421" id="a421" value="批量修改样式" onclick="b2()"/>
  186.             </div>
  187.             <div id="a43">
  188.                 固定元素个数
  189.             </div>
  190.             <div id="a44">
  191.                 <div class="a441">
  192.  
  193.                 </div>
  194.                 <div class="a441">
  195.  
  196.                 </div>
  197.                 <div class="a441">
  198.  
  199.                 </div>
  200.                 <div class="a441">
  201.  
  202.                 </div>
  203.             </div>
  204.         </div>
  205.         <div id="a5">
  206.             <div id="a51">
  207.                 if判断for循环
  208.             </div>
  209.             <div id="a52">
  210.                 <input type="submit" name="a521" id="a521" value="批量修改样式" onclick="b3()"/>
  211.             </div>
  212.             <div id="a53">
  213.                 元素个数不定
  214.             </div>
  215.             <div class="a54">
  216.  
  217.             </div>
  218.             <div class="a54">
  219.  
  220.             </div>
  221.             <div class="a54">
  222.  
  223.             </div>
  224.  
  225.         </div>
  226.         <div id="a6">
  227.             <div id="a61">
  228.                 if判断for循环
  229.             </div>
  230.             <div id="a62">
  231.                 <input type="checkbox" name="chk" id="1a" value="2" />
  232.                 <input type="checkbox" name="chk" id="2b" value="3" />
  233.                 <input type="checkbox" name="chk" id="3c" value="4" />
  234.                 <input type="checkbox" name="chk" id="4d" value="6" />
  235.                 <input type="checkbox" name="chk" id="5e" value="5" />
  236.                 <input type="checkbox" name="chk" id="6f" value="7" />
  237.             </div>
  238.             <div id="a63">
  239.                 <input type="submit" name="qx" id="qx" value="全选" onclick="b4()"/>
  240.                 <input type="submit" name="a632" id="a632" value="不选" onclick="b5()"/>
  241.                 <input type="submit" name="a633" id="a633" value="反选" onclick="b6()"/>
  242.             </div>
  243.         </div>
  244.     </body>
  245. </html>
  246. <script type="text/javascript">
  247.     function b1(){
  248.         for(var i= 0;i<5;i++){
  249.             alert("这是第"+i+"弹窗")
  250.         }
  251.     }
  252.     function b2(){
  253.         var a421 = document.getElementsByClassName("a441");
  254.         for(var i = 0;i<a421.length;i++){
  255.             a421[i].style.backgroundColor = "yellow"
  256.         }
  257.     }
  258.     function b3(){
  259.         var a521 = document.getElementsByClassName("a54");
  260.         /*if(a54.style.background == "white"){*/
  261.             for (var i =0;i < a521.length ;i++){
  262.                 a521[i].style.backgroundColor = "yellow";
  263.                 a521[i].style.height = "100px";
  264.                 a521[i].style.width = "500px";
  265.             }
  266.     /*}*/
  267.         /*else{
  268.                 a521[i].style.width = "400px";
  269.                 a521[i].style.height = "100px";
  270.                 a521[i].style.background-color = "white";
  271.         }*/
  272.     }
  273.     function b4 (){
  274.         var chk = document.getElementsByClassName("chk");
  275.         var qx = document.getElementsByClassName("qx");
  276.         for(var i = 0;i<chk.length;i++){
  277.             if(qx.checked){
  278.                 chk[i].checked = true;
  279.             }
  280.         }
  281.     }
  282. </script>

JS 20180415作业的更多相关文章

  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. 树莓派.使用Node.js来制作一个作业检查仪

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

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

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

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

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

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

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

  8. 廖雪峰js教程笔记11 操作DOM(包含作业)

    由于HTML文档被浏览器解析后就是一棵DOM树,要改变HTML的结构,就需要通过JavaScript来操作DOM. 始终记住DOM是一个树形结构.操作一个DOM节点实际上就是这么几个操作: 更新:更新 ...

  9. KoaHub.JS用于Node.js的cron作业调度程序代码

    node-schedule A cron-like and not-cron-like job scheduler for Node. Node Schedule     Announcement:  ...

随机推荐

  1. 2019-04-17 PowerShell基本语法

    打印Hello World ,Hello theDataDigger writeLog ' Hello World'$Name = "theDataDigger"writeLog ...

  2. Vue packages version mismatch

    开发过程中,之前做的vue项目,一段时间后拿出来重新运行,报错: 打开vue-template-compiler/index.js查看错误提示,如下: 当安装的vue版本和package.json中的 ...

  3. 【[Offer收割]编程练习赛15 C】过河问题

    [题目链接]:http://hihocoder.com/problemset/problem/1516 [题意] [题解] 状态压缩DP+bfs 这个过河问题能用bfs来搞.涨知识了; 首先; 16个 ...

  4. Visifire实现统计图

    /// <summary> /// 柱形图 /// </summary> public static Chart InitCompareChart(string fundNam ...

  5. Syncfusion在WinPhone8.1实现统计图

    using Syncfusion.UI.Xaml.Charts; public static SfChart InitCompareChart(string fundName, double tenT ...

  6. /sys/power/state

    kernel/power/main.c中: /** * state - control system power state. * * show() returns what states are s ...

  7. 使用imgareaselect 辅助后台进行图片裁剪

    由于项目其中用到图片裁剪,本来能够不用到后台进行裁剪的,可是要兼容万恶的IE浏览器,所以不得不使用后台进行裁剪. 这次使用到imgareaselect 插件获取须要裁剪区域的坐标.再由后台进行裁剪操作 ...

  8. C语言高速入门系列(一)

    C语言高速入门系列(一)  本系列引言: 本教程的宗旨是将C语言入门的内容进行关键知识点的提纯,将一些笼统的废话去除; 再进行压缩,然后将本章的关键知识点做成路线图的,能够更加方便地掌握学习的方向; ...

  9. 关于ShapeDrawable应用的一些介绍（上）

    在Android中, 很多时候系统原生的控件的格式并不能满足我们的需求,我们想要更加好看点的样式,像什么圆角矩形啊,颜色渐变啊,阴影效果啊等等的,这个时候就是我们的 ShapeDrawable发挥效果 ...

  10. 火狐Vimperator插件

    http://www.iplaysoft.com/vimium-and-vimperator.html http://wangbixi.com/x2923/comment-page-1/