方向：rtl用于滚动条但文本是否被添加到左侧？

时间：2016-06-11 08:37:26

标签： javascript html css

我试过制作一个简单的计算器。现在它只是在屏幕上显示数学表达式。点击数字后，文字会添加我想要的内容。但是在按下任何操作符时，操作符将被添加到数字的左侧，然后在操作符的左侧添加下一个数字。

我希望表达式应该像在现实世界中一样从左到右，并且在溢出的情况下，滚动条应该从右边开始。

var evt = document.querySelectorAll(".evt");
var screenText = document.getElementById("screentext");
var screenText2 = document.getElementById("screentext2");
var num = function(e) {
	screenText.innerHTML += e.currentTarget.textContent;
	screenText2.innerHTML += e.currentTarget.textContent;
}
var sign = function(e) {
	screenText.innerHTML += " " + e.currentTarget.textContent + " ";
	screenText2.innerHTML = "";
}

for(var i = 0 ; i < 10 ; i++) {
	evt[i].addEventListener("click", num);
}
for(var i = 10 ; i < 14 ; i++) {
	evt[i].addEventListener("click", sign);
}
#calcbody {
    width: 400px;
	height: 600px;
	border: 2px solid black;
}
#screen {
	width: 90%;
	height: 12%;
	border: 1px groove black;
	margin: 4% 5%;
	text-align: right;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	direction: rtl;
}
#screen h1 {
	margin-top: 24px;
	margin-right: 5px;
	line-height: 22px;
}
#screen2 {
	width: 90%;
	height: 5%;
	border: 1px groove black;
	margin: 4% 5%;
}
#screentext2 {
	box-sizing: border-box;
	display: inline-block;
	height: 100%;
	width: 230px;
	float: right;
	text-align: right;
	margin: 0;
	padding-left: 2px;
	padding-top: 6px;
}
#current {
	box-sizing: border-box;
	float: left;
	height: 100%;
	display: inline-block;
	width: 130px;
	margin: 0;
	padding-left: 2px;
	padding-top: 5px;
	font-weight: bold;
}
.flt {
	float: left;
	width: 20%;
	height: 13%;
	border: 1px solid black;
	box-sizing: border-box;
	margin-left: 4%;
	margin-bottom: 2%;
	position: relative;
}
.flt2 {
	float: left;
	border: 1px solid black;
	box-sizing: border-box;
	width: 44%;
	height: 13%;
	margin-left: 4%;
	margin-bottom: 2%;
	position: relative;
}
.flt3 {
	float: left;
	border: 1px solid black;
	box-sizing: border-box;
	width: 92%;
	height: 13%;
	margin-left: 4%;
	position: relative;
}
.keys {
    text-align: center;
}
.back {
	background-color: red;
}
.evt:hover {
	cursor: pointer;
	background-color: lime;
}
.evt:active {
	background-color: #00cc00;
}
<html>
    <head>
	    <link rel="stylesheet" href="style.css">
	</head>
	<body>
	    <div id="calcbody">
		    <div id="screen"><h1 id="screentext"></h1></div>
		    <div id="screen2"><p id="current">Current Number :</p><p id="screentext2"></p></div>
			<div id="num1" class="flt evt"><h1 class="keys">1</h1></div>
			<div id="num2" class="flt evt"><h1 class="keys">2</h1></div>
			<div id="num3" class="flt evt"><h1 class="keys">3</h1></div>
			<div id="num4" class="flt evt"><h1 class="keys">4</h1></div>
			<div id="num5" class="flt evt"><h1 class="keys">5</h1></div>
			<div id="num6" class="flt evt"><h1 class="keys">6</h1></div>
			<div id="num7" class="flt evt"><h1 class="keys">7</h1></div>
			<div id="num8" class="flt evt"><h1 class="keys">8</h1></div>
			<div id="num9" class="flt evt"><h1 class="keys">9</h1></div>
			<div id="num0" class="flt evt"><h1 class="keys">0</h1></div>
			<div id="plus" class="flt evt"><h1 class="keys">+</h1></div>
			<div id="minus" class="flt evt"><h1 class="keys">-</h1></div>
			<div id="multiply" class="flt2 evt"><h1 class="keys">*</h1></div>
			<div id="divide" class="flt2 evt"><h1 class="keys">/</h1></div>
			<div id="equal" class="flt3 evt"><h1 class="keys">=</h1></div>
		</div>
	</body>
	<script src="script.js"></script>
</html>

3 个答案:

答案 0 :(得分：1)

我删除了rtl并添加了screenText.parentElement.scrollLeft = screenText.parentElement.scrollWidth;以使滚动从右侧开始

