响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例4-8 计算两个数的和

代码

doctype html>
<html>
<head>
<meta charset="utf-8">
<title>计算两个数的和title>
head>

<body>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" id="a" value="50" />
  +
  <input type="number" id="b" value="50" />
  =
  <output name="x">100output>
form>
body>
html>

上述代码中,
第9行代码绑定oninput事件,用来将计算的结果绑定到< input >标签;
第10、12行代码定义id值分别为a和b的数字输入框。

运行效果

响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例4-8 计算两个数的和_第1张图片
更改输入框中的数字,结果也将发生改变
响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例4-8 计算两个数的和_第2张图片
< output >标签用于定义不同类型的输出。

你可能感兴趣的:(html5,css3,前端)