鼠标点击轮换文字

最新推荐文章于 2021-11-05 17:25:12 发布

不负好时光丶砥砺新时代

最新推荐文章于 2021-11-05 17:25:12 发布

阅读量106

点赞数

本文链接：https://blog.youkuaiyun.com/Hello_yhr/article/details/119644227

版权

本文介绍了如何通过JavaScript实现鼠标点击后文字内容轮换的效果，包括基本原理、代码实现及应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  // 首先获取两个父元素的节点
       var select=document.getElementsByTagName('select');
       
        //然后获取按钮的元素节点
       var  btn=document.getElementsByTagName('button');
       // 获取option元素节点
       var option=document.getElementsByTagName('option');
        //利用循环获取每一个的btn
        
            btn[0].onclick=function(){
            // 当用户选中后点击移动换过来
            // 每个都可以选中需要用循环
            var opt=[];
            for(var i=0;i<select[0].children.length;i++){
                // 判断用户选中了那几个名字
                if(select[0].children[i].selected){
                    select[0].children[i].selected=false;
                    // console.log( select[0].children[i]);
                    opt.push(select[0].children[i]);
                }
            }
            move(opt,select[1]);
                // if(select[0].length!=false){
                //     select[1].appendChild(num[0]);
                // }
                // console.log(num);
            }
            
            btn[1].onclick=function(){
                var opt=[];
            for(var i=0;i<select[0].children.length;i++){

                    opt.push(select[0].children[i]);
                }
                move(opt,select[1]);
            }
            // 添加点击事件
            btn[2].onclick=function(){
                var opt=[];
            for(var i=0;i<select[1].children.length;i++){
                // 判断用户选中了那几个名字
                if(select[1].children[i].selected){
                    select[1].children[i].selected=false;
                    // console.log( select[0].children[i]);
                    opt.push(select[1].children[i]);
                }
            }
            move(opt,select[0]);
            }
            btn[3].onclick=function(){
                var opt=[];
            for(var i=0;i<select[1].children.length;i++){
                    opt.push(select[1].children[i]);
                }
                move(opt,select[0]);
            }
            function move(opt,select){
              for(var i=0;i<opt.length;i++){
                select.appendChild(opt[i]);
              }
            }