关于html的问题如何解决
按照以下规范为网站编写代码。
该网站显示三个(3)输入文本字段('数字1', '数字2", 'number3), 两个(2)单选按钮(减去'，‘多重)，和两个(2)按钮。 每当用户单击“计算”按钮时，所选操作将被执行，结果将显示在“计算” 按钮下。
每当用户单击“重置”按钮时，在文本字段中输入的文本将被清除，之前的计算将被删除。
问题
例如:
1)用户插入三个数字15、2和3(在文本框中)，选择单选按钮“减去” ，然后点击“计算”。结果应该是
15-2-3=10
2)用户插入三个数字15、2和3(在文本框中)，选择单选按钮“乘法”，然后点击“计算”。结果应该是1523=90
3)用户插入三个数字15、2和3(在文本框中)， 用户没有选择任何单选按钮，并单击“计算” 。结果”请检查;
4)用户插入三个数字15、2和3(在文本框中)，然后单击“重置” 。插入文本字段中的文本(数字)将被删除(“calculate" 按钮下的计算按钮将被删除。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 300px;
height: 400px;
}
.container div {
display: flex;
}
.input {
width: 100%;
}
.input>input {
width: 99%;
margin: 0.1%;
height: 50px;
}
button {
height: 60px;
flex: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="input"><input type="text"></div>
<div>
<button>del</button><button>C</button>
</div>
<div>
<button>7</button><button>8</button>
<button>9</button><button>+</button>
</div>
<div>
<button>4</button><button>5</button>
<button>6</button><button>-</button>
</div>
<div>
<button>1</button><button>2</button>
<button>3</button><button>*</button>
</div>
<div>
<button>0</button><button>.</button>
<button>=</button><button>/</button>
</div>
</div>
<script>
let btns = document.getElementsByTagName('button');
let input = document.querySelector("input");
let len = btns.length;
let a,b,result,type;
for(let i = 0;i < len;i++) {
btns[i].addEventListener('click',()=> {
let val = btns[i].innerHTML;
let value = input.value;
if(val >= 0 && val <= 9 || val === "."
&& value.indexOf(".") === -1) {
input.value += val;
}
if(value === "" && val === ".") {
input.value = "";
}
if(value !== "") {
switch(val) {
case "del":
let str = value.substring(0,value.length - 1);
input.value = str;
break;
case "C":
input.value = "";
break;
case "+":
a = value;
input.value = "";
type = "+";
break;
case "-":
a = value;
input.value = "";
type = "-";
break;
case "*":
a = value;
input.value = "";
type = "*";
break;
case "/":
a = value;
input.value = "";
type = "/";
break;
case "=":
if(a !== undefined) {
b = value;
if(type === "+") {
result = parseFloat(a) + parseFloat(b);
}
if(type === "-") {
result = parseFloat(a) - parseFloat(b);
}
if(type === "*") {
result = parseFloat(a) * parseFloat(b);
}
if(type === "/") {
result = parseFloat(a) / parseFloat(b);
}
let newStr = result + "";
let arr = newStr.split(".");
input.value = arr.length === 2 ?
result.toFixed(2) : result;
}
break;
}
}
})
}
</script>
</body>
</html>
什么意思？没看懂
直接使用原生js获取输入框的值，当然要判断是否为数值，然后根据不同的按钮写不同的事件就行了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Js计算器</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.box {
margin: 100px auto;
width: 325px;
border: 1px solid black;
padding: 20px;
background-color: #BB5557;
border-radius: 10px;
}
.keys {
overflow: hidden;
padding: 10px;
}
.keys span {
border-radius: 50px;
float: left;
height: 30px;
width: 50px;
margin-left: 10px;
margin-top: 10px;
line-height: 30px;
text-align: center;
background: #ccc;
box-shadow: 2px 2px 2px 2px black; /*盒阴影x偏移量，y偏移量，Bulr模糊程度（半径）**/
}
.outShow p {
width: 95%;
display: block;
height: 80px;
border-radius: 20px;
/*border: 1px solid #ccc;*/
background: white;
color: black;
text-align: right;
line-height: 80px;
font-size: 40px;
}
.keys span:hover {
background: #ecf;
}
</style>
</head>
<body>
<div class="box">
<div class="outShow">
<p id="outShow"></p>
</div>
<div class="keys" id="keys"> <span>√</span> <span>±</span> <span>1/x</span> <span>x²</span> <span>x³</span> <span>7</span> <span>8</span> <span>9</span> <span>DEL</span> <span>C</span> <span>4</span> <span>5</span> <span>6</span> <span>÷</span> <span>*</span> <span>1</span> <span>2</span> <span>3</span> <span>+</span> <span>-</span> <span>0</span> <span>00</span> <span>.</span> <span>%</span> <span>=</span> </div>
</div>
</body>
<script>
var outShow=document.getElementById("outShow");
var keys=document.getElementById("keys");
var spans=keys.getElementsByTagName("span");
for(var i=0;i<spans.length;i++){
spans[i].onclick=function(){
var getvalue=spans[i].innerHTML;
dealCount(getvalue);
alert(getvalue);
}
}
function dealCount(count){
switch(count){
case "=":
break;
case "+":
break;
case "-":
break;
case "*":
break;
case "÷":
break;
default:
outShow.innerHTML=outShow.innerHTML+count.innerHTML;
break;
}
}
var outShow = document.getElementById("outShow");
var spans = document.getElementById("keys").getElementsByTagName("span");
var sNum1="";
var op="";
var isNeedClear=false;
//给所有按钮添加点击事件
for(i=0;i<spans.length;i++){
spans[i].onclick=function(){
dealCount(this.innerHTML);
}
}
//实现点击事件
function dealCount(inpuvalue){
switch(inpuvalue){
case "=":
var sNum2=outShow.innerHTML;
optionsall(sNum1,sNum2,op);
break;
case "x²":
case "x³":
case "%":
case "√":
case "1/x":
case "±":
case "+":
case "-":
case "*":
case "÷":
sNum1=outShow.innerHTML;
op=inpuvalue;
outShow.innerHTML=op;
isNeedClear=true;
break;
//清空键的功能实现
case "C":
outShow.innerHTML="";
break;
//删除键的功能实现
case "DEL":
delNum=outShow.innerHTML
outShow.innerHTML=delNum.substring(0,delNum.length-1);
break;
default:
if(isNeedClear==false){
outShow.innerHTML=outShow.innerHTML+inpuvalue;
}else{
outShow.innerHTML=inpuvalue;
isNeedClear=false;
}
}
}
//实现加减乘除功能
function optionsall(sNum1,sNum2,op){
switch(op){
case "+":
outShow.innerHTML=parseFloat(sNum1)+parseFloat(sNum2);
break;
case "-":
outShow.innerHTML=parseFloat(sNum1)-parseFloat(sNum2);
break;
case "*":
outShow.innerHTML=parseFloat(sNum1)*parseFloat(sNum2);
break;
case "÷":
outShow.innerHTML=parseFloat(sNum1)/parseFloat(sNum2);
break;
case "√":
outShow.innerHTML=Math.sqrt(sNum1);
break;
case "±":
outShow.innerHTML=(0-sNum1);
break;
case "1/x":
outShow.innerHTML=1/parseFloat(sNum1);
break;
case "%":
outShow.innerHTML=parseFloat(sNum1)%parseFloat(sNum2);
break;
case "x²":
outShow.innerHTML=parseFloat(sNum1)*parseFloat(sNum1);
break;
case "x³":
outShow.innerHTML=parseFloat(sNum1)*parseFloat(sNum1)*parseFloat(sNum1);
break;
}
}
</script>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div,ul,li{
text-align:center;
}
.input{ width:80px;}
ul{display:flex;}
li{
width:120px;
list-style:none;
}
</style>
</head>
<body>
<div>
<ul>
<li><input name="num1" class="input" id="num1" type="text" value="" /></li>
<li><input name="num2" class="input" id="num2" type="text" value="" /></li>
<li><input name="num3" class="input" id="num3" type="text" value="" /></li>
</ul>
<ul>
<li><input name="fangshi" type="radio" value="1" />减去<input name="fangshi" type="radio" value="2" />多重</li>
<li></li>
<li></li>
</ul>
<ul>
<li><input name="" onclick="jisuan()" type="button" value="计算" /></li>
<li><input name="" onclick="chongzhi()" type="button" value="重置" /></li>
<li></li>
</ul>
</div>
<div id="result"></div>
</body>
</html>
<script>
function jisuan(){
var num1=document.getElementById('num1').value;
var num2=document.getElementById('num2').value;
var num3=document.getElementById('num3').value;
var fangshi=0;
const tools = document.getElementsByName("fangshi");
for(var i = 0; i<tools.length;i++){
if(tools[i].checked) fangshi=tools[i].value;
}
switch(fangshi) {
case '1':
var result=num1-num2-num3;
document.getElementById('result').innerHTML=num1+'-'+num2+'-'+num3+'='+result;
break;
case '2':
var result=num1*num2*num3;
document.getElementById('result').innerHTML=num1+'*'+num2+'*'+num3+'='+result;
break;
default:
document.getElementById('result').innerHTML='请检查';
break;
}
}
function chongzhi(){
document.getElementById('num1').value='';
document.getElementById('num2').value='';
document.getElementById('num3').value='';
document.getElementById('result').innerHTML='';
}
</script>
纯手打的新手版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<input type="text" id="inputNumOne" placeholder="数字1">
<input type="text" id="inputNumTwo" placeholder="数字2">
<input type="text" id="inputNumThree" placeholder="数字3">
<input type="radio" name="operator" >减法
<input type="radio" name="operator" >乘法
<div>
<button onclick="reset()">重置</button>
<button onclick="cal()">计算</button>
<div id="content"></div>
<script type="text/javascript">
//计算
function cal(){
document.getElementById("content").innerHTML = ""
let inputNumOne = document.getElementById("inputNumOne").value
let inputNumTwo = document.getElementById("inputNumTwo").value
let inputNumThree = document.getElementById("inputNumThree").value
let operator = document.getElementsByName("operator")
if(operator[0].checked){
result = inputNumOne - inputNumTwo - inputNumThree
document.getElementById("content").append(result)
}else if(operator[1].checked){
result = inputNumOne * inputNumTwo * inputNumThree
document.getElementById("content").append(result)
}else{
document.getElementById("content").append("请检查")
}
}
//重置
function reset(){
document.getElementById("inputNumOne").value = ""
document.getElementById("inputNumTwo").value = ""
document.getElementById("inputNumThree").value = ""
document.getElementById("content").innerHTML = ""
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<input type="text" id="txt1" placeholder="输入文本字段"/>
<input type="text" id="txt2" placeholder="输入文本字段"/>
<input type="text" id="txt3" placeholder="输入文本字段"/>
</div>
<div>
<label><input type="radio" value="-" name="operator"/>减去</label>
<label><input type="radio" value="*" name="operator"/>乘法</label>
</div>
<div>
<button id="calc">计算</button>
<div id="result"></div>
</div>
<div>
<button id="reset">重置</button>
</div>
</body>
<script>
var $result = document.getElementById('result')
document.getElementById('calc').addEventListener('click', function(){
var txt1 = document.getElementById('txt1').value
var txt2 = document.getElementById('txt2').value
var txt3 = document.getElementById('txt3').value
if(!txt1 || !txt2 || !txt3){
return alert('请输入文本字段')
}
var operator = document.querySelector('input[name="operator"]:checked')
if(!operator){
$result.innerHTML = '请检查'
return alert('请检查')
}
operator = operator.value
var str = txt1 + operator + txt2 + operator + txt3
str += '=' + eval(str)
$result.innerHTML = str
})
document.getElementById('reset').addEventListener('click', function(){
document.getElementById('txt1').value = ''
document.getElementById('txt2').value = ''
document.getElementById('txt3').value = ''
$result.innerHTML = ''
document.querySelector('input[name="operator"]:checked').checked = false
})
</script>
</html>