JS+HTML

最新推荐文章于 2023-04-05 23:26:22 发布

紫夜✘

最新推荐文章于 2023-04-05 23:26:22 发布

阅读量264

点赞数

分类专栏：网页设计文章标签： html html5 javascript

本文链接：https://blog.csdn.net/Purple_night_/article/details/120257057

版权

网页设计专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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>

紫夜✘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS+HTML

JS用于做交互，但是不会改变界面。innerHTML:可以解析内容中HTML标签innerText:改变内容<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body>  <input type="button" v.
复制链接

扫一扫

专栏目录