用javaScript操作网页的固定套路四部曲

前言

用javaScript操作网页是有固定套路的，以一个简单的检查文本框输入的用户名是否已经存在的例子呈现这固定的四部操作

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、用javaScript操作网页四部曲

二、完整代码

1.HTML代码

代码如下（示例）：这里用最简单的方式

<form action="">
        用户名: <input id="check_text" type="text"value=""
        placeholder="手机或邮箱" name='uname' >
        <input type="button" id="btn" value="验证" ><br>
        <span id="msg"></span>
 </form>

2.JavaScript代码

代码如下（示例）：

 btn.onclick=function(){
            if(check_text.value==='tom'){
                msg.innerHTML='用户名已经存在';
            }else{
                msg.innerHTML='欢迎使用';
            }
        }

三、具体步骤

1.获取标签元素

代码如下（示例）：这里用最简单的方式

 alert(btn);
 alert(check_text);
 alert(msg);

2.为标签元素绑定操作事件

代码如下（示例）：

btn.onclick=function(){}

3.计算或修改数据

  if(check_text.value==='tom'){}

4.显示结果

代码如下（示例）：

 if(check_text.value==='tom'){
                msg.innerHTML='用户名已经存在';
            }else{
                msg.innerHTML='欢迎使用';
            }

结果

---

总结

例如：这四个步骤是js操作网页的固定套路,不管写什么都是这个步骤,你写一个轮播图也是这步骤.