JS小练习

最新推荐文章于 2024-02-05 14:53:50 发布
最新推荐文章于 2024-02-05 14:53:50 发布
阅读量151 收藏
点赞数
分类专栏： 学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33060225/article/details/85053183
版权

1.作业 实现登录 注册框 并且有必填项的提示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .view{
            height: 400px;
            width: 800px;
            position: fixed;
            background-color: white;
            left: 50%;
            top:50%;
            margin-top: -200px;
            margin-left: -400px;
            border: 2px solid red;


        }
        .login{
                height: 20px;
                width: 200px;
                margin-left: 50px;
                margin-top: 10px;
                position: absolute;
        }

        .yanzhen{
                height: 20px;
                width: 100px;
                margin-left: 50px;
                margin-top: 10px;
                position: absolute;
                left: 50%;
                top: 50%;
        }

        .button{

                height: 20px;
                width: 100px;
                margin-left: 50px;
                margin-top: 10px;
                position: absolute;
                top: 70%;

        }
    </style>
</head>
<body style="margin: 0 auto">
     <div class="view">
         <div style="">
         <div style="height: 400px;width: 800px;position: relative">
             <span class="login" style="left: 10%;top: 20%;color:red;">*</span>
             <span class="login" style="left: 10%;top: 35%;color:red;">*</span>
             <span class="login" style="left: 10%;top: 50%;color:red;">*</span>
             <span class="login" style="left: 10%;top: 20%;color:red;">*</span>
             <span class="login" style="left: 12%;top: 20%">用户名:</span>
             <span class="login" style="left: 12%;top: 35%">密码:</span>
             <span class="login" style="left: 12%;top: 50%">验证码:</span>
             <input type="text" class="login" style="left: 20%;top: 20%;">
             <input type="text" class="login" style="left: 20%;top: 35%;">
             <input type="text" class="login" style="left: 20%;top: 50%;">
             <img class="yanzhen" src="1.jpg">
             <input type="submit" class="button" value="登录" style="left: 10%">
             <input type="button" class="button" value="注册" style="left: 30%">

         </div>

     </div>

</body>
</html>

2.作业 实现左侧导航栏，顶部菜单栏，右侧表格，全选，反选等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display:none;
        }

        .item .header{
             height:35px;
             background-color: #2459a2;
             color: white;
             line-height: 35px;
        }
        .pg-header{
            background-color:#dddddd;
            height:40px;
            line-height:38px;
        }
        .table{
            height: 400px;
            width: 400px;
            margin-left: 100px;
        }

        .c1{
            position: fixed;
            left:0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 9;
        }

        .c2{
            width: 500px;
            height: 400px;
            background-color: white;
            position: fixed;
            left: 50%;
            top:50%;
            margin-left: -250px;
            margin-top: -200px;
            z-index: 10;
        }
    </style>
</head>
<body>
<div class="pg-header">
        <div style="width:1350px;margin:0 auto;">
            <div style="float:left;color:#696262">收藏本站</div>
            <div style="float:right;color:#696262">
                <a>登录</a>
                <a>注册</a>
                <a>我的订单</a>
                <a>我的收藏</a>
                <a>vip会员俱乐部</a>
                <a>客户端服务</a>
                <a>关注</a>
                <a>手机版</a>
            </div>
            <div style="clear:both;"></div>
        </div>
    </div>

<div style="width: 50px;margin-top:100px;">
    <div class="item">
               <div id="i1" class="header" onclick="ChangeMenu('i1');">菜单1</div>
              <div class="content hide">
                  <div>内容1</div>
                  <div>内容1</div>
                  <div>内容1</div>
              </div>
          </div>
          <div class="item">
               <div id="i2" class="header" onclick="ChangeMenu('i2');">菜单2</div>
              <div class="content hide">
                  <div>内容2</div>
                  <div>内容2</div>
                  <div>内容2</div>
              </div>
          </div>
         <div class="item">
               <div id="i3" class="header" onclick="ChangeMenu('i3')">菜单3</div>
              <div class="content hide">
                  <div>内容3</div>
                  <div>内容3</div>
                  <div>内容3</div>
              </div>
          </div>
         <div class="item">
               <div id="i4" class="header" onclick="ChangeMenu('i4')">菜单4</div>
              <div class="content hide">
                  <div>内容4</div>
                  <div>内容4</div>
                  <div>内容4</div>
              </div>
