美文网首页
移动选项框

移动选项框

作者: 陈庆香 | 来源:发表于2018-08-01 17:58 被阅读0次

function add(){

//获取文本框的值

var ipt=doument.createElementById('ipt');

var text=ipt.vlaue;

//创建li

var li=doument.createElement('li');

//判断text是否为空

if(!text){

alert('不能为空');

return;

}

//填充li的内容

li.linnerHTML=`<span>${text}</span><button onclick='move();'  class='margin-left-30'>-></button>`;

//找到li的类型

li.className='item';

//清空文本框

ipt.value='';

//把li添加到list1中

doument.getElementById('list1').appendchild(li);

}

//添加move的点击事件

function move(){

//找到当前按钮

var button=event.target;

//声明按钮的值

var btnText=button.innerText;

//通过button找到li

var li=button.parenNode;

//判断按钮的值是否为->

if(btnText==='->'){

//改变button的值

button.innerText = '<-';

//获取span的值

var span=button.previousElementSibling;

//清空button的类型

button.className='';

//添加span的类型

span.className='margin-left-30';

//把span排到button的前面

li.insertBefore(span,button);

//把li添加到list2里面;

doument.getElementById('list2').appendchi(li);

}else{

button.innerText = '->';

var span = button.nextElementSibling;

button.className = 'margin-left-30';

span.className = '';

li.insertBefore(span,button);

document.getElementById('list1').appendChild(li);

}

funtion enter(){

if(event.keyCode===13){

        add();

}

}

}

相关文章

  • 移动选项框

    function add(){ //获取文本框的值 var ipt=doument.createElementBy...

  • Day8-作业

    1、下拉框实现左边移动选项到右边,右边移动选项到左边 2、飘动广告 3、倒计时,距离国庆节还有多少天、小时、分钟、...

  • js -- 操作练习

    1、下拉框实现左边移动选项到右边,右边移动选项到左边 2、飘动广告 参考3、倒计时,距离国庆节还有多少天、小时、分...

  • js应用

    1、下拉框实现左边移动选项到右边,右边移动选项到左边 这个可以实现多选 2、飘动广告 3、倒计时,距离国庆节还有多...

  • input的代码类

    账号框 密码框 下拉列表 选项1 选项2 选项3 单选 男: 女: 多选 A B C 按钮...

  • HTML 表单应用

    账号框 密码框 下拉列表 选项1 选项2 选项3 单选 男: 女: 多选 A B C...

  • 表单应用

    账号框 密码框 下拉列表 选项1 选项2 选项3 单选 男: 女: 多选 A B C 按钮 或

  • fiddler会话框查看请求类型get/post

    一、添加会话框菜单 1.点会话框菜单(箭头位置),右键弹出选项菜单 2.选择Customize columns选项...

  • JList和JComboBox下拉选项框,列表选项框

    当出现个性化需求时可以重写AbstractListModel进行个性化开发 NumberListModel Num...

  • 适配性强的移动端select选项框

    需求来源 原生的select有很多样式不能随意改动,比如不能设置居中不生效,select框长度不能根据内容自适应等...

网友评论

      本文标题:移动选项框

      本文链接:https://www.haomeiwen.com/subject/vlvrvftx.html