var evt = document.querySelectorAll(".evt");
var screenText = document.getElementById("screentext");
var screenText2 = document.getElementById("screentext2");

for(var i = 0 ; i < 10 ; i++) {
  evt[i].addEventListener("click", function(e) {
    screenText.innerHTML += e.currentTarget.textContent;
    screenText2.innerHTML += e.currentTarget.textContent;
    screenText.parentElement.scrollLeft = screenText.parentElement.scrollWidth;
  });
}
for(var i = 10 ; i < 14 ; i++) {
  evt[i].addEventListener("click", function(e) {
    screenText.innerHTML += " " + e.currentTarget.textContent + " ";
    screenText2.innerHTML = "";
    screenText.parentElement.scrollLeft = screenText.parentElement.scrollWidth;
  });
}
#calcbody {
    width: 400px;
	height: 600px;
	border: 2px solid black;
}
#screen {
	width: 90%;
	height: 12%;
	border: 1px groove black;
	margin: 4% 5%;
	text-align: right;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
}
#screen h1 {
	margin-top: 24px;
	margin-right: 5px;
	line-height: 22px;
}
#screen2 {
	width: 90%;
	height: 5%;
	border: 1px groove black;
	margin: 4% 5%;
}
#screentext2 {
	box-sizing: border-box;
	display: inline-block;
	height: 100%;
	width: 230px;
	float: right;
	text-align: right;
	margin: 0;
	padding-left: 2px;
	padding-top: 6px;
}
#current {
	box-sizing: border-box;
	float: left;
	height: 100%;
	display: inline-block;
	width: 130px;
	margin: 0;
	padding-left: 2px;
	padding-top: 5px;
	font-weight: bold;
}
.flt {
	float: left;
	width: 20%;
	height: 13%;
	border: 1px solid black;
	box-sizing: border-box;
	margin-left: 4%;
	margin-bottom: 2%;
	position: relative;
}
.flt2 {
	float: left;
	border: 1px solid black;
	box-sizing: border-box;
	width: 44%;
	height: 13%;
	margin-left: 4%;
	margin-bottom: 2%;
	position: relative;
}
.flt3 {
	float: left;
	border: 1px solid black;
	box-sizing: border-box;
	width: 92%;
	height: 13%;
	margin-left: 4%;
	position: relative;
}
.keys {
    text-align: center;
}
.back {
	background-color: red;
}
.evt:hover {
	cursor: pointer;
	background-color: lime;
}
.evt:active {
	background-color: #00cc00;
}
<html>
    <head>
	    <link rel="stylesheet" href="style.css">
	</head>
	<body>
	    <div id="calcbody">
		    <div id="screen"><h1 id="screentext"></h1></div>
		    <div id="screen2"><p id="current">Current Number :</p><p id="screentext2"></p></div>
			<div id="num1" class="flt evt"><h1 class="keys">1</h1></div>
			<div id="num2" class="flt evt"><h1 class="keys">2</h1></div>
			<div id="num3" class="flt evt"><h1 class="keys">3</h1></div>
			<div id="num4" class="flt evt"><h1 class="keys">4</h1></div>
			<div id="num5" class="flt evt"><h1 class="keys">5</h1></div>
			<div id="num6" class="flt evt"><h1 class="keys">6</h1></div>
			<div id="num7" class="flt evt"><h1 class="keys">7</h1></div>
			<div id="num8" class="flt evt"><h1 class="keys">8</h1></div>
			<div id="num9" class="flt evt"><h1 class="keys">9</h1></div>
			<div id="num0" class="flt evt"><h1 class="keys">0</h1></div>
			<div id="plus" class="flt evt"><h1 class="keys">+</h1></div>
			<div id="minus" class="flt evt"><h1 class="keys">-</h1></div>
			<div id="multiply" class="flt2 evt"><h1 class="keys">*</h1></div>
			<div id="divide" class="flt2 evt"><h1 class="keys">/</h1></div>
			<div id="equal" class="flt3 evt"><h1 class="keys">=</h1></div>
		</div>
	</body>
	<script src="script.js"></script>
</html>

答案 1 :(得分：0)

试试这个：

#screentext {
    direction: ltr;
}

你的ltr定义在#screen div上，而不是在h1（#scrrentext）中。

答案 2 :(得分：0)

删除 rtl 并添加 ltr ，如下所示。

#screen {
width: 90%;
height: 12%;
border: 1px groove black;
margin: 4% 5%;
text-align: right;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
direction: ltr;
}
相关问题
最新问题