</div>
   <div class="table">
       <input type="button" value="添加" onclick="ShowModel();" />
       <input type="button" value="全选" onclick="ChooseAll();" />
       <input type="button" value="取消" onclick="CancleAll();" />
       <input type="button" value="反选" onclick="ReverseAll();" />

       <table>
           <thead>
               <tr>
                   <th>选择</th>
                   <th>主机名</th>
                   <th>端口</th>
               </tr>
           </thead>
           <tbody id="tb">
               <tr>
                   <td>
                        <input type="checkbox">
                    </td>
                   <td>1.1.1.1</td>
                   <td>190</td>
               </tr>
               <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                   <td>1.1.1.2</td>
                   <td>192</td>
               </tr>
               <tr>
                   <td>
                        <input type="checkbox">
                    </td>
                   <td>1.1.1.3</td>
                   <td>193</td>
               </tr>

           </tbody>
       </table>
   </div>

    <!-- 遮罩层开始-->
    <div id="j1" class="c1 hide"></div>
    <!-- 遮罩层结束-->
    <!-- 弹出框开始-->
   <div id="j2" class="c2 hide">
       <p><input type="text"></p>
       <p><input type="text"></p>
       <p>
           <input type="button" value="取消" onclick="HideModel();" />
           <input type="button" value="确定">
       </p>
   </div>
    <!-- 弹出框结束-->
</div>
 <script>
        function ChangeMenu(nid){
            var current_header=document.getElementById(nid);
            var item_list=current_header.parentElement.parentElement.children;
            for(var i=0;i<item_list.length;i++){
                var current_item=item_list[i];
                current_item.children[1].classList.add('hide')
            }
            current_header.nextElementSibling.classList.remove('hide')
        }


         function ShowModel(){
           document.getElementById('j1').classList.remove('hide');
           document.getElementById('j2').classList.remove('hide');
       }

       function HideModel(){
           document.getElementById('j1').classList.add('hide');
           document.getElementById('j2').classList.add('hide');
       }

       function ChooseAll(){
           var tbody=document.getElementById('tb');
           // 获取所有tr
           var trlist=tbody.children;
           for(var i=0;i<trlist.length;i++){
               //循环所有tr
               var current_tr =trlist[i];
               var checkbox=current_tr.children[0].children[0];
               checkbox.checked=true;
           }
       }

        function CancleAll(){
           var tbody=document.getElementById('tb');
           // 获取所有tr
           var trlist=tbody.children;
           for(var i=0;i<trlist.length;i++){
               //循环所有tr
               var current_tr =trlist[i];
               var checkbox=current_tr.children[0].children[0];
               checkbox.checked=false;
           }
       }

        function ReverseAll(){
           var tbody=document.getElementById('tb');
           // 获取所有tr
           var trlist=tbody.children;
           for(var i=0;i<trlist.length;i++){
               //循环所有tr
               var current_tr =trlist[i];
               var checkbox=current_tr.children[0].children[0];
               if (checkbox.checked==true){
                   checkbox.checked=false;
               }
               else{
                   checkbox.checked=true;
               }

           }
       }
    </script>

