input元素中新增表单验证效果，在输入的内容不符合给定格式时弹出信息提示
AsNumber属性：可以利用该属性制作简易的计算器
<script>
function fun(){
var n1=document.getElementById("num1").valueAsNumber;
var n2=document.getElementById("num2").valueAsNumber;
var n3=document.getElementById("greetings");
var result=document.getElementById("result");
// if(n3.value=="+")
result.valueAsNumber=n1+n2;
// }
// else if (n3.value=="-"){
// result.valueAsNumber=n1-n2;
// }
// else if (n3.value=="*"){
// result.valueAsNumber=n1*n2;
// }
// else(n3.value=="/"){
// result.valueAsNumber=n1/n2;
// }
}
</script>
<form >
<input type="number" id="num1" value="50" min="10" max="100" step="5">
<!-- <input type="text" name="greeting" list="greetings">
<datalist id="greetings" style="display:none">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</datalist> -->
+
<input type="number" id="num2" value="50" min="10" max="100" step="5">
=
<input type="number" id="result" readonly>
<input type="button" value="计算" onclick="fun()">
</form>
color属性：制作一个简易的颜色选择器并用改颜色选择器来设置网页背景色
<input type="color" onchange="document.body.style.backgroundColor=document.getElementById('currentColor').textContent=this.value;"
<span id="currentColor"></span>
output属性：制作一个滚动条，滚动条后面的数字跟随滚动条变化
<script>
function num_change(){
var number=document.getElementById("range").value;
document.getElementById("output").value=number;
}
</script>
<form id="testform">
<input id="range" type="range" value="10" min="0" max="100" step="5" onclick="num_change()">
<output id="output">10</output>
</form>
表单的验证：下面会以Email验证为例
<script>
function check(){
var email=document.getElementById("email");
if(email.value==""){
alert("请输入email地址");
return false;
}
else if(!email.checkValidity()){
alert("请输入正确的email地址");
return false;
}
}
</script>
<form id="testform" onsubmit="check()" novalidate="true">
<labal for="email">Email</labal>
<input type="email" name="email" id="email">
<br />
<input type="submit" value="提交">
</form> |
|
收藏
淘帖
踩
