JavaScript选项小练习

最新推荐文章于 2023-11-26 16:42:13 发布
最新推荐文章于 2023-11-26 16:42:13 发布
阅读量395 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cckevincyh/article/details/53130460
版权 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">
<!--
BODY
{
    font-family:"Courier";
    font-size: 12px;
    margin:0px 0px 0px 0px;
    overflow-x:no;
    overflow-y:no;
    background-color: #B8D3F4;
}
td
{
    font-size:12px;
}
.default_input
{
    border:1px solid #666666;
    height:18px;
    font-size:12px;
}
.default_input2
{
    border:1px solid #666666;
    height:18px;
    font-size:12px;
}
.nowrite_input
{
    border:1px solid #849EB5;
    height:18px;
    font-size:12px;
    background-color:#EBEAE7;
    color: #9E9A9E;
}
.default_list
{
    font-size:12px;
  border:1px solid #849EB5;
}
.default_textarea
{
    font-size:12px;
    border:1px solid #849EB5;
}

.nowrite_textarea
{
    border:1px solid #849EB5;
    font-size:12px;
    background-color:#EBEAE7;
    color: #9E9A9E;
}

.wordtd5 {
    font-size: 12px;
    text-align: center;
    vertical-align:top;
    padding-top: 6px;
    padding-right: 5px;
    padding-bottom: 3px;
    padding-left: 5px;
    background-color: #b8c4f4;
}

.wordtd {
    font-size: 12px;
    text-align: left;
    vertical-align:top;
    padding-top: 6px;
    padding-right: 5px;
    padding-bottom: 3px;
    padding-left: 5px;
    background-color: #b8c4f4;
}
.wordtd_1 {
    font-size: 12px;
    vertical-align:top;
    padding-top: 6px;
    padding-right: 5px;
    padding-bottom: 3px;
    padding-left: 5px;
    background-color: #516CD6;
    color:#fff;
}
.wordtd_2{
    font-size: 12px;
    text-align: right;
    vertical-align:top;
    padding-top: 6px;
    padding-right: 5px;
    padding-bottom: 3px;
    padding-left: 5px;
    background-color: #64BDF9;
}
.wordtd_3{
    font-size: 12px;
    text-align: right;
    vertical-align:top;
    padding-top: 6px;
    padding-right: 5px;
    padding-bottom: 3px;
    padding-left: 5px;
    background-color: #F1DD34;
}
.inputtd
{
    font-size:12px;
    vertical-align:top;
    padding-top: 3px;
    padding-right: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
}
.inputtd2
{
    text-align: center;
    font-size:12px;
    vertical-align:top;
    padding-top: 3px;
    padding-right: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
}
.tablebg
{
    font-size:12px;
}