</body>
</html>
yhr562605133
关注
专栏目录
原生JS经典小项目-DOM练习
05-18
原生JS经典小项目-DOM练习
JavaScript的12个小练习
mingwangxingqqq的博客
11-26 578
需要注意要求放大的倍数，被放大部分的位置，光标应处在放大指示框的正中间，实际放大内容应与指示框内的内容一致。11和12：上周电脑崩了，重装了个系统，敲的代码全没了（/(ㄒoㄒ)/~~），还有两个有空会补上的。该demo会将多个图片纵向紧密排列，可以根据界面的宽度自动改变列数。需要注意的点：光标在图片上时图片不轮播，切换图片时对应圆点变色。需要注意上面的时间与北京时间同步，注意控制指针转动的角度。本demo需要注意验证码的倒计时结束会重置按钮。区县太多了，就没来得及做。
JavaScript 25题简单小例子练习，锻炼代码逻辑思维，不看后悔系列（一）
embelfe_segge的博客
05-14 1896
1.计算10的阶乘： // 计算10的阶乘 // 声明阶乘，赋值 var jc = 1; // 创建循环语句 for(i = 1;i <= 10;i++){ jc *= i; } // 打印结果 console.log(jc); // 3628800 2.计算圆的周长、半径： // 假设半径为80 var r = 80; // 周长公式 var h = 2*Math.PI*r; // 结果保留3位小数 var h = h.toFixed(3); // 面积公式 var s = Math
js练习例题
m0_70552412的博客
07-02 809
1.tab复用 *{ padding: 0px; margin: 0px; } #tab{ width: 600px; height: 500px; border:5px solid blue; margin
js小练习
鹿蹊zz的博客
06-09 1041
目录1.用户输入一个数字，判定数字是奇数还是偶数，如果不是数字也要给出提示2.判定两个数字之间的最大值(用户输入两个数字，判定哪个数字大)3.成绩等级的判定4.用户输入一个年份，判定该年份有多少天5.制定学习计划表，输入星期几，能提示今天要学习什么课程6.出租车，起步价(2公里以内)为7元，超过2公里的按照每公里3元计算。要求根据路程计算费用7.判断闰年（闰年的条件是能被4整除，但不能被100整除；或能被400整除。）8.根据性别和体重计算输血量。女性体重不超过50kg的输血量为200毫升，否则250毫升；
JS之小练习代码
10-30
这段JS代码是一个小型的练习，主要展示了如何使用Ext JS库来构建用户界面。Ext JS是一个强大的JavaScript库，用于创建富客户端应用，它提供了丰富的组件和布局管理功能。在这个练习中，作者创建了一个窗口（Window）...
JavaScript技术练习小项目
最新发布
03-10
JavaScript技术练习小项目 该项目包含JavaScript的多项技术点，可以有效练习我们的能力，提高对js的认识 JavaScript技术练习小项目 该项目包含JavaScript的多项技术点，可以有效练习我们的能力，提高对js的认识 ...
js小项目练习
11-16
"js小项目练习"这个压缩包包含了使用jQuery实现的一些常见功能的源代码，对于初学者和进阶者来说都是很好的学习资源。下面我们将详细探讨这些小项目及其背后的JavaScript和jQuery知识点。 1. **菜单**： 菜单是...
JS小练习代码之二第1/2页
10-30
【JS小练习代码之二第1/2页】是一份JavaScript练习项目，主要涉及了两个核心部分：`beginFormPanel.js` 和 `beginPanel.js`。这些代码旨在帮助学习者理解如何在Web应用中创建和操作表单以及窗口组件，使用了Ext JS库...
每天几个JS小案例，有手都能学会
m0_71412337的博客
07-05 127
【代码】每天几个JS小案例，有手都能学会。
JavaScript几个小作业
01-03
1.编写一个生成200个100~200之间随机数的函数的代码，并在浏览器中显示这些随机数。 2.编写一个显示程序运行当天到下一个元旦之间的天数的程序 3.编写一个程序，测试数学函数ceil()、floor()、round()，以及abs()、exp()、log()、max()、min()、pow()、sqrt()等数学方法。
js 小项目练习，jQuery 小例子
04-10
js 小项目练习，jQuery 小例子。 使用jquery写的一些小例子，比如菜单，星级评分，轮播图，拖拽上传等效果源码。 jquery小项目
原生javascript小练习，各种属性的用法
09-14
一些关于原生js小案例，如动画效果的实现，轮播图的做法，页面存储的属性等等
学习js的几个小练习
xiaojing的博客
03-15 6302
第一个效果非常简单，就是五个按钮来简单地改变框框的样式，但是我还是做了有一会吧，先尝试用addEventListener()这个方法不管用，想用nodeValue来获取按钮的值也不管用，想将inputs[i].value的值传入点击事件方法也遇到问题。种种尝试之后，我发现在onclick事件中有一个this，它指向的是当前点击的一个节点，因此可以通过this.value来获取按钮的值，我觉得我的写
JS小作业
qq_45874580的博客
11-03 556
1、九九乘法表 var s = '';//字符串拼接 for (var i = 1; i <= 9; i++) { for (var j = 1; j <= i; j++) { s += j + '*' + i + '=' + i * j + ' '; } s += '\n'; } console.log(s); 显示结果为： 2、冒泡排序 冒泡排序原理：从第一个数字开始，让这个数字依次与后一个数字比较，若后一个数字大/小，则两个数交换位置.
js一些小练习
weixin_59104495的博客
11-05 174
function fun(num){ num = 100; } let n = 10; fun(n); console.log(n); //10 function fun(arr) { arr.push(10); }; let a = [1, 2, 3]; fun(a); console.log(a); //[ 1, 2, 3, 10 ] let stu = { name: 'xiaoming', age: 10, } function copyObjec..
大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
热门推荐
HTML网页设计
07-31 6万+
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
HTML+CSS+JS大学生作业作品练习
m0_63780299的博客
02-05 595
HTML+CSS+JS作品：一站式旅游服务网 1.景点、酒店、民宿、餐厅等产品 2.加购功能 3.加购列表 4.成交并在加购列表清除。
JS小练习：创建窗口及表单
"JS之小练习代码，是一个纯JavaScript的代码练习，主要涉及Ext.js库的使用，包括创建数据记录、定义窗口、设置布局以及创建表单组件等。练习来源于陈治文老师的课程，旨在提升JavaScript编程技能。" 在本练习中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值