JS用于做交互,但是不会改变界面。
innerHTML:可以解析内容中HTML标签
innerText:改变内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- onclick:事件 -->
<input type="button" value="点我试试" onclick="tt();" />
<div id="hello"></div>
</body>
</html>
<script>
function tt(){
alert("HelloWorld");
//1、要找到对应的div
var ele=document.getElementById("hello");
//2、向div中写入字符串:你好HTML
// 属性赋值
// innerText:改变内容
// ele.innerText="你好<span style='color:red;font-size=40px;'>HTML</span>";
// innerHTML:可以解析HTML中的标签。
ele.innerHTML="你好<span style='color:red;font-size:40px;'>HTML</span>";
}
</script>=
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
用户名:<input id="username" type="text" size="12" /><br />
密码:<input id="pwd" type="password" size="12" /><br />
<input type="button" value="登录" onclick="dologin()" />
<input type="button" value="重置" onclick="doReset()" />
<div id="msg"></div>
</body>
</html>
<script>
//登录
function dologin(){
//1、获得用户名和密码的文本框的值,并且保存在相应的变量中
name=document.getElementById("username").value;//获得用户名文本框 .value是获得文本框和文本域中的值
password=document.getElementById("pwd").value;//获得密码文本框
//2、通过条件判断判断用户输入的值是否是admin和123
if(name=="admin"&&password=="123"){
//3、如果输入正确,则改变div的内容
document.getElementById("msg").innerHTML="<span style='color: red;font-size: 40px;'>我还没有进入主页的功能,你被骗了哈哈哈</span>";
}else{
//4、如果输入错误,则弹出对话框提示
alert("用户名或者密码错误!");
}
}
//重置
function doReset(){
document.getElementById("username").value="";
document.getElementById("pwd").value="";
}
</script>