zoukankan      html  css  js  c++  java
  • 利用javascript实现课程选择

    最终实现的效果如下图所示:

    代码如下所示:

    HTML代码部分:

     1 <body>
     2 <div class="page" style="overflow: hidden">
     3     <div class="one">所选课程
     4         <select  size =10 name="" id="left">
     5             <option value="">javascript</option>
     6             <option value="">html5</option>
     7             <option value="">css3</option>
     8             <option value="">jquery</option>
     9             <option value="">angular</option>
    10              <option value="">javascript</option>
    11             <option value="">html5</option>
    12             <option value="">css3</option>
    13             <option value="">jquery</option>
    14             <option value="">angular</option>
    15              <option value="">javascript</option>
    16             <option value="">html5</option>
    17             <option value="">css3</option>
    18             <option value="">jquery</option>
    19             <option value="">angular</option>
    20              <option value="">javascript</option>
    21             <option value="">html5</option>
    22             <option value="">css3</option>
    23             <option value="">jquery</option>
    24             <option value="">angular</option>
    25         </select>
    26     </div>
    27     <div class="one"><br><br>
    28         <button id="rightBtn">右移一项</button>
    29         <button id="allRightBtn">全部右移</button>
    30         <button id="leftBtn">左移一项</button>
    31         <button id="allLeftBtn">全部左移</button>
    32     </div>
    33     <div class="one">
    34         <select size =10 name="" id="right">
    35             <option value="">web</option>
    36             <option value="">前端</option>
    37             <option value="">后端</option>
    38             <option value="">java</option>
    39         </select>
    40     </div>
    41 </div>
    42 </body>

    CSS代码部分:

     1     <style>
     2         select{
     3             width: 200px;
     4 
     5         }
     6         .one{
     7             float: left;
     8         }
     9         button{
    10             display: block;
    11         }
    12     </style>

    Javascript代码部分:

     1 <script>
     2     var left = document.getElementById("left");
     3     var right = document.getElementById("right");
     4    var  rightBtn = document.getElementById("rightBtn");
     5     var  leftBtn = document.getElementById("leftBtn");
     6     var  allRightBtn = document.getElementById("allRightBtn");
     7     var  allLeftBtn = document.getElementById("allLeftBtn");
     8     rightBtn.onclick = function(){
     9         right.appendChild(left[left.selectedIndex])
    10     };
    11 
    12     allRightBtn.onclick = function(){
    13         var len = left.length;
    14         for(var i= 0;i<len;++i){
    15             right.appendChild(left[0])
    16         }
    17     };
    18 
    19     leftBtn.onclick = function(){
    20        left.appendChild(right[right.selectedIndex])
    21     };
    22 
    23     allLeftBtn.onclick = function(){
    24         var len = right.length;
    25         for(var i= 0;i<len;++i){
    26             left.appendChild(right[0])
    27         }
    28     }
    29 
    30 </script>

    供友友们参考。

  • 相关阅读:
    【转】23种设计模式详解
    JavaScript 中的对象引用
    iOS网络请求之NSURLSession
    学习编程是否做笔记的思考
    汇编语言——统计一个字符串中的大写字母、小写字母、数字和其他字符的个数,并显示
    windows7 64位如何调出debug
    Code:Blocks编写后出现如下错误
    iOS中Git的使用
    任意定义一个二维数组,实现矩阵的转置——java
    将八进制数转换为十进制数——java
  • 原文地址:https://www.cnblogs.com/hegaiying/p/5916251.html
Copyright © 2011-2022 走看看