如何使用css，把div设置为一个椭圆容器,在做html页面开发时，我们一般都是使用div来做容器的，如果你需要一个椭圆形的容器，我们可以使用div来实现的，下面来看一下。......
html怎么读取输入框的值并进行运算
来源：互联网
2023-03-16 19:07:35 349
html怎么读取输入框的值进行计算,此例以jquery框架为基础进行编写
工具/原料
- 电脑
- 编写工具(webstrom)
- jquery框架
方法/步骤
html:
h1>计算两个值之和/h1>
input type="text" value=""/>
span> /span>
input type="text" value=""/>
span>=/span>
span class="total">/span>
button class="btn" onclick="total()">计算/button>
css:
h1{
text-align: center;
line-height: 20px;
font-size: 16px;
}
input {
width: 30%;
height: 20px;
line-height: 20px;
border: 1px solid #2994CA;
}
span{
display: inline-block;
width: 10%;
text-align: center;
}
.total{
color: red;
}
.btn{
width: 20%;
background: #2994CA;
color: #fff;
margin: 20px auto;
display: block;
height: 30px;
border-radius: 5px;
}
js:
function total(){
var number = 0;
//获取所有的input,遍历获取值,进行相加
$("input").each(function(){
number = parseFloat($(this).val());
});
//将相加之和,显示到相应的位置
$(".total").html(number)
}
注意事项
- 遍历input所得的值,要先转换类型
- 定义和 var number时要等于0,不能等于"",否则,相加,会变成字符串相加,2 3=23
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： HTML
相关文章
- 详细阅读
- 详细阅读
-
HTML5创作工具，MAKA 2.0史上最全操作指南详细阅读
HTML5创作工具，MAKA 2.0史上最全操作指南,超过15000种模板组合。还怕你没有发挥的空间吗？MAKA（中文：码卡）作为中国最早推出移动端卡片式交互模式的创新者，随着HTML5技术的日渐成熟......
2023-03-16 414 HTML
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/ba274f598540102a99638a11b142a07aa110c5d4.jpg)