JS入门案例

最新推荐文章于 2022-10-27 17:27:05 发布

浪里小黑狼

最新推荐文章于 2022-10-27 17:27:05 发布

阅读量115

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/qq_41398448/article/details/83382259

版权

JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS入门</title>
	<script>
	 <!--弱遍历类型-->
		var i =1;
		var j="zhangshiqian";  //String
		
		alert("list".length)
		var str1=111;
		var str2="111";
		
		//alert(str1==str2);
		
		//向页面输出内容
		//document.write("张小黑");
	</script>
</head>

<body>
</body>
</html>

alert 是弹窗动作

alert("list".length) 输出字符长度

alert(str1==str2) 判断两个值是否相等相等输出

document.write("张小黑"）在页面输出

console.log("我在控制台输出了"); console.log 表示在控制台内输出字符在页面不显示

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>点击弹框</title>
	<!--
		1.确定事件，点击事件
		2.通常事件都会触发一个函数
		3.函数里面通常会去操作页面，做一些交互动作
	-->
	<script>
	function dianwo(){
		alert("我被点击了");
	}
	</script>
</head>

<body>
	<input type="button" value="点我，弹窗" onclick="dianwo()"/>
</body>
</html>

点击按钮后出现弹窗

文本替换

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文本替换</title>
	<!--
		1.确定事件，点击事件
		2.通常事件都会触发一个函数
		3.函数里面通常会去操作页面，做一些交互动作
	-->
	<script>
	function dianwo(){
		//1.首先要获得这个div
		var div =document.getElementById("div1")
		div.innerHTML="<font color='red'>内容已经被替换</font>";
		//div.innerText="<font color='red'>内容已经被替换</font>";
	}
	</script>
</head>

<body>
	<input type="button" value="点我，修改DIV内容" onclick="dianwo()"/>
	<div id="div1">
	这里的内容一会会被替换掉
	</div>
</body>
</html>

刚开始的页面

div.innerHTML

点击后

div.innerText

JS数据简单的校验

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			1.校验用户名, 长度不能小于6位
				1.确定事件: 提交事件 onsubmit
				2.事件要触发函数 checkForm()
				3. 函数中要去做一些校验
		-->
		<script>
			function checkForm(){
				
				//获取用户输入的内容
				var input1 = document.getElementById("username");
//				alert(input1.value);
				var uValue = input1.value;
				if(input1.value.length >= 6){
					
				}else{
					alert("对不起,用户名太短! 需要输入6位数以上")
					return false;
				}
				
				//邮箱的校验
				//获取用户输入的邮箱的值
				var email = document.getElementById("email")
				var uEmail = email.value;
				if(/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(uEmail)){
					alert("邮箱格式输入有误");
				}else{
					alert("邮箱格式输入正确")
					return false;
				}
				
				return true;;
			}
		</script>
		
	</head>
	<body>
		<form action="点击弹框.html" onsubmit="return checkForm()" >
			用户名:<input type="text" id="username" /><br />
			密码:<input type="password" id="password" /><br />
			邮箱:<input type="text" id="email" /><br />
			
			<input type="submit" value="提交" />
		</form>
	</body>
</html>

   if(input1.value.length >= 6){

               }else{
                   alert("对不起,用户名太短! 需要输入6位数以上")
                   return false;
               }

if(/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(uEmail)){
                   alert("邮箱格式输入有误");
               }else{
                   alert("邮箱格式输入正确")
                   return false;
               }

浪里小黑狼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS入门案例

&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;JS入门&lt;/title&gt; &lt;script&gt; &lt;!--弱遍历类型--&gt; var i =1; var j="zhangshiq
复制链接

扫一扫