如何实现下面点击按钮按钮的值显示在输出框，在输入框输入内容同步显示在输出框中，按照一定规则显示

自渡96 2017-11-21 09:01:33


点击一次按钮按钮的值显示在输出框中，在点击同一个按钮，输出框这个按钮的值消失，
点击一次按钮后，再在输入框中输入内容，同步显示在下面，下面输出框的值=按钮的值+输入框的值，再删除输入框的内容。下面输出框的值=按钮的值

附加要求


这部分按钮全部点击或者部分点击，显示顺序为：中35124



这部分按钮全部覅及或者部分点击，显示顺序为：下1 下7 下5 下13 下9（其余按顺序显示）


代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>title</title>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<style>
.button{
width: 14%;
height: 45px;
}
.select{background: #aab1ff;}
input{vertical-align: top;}
</style>
</head>
<body>
<div id="content" style="margin: 20px">
<legend>：</legend>
<div style="height: 25px;line-height: 25px;"></div>
<input class="button" type="button" value="左1" style="width: 14%;height: 45px" >
<input class="button" type="button" value="左2" style="width: 14%;height: 45px" >
<input class="number" type="text" style="width: 15%;height: 40px">~
<input class="number" type="text" style="width: 15%;height: 40px">
<input class="button" type="button" value="右1" style="width: 14%;height: 45px" >
<input class="button" type="button" value="右2" style="width: 14%;height: 45px" >
<div style="height: 25px;line-height: 25px;margin-top: 10px"></div>
<input class="button" type="button" value="左3" style="width: 14%;height: 45px" >
<input class="button" type="button" value="左4" style="width: 14%;height: 45px" >
<input class="number" type="text" style="width: 15%;height: 40px;margin-right: 3px">-
<input class="number" type="text" style="width: 15%;height: 40px;margin-left: 3px">
<input class="button" type="button" value="右3" style="width: 14%;height: 45px" >
<input class="button" type="button" value="右4" style="width: 14%;height: 45px" >
<hr style="margin: 20px 0">
<p style="margin: 10px 0"></p>
<legend>：</legend><br />
<input type="button" value="中" class="button"> ：
<input type="button" value="1" class="button">
<input type="button" value="2" class="button">
<input type="button" value="3" class="button">
<input type="button" value="4" class="button">
<input type="button" value="5" class="button">
<hr style="margin: 20px 0">
<legend>：</legend><br />

<input type="button" value="下1" class="button">
<input type="button" value="下2" class="button">
<input type="button" value="下3" class="button">
<input type="button" value="下4" class="button">

<br/>
<input type="button" value="下5" class="button">
<input type="button" value="下6" class="button">
<input type="button" value="下7" class="button">
<input type="button" value="下8" class="button">
<input type="button" value="下9" class="button">
<br/>
<input type="button" value="下10" class="button">
<input type="button" value="下11" class="button" style="width: 20%; height:45px">
<input type="button" value="下12" class="button" style="width: 20%; height:45px">
<input type="button" value="下13" class="button" style="width: 20%; height:45px">
<hr style="margin: 20px 0">
<div>
<legend>输出结果：</legend><br />
<input type="text" style="width: 99% ;height: 30px" id="text" value="">
<input type="button" value="确定" style="width: 100% ;height: 40px;margin-top: 10px">
</div>
</div>
</body>
...全文
927 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
自渡96 2017-11-27
  • 打赏
  • 举报
 回复
引用 8 楼 Ragin 的回复:

<script>
var data = [], _data= []
var sort1 = ["3","5","1","2","4"], sort2 = ["下1", "下7", "下5", "下13", "下9"]
$(function(){
	$("input[type='button']").click(function(){
		var val = $(this).val()
		var pos = $.inArray(val,data)
		if (pos >= 0) {
			data.splice(pos, 1);
			_data.splice($.inArray(val, _data), 1)
		} else {
			if ($.inArray(val, sort1) >= 0) {
				pushData(val, sort1)
			} else if ($.inArray(val, sort2) >= 0) {
				pushData(val, sort2)
			} else {
				data.push(val)
			}
		}
		show()
	})
})
function pushData(val, arr) {
	for (var i in _data) {
		data.splice($.inArray(i, data), 1)
	}

	if ($.inArray(val, _data) < 0) {
		_data.push(val)
		_data.sort(function(a, b) {
			return $.inArray(a, arr) - $.inArray(b, arr)
		})
		data = data.concat(_data)
	}
	console.log(data)
}


function show(){
	var obj = $('#output')
	obj.val("")
		for (key in data) {
			obj.val(obj.val() + data[key])
		}
}
</script>
引用 8 楼 Ragin 的回复:

<script>
var data = [], _data= []
var sort1 = ["3","5","1","2","4"], sort2 = ["下1", "下7", "下5", "下13", "下9"]
$(function(){
	$("input[type='button']").click(function(){
		var val = $(this).val()
		var pos = $.inArray(val,data)
		if (pos >= 0) {
			data.splice(pos, 1);
			_data.splice($.inArray(val, _data), 1)
		} else {
			if ($.inArray(val, sort1) >= 0) {
				pushData(val, sort1)
			} else if ($.inArray(val, sort2) >= 0) {
				pushData(val, sort2)
			} else {
				data.push(val)
			}
		}
		show()
	})
})
function pushData(val, arr) {
	for (var i in _data) {
		data.splice($.inArray(i, data), 1)
	}

	if ($.inArray(val, _data) < 0) {
		_data.push(val)
		_data.sort(function(a, b) {
			return $.inArray(a, arr) - $.inArray(b, arr)
		})
		data = data.concat(_data)
	}
	console.log(data)
}


function show(){
	var obj = $('#output')
	obj.val("")
		for (key in data) {
			obj.val(obj.val() + data[key])
		}
}
</script>
好像不能用的啊
自渡96 2017-11-22
  • 打赏
  • 举报
 回复
引用 6 楼 天际的海浪的回复:
[quote=引用 3 楼 qq_35626760 的回复:] [quote=引用 2 楼 jslang 的回复:] 是要按点击按钮的顺序输出吗？ 可以为每组按钮准备一个数组。点击按钮时判断数组中是否有按钮的值，有则从数组中删除，没有就在数组的最后添加按钮的值。 输出时直接输出数组即可。
引用 2 楼 jslang 的回复:
是要按点击按钮的顺序输出吗？ 可以为每组按钮准备一个数组。点击按钮时判断数组中是否有按钮的值，有则从数组中删除，没有就在数组的最后添加按钮的值。 输出时直接输出数组即可。
不是按照点击按钮的顺序输出，我想自定义输出的规则，比如我点击按钮1，按钮2，按钮3，输出的是按钮2，按钮3按钮1[/quote] 那你调整下上次给你的代码的输出顺序不就行了[/quote] 就是一直调整失败才来求救的。
Braska 2017-11-22
  • 打赏
  • 举报
 回复 

<script>
var data = [], _data= []
var sort1 = ["3","5","1","2","4"], sort2 = ["下1", "下7", "下5", "下13", "下9"]
$(function(){
	$("input[type='button']").click(function(){
		var val = $(this).val()
		var pos = $.inArray(val,data)
		if (pos >= 0) {
			data.splice(pos, 1);
			_data.splice($.inArray(val, _data), 1)
		} else {
			if ($.inArray(val, sort1) >= 0) {
				pushData(val, sort1)
			} else if ($.inArray(val, sort2) >= 0) {
				pushData(val, sort2)
			} else {
				data.push(val)
			}
		}
		show()
	})
})
function pushData(val, arr) {
	for (var i in _data) {
		data.splice($.inArray(i, data), 1)
	}

	if ($.inArray(val, _data) < 0) {
		_data.push(val)
		_data.sort(function(a, b) {
			return $.inArray(a, arr) - $.inArray(b, arr)
		})
		data = data.concat(_data)
	}
	console.log(data)
}


function show(){
	var obj = $('#output')
	obj.val("")
		for (key in data) {
			obj.val(obj.val() + data[key])
		}
}
</script>
自渡96 2017-11-21
  • 打赏
  • 举报
 回复
自己顶帖，求救
天际的海浪 2017-11-21
  • 打赏
  • 举报
 回复
引用 3 楼 qq_35626760 的回复:
[quote=引用 2 楼 jslang 的回复:] 是要按点击按钮的顺序输出吗？ 可以为每组按钮准备一个数组。点击按钮时判断数组中是否有按钮的值，有则从数组中删除，没有就在数组的最后添加按钮的值。 输出时直接输出数组即可。
引用 2 楼 jslang 的回复:
是要按点击按钮的顺序输出吗？ 可以为每组按钮准备一个数组。点击按钮时判断数组中是否有按钮的值，有则从数组中删除，没有就在数组的最后添加按钮的值。 输出时直接输出数组即可。
不是按照点击按钮的顺序输出，我想自定义输出的规则，比如我点击按钮1，按钮2，按钮3，输出的是按钮2，按钮3按钮1[/quote] 那你调整下上次给你的代码的输出顺序不就行了
自渡96 2017-11-21
  • 打赏
  • 举报
 回复
引用 2 楼 jslang 的回复:
是要按点击按钮的顺序输出吗？ 可以为每组按钮准备一个数组。点击按钮时判断数组中是否有按钮的值，有则从数组中删除，没有就在数组的最后添加按钮的值。 输出时直接输出数组即可。
最上面的四个输入框输入的内容需要在输出时自动增加一个“-”在输入内容的后面 例如输入“12”，则输出“12-”
自渡96 2017-11-21
  • 打赏
  • 举报
 回复
引用 2 楼 jslang 的回复:
是要按点击按钮的顺序输出吗？ 可以为每组按钮准备一个数组。点击按钮时判断数组中是否有按钮的值，有则从数组中删除，没有就在数组的最后添加按钮的值。 输出时直接输出数组即可。
文中附加要求便是我要的规则，除去这些按钮外，其余按钮按照点击顺序输出
自渡96 2017-11-21
  • 打赏
  • 举报
 回复
引用 2 楼 jslang 的回复:
是要按点击按钮的顺序输出吗？ 可以为每组按钮准备一个数组。点击按钮时判断数组中是否有按钮的值，有则从数组中删除，没有就在数组的最后添加按钮的值。 输出时直接输出数组即可。
引用 2 楼 jslang 的回复:
是要按点击按钮的顺序输出吗？ 可以为每组按钮准备一个数组。点击按钮时判断数组中是否有按钮的值，有则从数组中删除，没有就在数组的最后添加按钮的值。 输出时直接输出数组即可。
不是按照点击按钮的顺序输出，我想自定义输出的规则，比如我点击按钮1，按钮2，按钮3，输出的是按钮2，按钮3按钮1
天际的海浪 2017-11-21
  • 打赏
  • 举报
 回复
是要按点击按钮的顺序输出吗？ 可以为每组按钮准备一个数组。点击按钮时判断数组中是否有按钮的值，有则从数组中删除，没有就在数组的最后添加按钮的值。 输出时直接输出数组即可。
html 输入框联动显示,js下拉选择框与输入框联动实现添加选中值到输入框的方法...
本文实例讲述了js下拉选择框与输入框联动实现添加选中值到输入框的方法。分享给大家供大家参考。具体如下：这里演示js下拉选择框与输入框联动，直接添加选中值到输入框中的效果。这种效果相信不少朋友见到过吧，省去...
Vue3 - 详细实现点击文字或按钮后 “变成输入框“ 进行文本编辑，同时能保存修改和取消编辑状态功能，文本旁边有笔图标点击后文字变成 input 框可对文字编辑修改，最新解决方案（详细示例代码教程）
vue文字点击变为输入框能修改，内容变成input可以修改，vue3点击按钮后旁边的文字变为可编辑，组件插件，教程，使文本变成可编辑的效果，点击取消复原，失去焦点还原，取消后恢复成原来的样子，如何实现点笔icon图标...
一个输入框输入内容，另一个输入框同步内容
 function cop(){  var str=document.getElementById("input1").value;  document.getElementById("input2").value = str;...输入框1：  ()" oninput="cop()"/> 输入框2：   </html>
vue.js输入框输入值内容实时跟着变化
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&...width=device-width, user-scalable=no, initial-
vue数据同步输入框处理显示
JavaScript

87,993

社区成员

224,694

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章