html 和 js 相互调用

2018-03-01 11:18:20来源:https://www.jianshu.com/p/0414b2bec482作者:uniapp人点击

分享


学习了 html ,能够很快速的搭建出界面;学习了 js,能够处理各种界面元素的逻辑。二者需要结合起来才能玩转 html 。比如,下面一个简单界面的实现:





html和js相互调用

简单的登录操作界面通过 html 搭建,用户名和密码的判断通过js来实现。下面看详细的代码:


1 html 搭建界面


<body>
<form action="https://www.jianshu.com/u/5e618c136b79" onsubmit="return validateForm();">
<table>
<tr>
<td colspan="2">

</td>
</tr>
<tr>
<td>
用户名:
</td>
<td>
<input type="text" name="username">
</td>
</tr>
<tr>
<td>
密码:
</td>
<td>
<input type="text" name="pwd">
</td>
</tr>
<tr>
<td colspan="2" align="center" >
<input type="submit" value="登录">
</td>

</tr>
</table>
</form>
</body>

其中 form 为表单标签,其 action 属性指定了提交成功后跳转的界面,onsubmit 属性指定了点击提交后,是否调转到 action 指定的界面。上文通过 validateForm 函数来判定,调用函数时别忘了加小括号()。
2 逻辑处理


<script type="text/javascript">
function validateForm() {
var username = document.getElementById("username");
var pwd = document.getElementsByName("pwd")[0];
if (username.value=="") {
document.getElementById("tipMsg").innerHTML = "用户名不能为空"
return false;
}else{
document.getElementById("tipMsg").innerHTML = "";

}
if (pwd.value=="") {
document.getElementById("tipMsg").innerHTML = "密码不能为空"
return false;
}else{
document.getElementById("tipMsg").innerHTML = "";

}
document.getElementById("tipMsg").innerHTML = "登录成功"
return false;
}
</script>

可以通过调用 document 对象的 getElementById 或者 getElementsByName 方法来获取 html 中的界面元素, 然后通过 innerHTML 属性设置元素属性。


这是一个简单的Demo, 更详细的标签使用方式及其属性信息可以参考
html 的手册,资源在冬风破的github。


喜欢和关注都是对我的鼓励和支持~








最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台