.tb{
    border-collapse: collapse;
    border: 1px outset #999999;
    background-color: #FFFFFF;
}
.td2{line-height:22px; text-align:center; background-color:#F6F6F6;}
.td3{background-color:#B8D3F4; text-align:center; line-height:20px;}
.td4{background-color:#F6F6F6;line-height:20px;}
.td5{border:#000000 solid;
       border-right-width:0px;
       border-left-width:0px;
       border-top-width:0px;
       border-bottom-width:1px;}

.tb td{
font-size: 12px;
border: 2px groove #ffffff;
}




.noborder {
    border: none;
}

.button {
    border: 1px ridge #ffffff;
    line-height:18px;
    height: 20px;
    width: 45px;
    padding-top: 0px;
    background:#CBDAF7;
    color:#000000;
    font-size: 9pt;
    font-family:"Courier";
} 

.textarea {
    font-family: Arial, Helvetica, sans-serif, "??";
    font-size: 9pt;
    color: #000000;
    border-bottom-width: 1px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-bottom-color: #000000;
    background-color:transparent;
    text-align: left
}
-->
</style></head>

<body>

<div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;">
<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
  <tr>
    <td width="126">
        <!--multiple="multiple" 能同时选择多个   size="10"  确定下拉选的长度-->
        <select name="first" multiple="multiple" size=10 class="td3" id="first">
          <option value="选项1">选项1</option>
          <option value="选项2">选项2</option>
          <option value="选项3">选项3</option>
          <option value="选项4">选项4</option>
          <option value="选项5">选项5</option>
          <option value="选项6">选项6</option>
          <option value="选项7">选项7</option>
          <option value="选项8">选项8</option>
        </select>    
    </td>
    <td width="69" valign="middle">
       <input name="add"  id="add" type="button" class="button" value="-->" /> 
       <input name="add_all" id="add_all"  type="button" class="button" value="==>" /> 
       <input name="remove"  id="remove" type="button" class="button" value="&lt;--" />
       <input name="remove_all"  id="remove_all" type="button" class="button" value="&lt;==" />
        </td>
    <td width="127" align="left">
      <select name="second" size="10" multiple="multiple" class="td3" id="second">
         <option value="选项9">选项9</option>
      </select>
    </td>
  </tr>
</table>
</div>
</body>
<script type="text/javascript">
    //<input name="add"  id="add" type="button" class="button" value="-->" /> 
    document.getElementById("add").onclick = function(){
        /*
             * <select name="first" class="td3" size="10" multiple="multiple" id="first">
                  <option value="选项1">选项1</option>
                  <option value="选项2">选项2</option>
                  <option value="选项3">选项3</option>
                  <option value="选项4">选项4</option>
                  <option value="选项5">选项5</option>
                  <option value="选项6">选项6</option>
                  <option value="选项7">选项7</option>
                  <option value="选项8">选项8</option>
                </select>  
             */
        var firstElement = document.getElementById("first");
        var optionElements = firstElement.getElementsByTagName("option");
        var len = optionElements.length;
        var secondElement = document.getElementById("second");
        for(var i = 0;i<len;i++){
            /*
                 * selectedIndex属性
                 *      * 如果没有被选中的时候，selectedIndex的值是"-1"
                 *      * 如果有一个呗选中的时候，selectedIndex的值就是那个被选中的选项的索引值
                 *      * 如果有多个被选中的时候，selectedIndex的值只能找到第一个被选中的索引值
                 */
            if(firstElement.selectedIndex!=-1){
                secondElement.appendChild(optionElements[firstElement.selectedIndex]);
            }
        }

    }

    //<input name="add_all" id="add_all"  type="button" class="button" value="==>" /> 
    document.getElementById("add_all").onclick = function(){
        var firstElement = document.getElementById("first");
        var optionElements = firstElement.getElementsByTagName("option");
        var len = optionElements.length;

        var secondElement = document.getElementById("second");

        for(var i = 0;i<len;i++){
            secondElement.appendChild(optionElements[0]);
        }
    }


    //<input name="remove"  id="remove" type="button" class="button" value="&lt;--" />
    document.getElementById("remove").onclick = function(){
        var secondElement = document.getElementById("second");
        var optionElements = secondElement.getElementsByTagName("option");
        var len = optionElements.length;

        var firstElement = document.getElementById("first");

        for(var i = 0;i<len;i++){
            if(secondElement.selectedIndex!=-1){
                firstElement.appendChild(optionElements[secondElement.selectedIndex]);

            }
        }
    }


    //<input name="remove_all"  id="remove_all" type="button" class="button" value="&lt;==" />
    document.getElementById("remove_all").onclick = function(){
        var secondElement = document.getElementById("second");
        var optionElements = secondElement.getElementsByTagName("option");
        var len = optionElements.length;    
        var firstElement = document.getElementById("first");

        for(var i=0;i<len;i++){
            firstElement.appendChild(optionElements[0]);
        }
    }   


    //双击   从左到右
        /*
         * <select name="first" class="td3" size="10" multiple="multiple" id="first">
              <option value="选项1">选项1</option>
              <option value="选项2">选项2</option>
              <option value="选项3">选项3</option>
              <option value="选项4">选项4</option>
              <option value="选项5">选项5</option>
              <option value="选项6">选项6</option>
              <option value="选项7">选项7</option>
              <option value="选项8">选项8</option>
            </select> 
         */
    document.getElementById("first").ondblclick = function(){
        var firstElement = document.getElementById("first");
        var optionElements = firstElement.getElementsByTagName("option");
        var len = optionElements.length;

        var secondElement = document.getElementById("second");
        for(var i=0;i<len;i++){
            if(firstElement.selectedIndex!=-1){
                secondElement.appendChild(optionElements[firstElement.selectedIndex]);
            }
        }
    }

    document.getElementById("second").ondblclick = function(){
        var secondElement = document.getElementById("second");
        var optionElements = secondElement.getElementsByTagName("option");
        var len = optionElements.length;

        var firstElement = document.getElementById("first");

        for(var i=0;i<len;i++){
            if(secondElement.selectedIndex!=-1){
                firstElement.appendChild(optionElements[secondElement.selectedIndex]);
            }
        }
    }


</script>
</html>

这里写图片描述

c.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 25题简单小例子练习，锻炼代码逻辑思维，不看后悔系列（一）
embelfe_segge的博客
05-14 1758
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经典小项目-DOM练习
05-18
原生JS经典小项目-DOM练习
js实现简单选项功能
玩转Java
04-04 381
javascript ------- 对象绑定与事件触发： 效果图： 功能描述：制作一个关于选择的相关功能，根据上图所示，有四个按钮，这里解释一下第三个按钮，就是反选，意思就是例如我目前选择足球，则第三按钮的功能就是其他选项都勾选，足球取消勾选。 要了解的知识点： 1，获取对象 2，获取或修改对象属性 3，对象绑定事件 text.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-
JavaScript的12个小练习
最新发布
mingwangxingqqq的博客
11-26 522
需要注意要求放大的倍数，被放大部分的位置，光标应处在放大指示框的正中间，实际放大内容应与指示框内的内容一致。11和12：上周电脑崩了，重装了个系统，敲的代码全没了（/(ㄒoㄒ)/~~），还有两个有空会补上的。该demo会将多个图片纵向紧密排列，可以根据界面的宽度自动改变列数。需要注意的点：光标在图片上时图片不轮播，切换图片时对应圆点变色。需要注意上面的时间与北京时间同步，注意控制指针转动的角度。本demo需要注意验证码的倒计时结束会重置按钮。区县太多了，就没来得及做。
js练习例题
m0_70552412的博客
07-02 780
1.tab复用 *{ padding: 0px; margin: 0px; } #tab{ width: 600px; height: 500px; border:5px solid blue; margin
【JavaScript】DOM实战练习之选项卡切换
08-10
在这个“【JavaScript】DOM实战练习之选项卡切换”的主题中，我们将深入探讨如何利用JavaScript实现一个常见的UI交互功能——选项卡切换。 选项卡切换是一种用户界面设计模式，它将大量信息组织成可切换的分块，以...
javaScript练习题.docx
09-30
JavaScript 练习题汇总 JavaScript 是一种广泛应用于 web 开发的编程语言，它可以在客户端执行，以增强网页的交互性和用户体验。以下是 JavaScript 练习题的汇总，涵盖了选择题、不定项选择题、填空、判断、阅读...
JavaScript实现Tab选项卡切换
12-28
本文实例为大家分享了js实现选项卡切换的具体代码，供大家参考，具体内容如下 会用到原生js的dom操作 html <body> <li class=seclect>1 <li>2 <li>3 <li>4 <li>5 <li>1 <l
javascript jQuery插件练习
12-09
4. 考虑到插件的可扩展性和可维护性，将复杂功能分解为小的、可复用的函数。 5. 充分利用jQuery的链式调用特性，保持代码简洁。 在CSS部分，`*{padding:0; margin:0}`是重置浏览器默认样式，以避免样式冲突。而`#...
JS之小练习代码
10-30
这段JS代码是一个小型的练习，主要展示了如何使用Ext JS库来构建用户界面。Ext JS是一个强大的JavaScript库，用于创建富客户端应用，它提供了丰富的组件和布局管理功能。在这个练习中，作者创建了一个窗口（Window）...
JavaScript很好的练习项目
08-18
完整的js项目
js 小项目练习，jQuery 小例子
04-10
js 小项目练习，jQuery 小例子。 使用jquery写的一些小例子，比如菜单，星级评分，轮播图，拖拽上传等效果源码。 jquery小项目
js小项目练习
11-16
使用jquery写的一些小例子，比如菜单，星级评分，轮播图，拖拽上传等效果源码。
js小练习祝福墙效果
01-31
用js手写的祝福墙效果,层可以移动,可以看到效果,,请大家多多指教,,想和大家分享练习中的点点滴滴
原生javascript小练习，各种属性的用法
09-14
一些关于原生js小案例，如动画效果的实现，轮播图的做法，页面存储的属性等等
js小练习
鹿蹊zz的博客
06-09 909
目录1.用户输入一个数字，判定数字是奇数还是偶数，如果不是数字也要给出提示2.判定两个数字之间的最大值(用户输入两个数字，判定哪个数字大)3.成绩等级的判定4.用户输入一个年份，判定该年份有多少天5.制定学习计划表，输入星期几，能提示今天要学习什么课程6.出租车，起步价(2公里以内)为7元，超过2公里的按照每公里3元计算。要求根据路程计算费用7.判断闰年（闰年的条件是能被4整除，但不能被100整除；或能被400整除。）8.根据性别和体重计算输血量。女性体重不超过50kg的输血量为200毫升，否则250毫升；
学习js的几个小练习
xiaojing的博客
03-15 6252
第一个效果非常简单，就是五个按钮来简单地改变框框的样式，但是我还是做了有一会吧，先尝试用addEventListener()这个方法不管用，想用nodeValue来获取按钮的值也不管用，想将inputs[i].value的值传入点击事件方法也遇到问题。种种尝试之后，我发现在onclick事件中有一个this，它指向的是当前点击的一个节点，因此可以通过this.value来获取按钮的值，我觉得我的写
JS小练习
weixin_30699443的博客
03-07 97
var sum = 0; for (var i = 0;i <= 100;i++){ sum += i; } console.log(sum); 输出1-100所有数之和 for (var i = 1;i<=100;i++){ if(i % 2 === 0)...
Js的循环小练习
weixin_53056046的博客
02-15 965
1.循环录入五次成绩，求和 求平均值 求最大值 求最小值。 2.列出1-1000以内所有的奇数和偶数 3.鸡兔同笼：总共100个脚，各多少只 ？ 4.输出反向99乘法表 5.输出所有三位数中的水仙花数。（水仙花数：个位的三次方+十位的三次方+百位的三次方==这个数本身） 如：153 = 1*1*1 + 5*5*5 + 3*3*3 6.循环录入某学生5门课的成绩并计算平均分，如果某分数录入为负，停止录入并提示录入错误 7.有一个等式 12（）34（）56（）78（）9 = 59，括号...
JavaScript基础练习与解析
"JavaScript基础练习题，包括判断题和单选题，涵盖了变量定义、数据类型、字符串、常量、运算符以及变量命名规则等基础知识。" JavaScript是一种广泛用于网页和网络应用的脚本语言，它主要在浏览器环境中运行，为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值