JavaScript

最新推荐文章于 2024-09-11 15:33:18 发布

duanjianhua666

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量136

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/duanjianhua666/article/details/128364832

版权

JavaScript

for

			/*for (var i =0;i<=5;i++) {*/
				/* DOM 文档提供的一组函数方法 document*/
				/*document.write("hello word");
				alert(i);
			}*/
			//打星星   需要用嵌套循环  一个打印行数 另一个循环 打印列数
			/*最外层for 循环了一次 里面又有一个for 它里面要去循环10次
			 最外层j++ j的变量发生了改变  进入内层for 重新进i的循环 10次*/
			for (var j=0;j<10;j++) {//外层控制的行数
				for (var i=0;i<10;i++) {//控制的是列数
					
					document.write("*");
					break;
					
				}
				document.write("<br/>");
			}
			/*打印三角形*/
			for (var j=0;j<10;j++) {
				for (var i=0;i<j;i++) {
					document.write("*")
				}
				document.write("<br/>");
			}

window.location.href=“index.html”

		function toIndex(){
			//第一种
			//window.location.href="index.html";
			location="index.html";
			
		}
		<input type="button" id="" value="点击跳转页面" onclick="toIndex()"/>

while

			/*whule () 判断条件 先判断后执行 */
			/*var i=0;
			while(i<5){
				document.write("hello word");
				i++;
			}*/
			/*我不管你后条件是否成立我先运行 先执行后判断  最少执行一次*/
			var i =0;
			do{
				document.write("hello word");
				i++;
			}while (i>5)

元素隐藏和显示

			function ch1(){
				document.getElementById("div2").style.display="block";
			}
			function ch2(){
				document.getElementById("div2").style.display="none";
			}
			<!--鼠标移入移出事件-->
			<div id="div1" onmouseover="ch1()" onmouseout="ch2()" >
				显示div2
			</div>
			<div id="div2">
				我就是div2
			
			</div>

加减

		<input type="button" id="" value="-" onclick="push()"/>
		<input type="text" id="num" value="1" />
		<input type="button" id="" value="+" onclick="add()"/>
		<script type="text/javascript">
			function add(){
				//步骤1：获取当前的数量，
				var num = document.getElementById("num").value;
				//步骤2：自加1
				num++;
				//步骤3:更新当前的数量
				document.getElementById("num").value=num;
			}
			function push(){
				//步骤1：获取当前的数量，
				var num = document.getElementById("num").value;
				//步骤2：自减1
				num--;
				//步骤3:更新当前的数量
				document.getElementById("num").value=num;
			}
		</script>

改变元素内容

		<div id="div1">
			1111
		</div>
		<input type="button" id="" value="点击改变内容" onclick="ch1()"/>
		<script type="text/javascript">
			function ch1(){
				//方式1
				//document.getElementById("div1").innerText="<h1>2022-12-17</h1>";
				//方式2
				document.getElementById("div1").innerHTML="<h1>2022-12-17</h1>";
			}
		</script>

改变元素样式

		<div id="div1">
			1111
		</div>
		<input type="button" id="" value="点击改变样式" onclick="ch1()" />
		<style type="text/css">
			.aa {
				background: red;
				color: green;
				font-size: 36px;
				background: 1px scroll black;
			}
		</style>
		<script type="text/javascript">
			function ch1() {
				//方式1
				//				document.getElementById("div1").style.background="red";
				//				document.getElementById("div1").style.color="red";
				//document.getElementById("div1").style.fontSize="36px";
				//方式2
				document.getElementById("div1").className = "aa";
			}
		</script>

系统函数

			var num = 10;
			/*isNaN判断当前变量中的参数是否为非数字*/
			var res = isNaN(num);
			//alert(res);
			
			/*parseInt parseFloat 将字符串转换成数字类型*/
			var str = "123";
			var num1 = parseInt(str);

			alert(typeof(num1));

自定义函数

		<input type="button" id="" value="点我有惊喜" onclick="showHello()" />
		<script type="text/javascript">
			function showHello(){
				for (var i=0;i<5;i++) {
					document.write("hello<br/>")
				}
			}
		</script>

自定义带参函数

			function showHello(count){
				for (var i=0;i<count;i++) {
					document.write("hello<br/>")
				}
			}
			<input type="button" id="" value="点我有惊喜" onclick="showHello(50)" />

##自定义带参函数２

			function showHello(count){
				for (var i=0;i<count;i++) {
					window.document.write();
				}
			}
			<input type="button" id="" value="点我有惊喜" onclick="showHello(prompt('请输入您要输出的次数',''))" />

获取元素中的数据

		<input type="text" name="" id="test" value="" onblur="text()" />
		<script type="text/javascript">
			function text(){
				var a = document.getElementById("test").value;
				alert(a);
			}
		</script>

表单验证

<head>
			<style type="text/css">
				span{color: red;}
			</style>
		</head>
			
		<script type="text/javascript">
			function testUsername(){
				//步骤1：获取文本框中的输入值
				var username = document.getElementById("username").value;
				//步骤2:判断输入的值书否为空
				if (username == "") {// 没有值
					//步骤3:给页面提示 错误信息
					document.getElementById("span1").innerHTML="用户名不允许为空";
				} else{
					document.getElementById("span1").innerHTML="";
				}
				
			}
			function testPassword(){
				var password=document.getElementById("password").value;
				//获取密码长度
				//var len = password.length;
				if (password.length<6) {
					document.getElementById("span2").innerHTML="密码长度不能小于6位";
				} else{
					document.getElementById("span2").innerHTML="";
				}
			}
			function testPwd(){
				var pwd = document.getElementById("pwd").value;
				var password = document.getElementById("password").value;
				if (pwd == password) {
					document.getElementById("span3").innerHTML="";
				} else{
					document.getElementById("span3").innerHTML="两次密码输入的不一致";
				}
				
			}
			function testEmaile(){
				var email = document.getElementById("email").value;
				//定义一个正则表达式 asdas@163.com  aA2_
				var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
				var res = reg.test(email);//true/false
				if (res==true) {
					document.getElementById("span4").innerHTML="";
				} else{
					document.getElementById("span4").innerHTML="邮箱格式不正确";
				}
			}
			function testPhone(){
				var phone = document.getElementById("phone").value;
				var reg = /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/;
				var res = reg.test(phone);
				if (res==true) {
					document.getElementById("span5").innerHTML="";
				} else{
					document.getElementById("span5").innerHTML="手机号格式不正确";
				}

			}
		</script>

	<body>
		<form action="#" method="get">
			用户名：<input type="text" id="username" name="username" placeholder="请输入用户名" onblur="testUsername()"/>
			<span id="span1"></span><br />
			密码：<input type="password" id="password" name="password" placeholder="请输入密码" onblur="testPassword()"/>
			<span id="span2"></span><br />
			重复密码：<input type="password" id="pwd" name="pwd" placeholder="请重复密码"onblur="testPwd()" />
			<span id="span3"></span><br />
			邮箱：<input type="text" id="email" name="email" placeholder="请输入邮箱" onblur="testEmaile()"/>
			<span id="span4"></span><br />
			手机号验证：<input type="text" id="phone" name="phone" placeholder="请输入手机号" onblur="testPhone()"/>
			<span id="span5"></span><br />
			<input type="submit"  value="提交" />
		</form>
	</body>

表格添加和删除

		<h2>使用htmldom实现表格的增删功能</h2>
		<table id="table">
			<tr>
				<th><input type="checkbox" name="checkAll" id="checkAll" onchange="checkAll()" /></th>
				<th>姓名</th>
				<th>年龄</th>
			</tr>
		</table>
		<input type="button" value="增加一行" onclick="createRow()" />
		<input type="button" value="删除选中行" onclick="deleteRows()"/>
		<script type="text/javascript">
			function checkAll() {
				var checkAll = document.getElementById("checkAll");
				var checks = document.getElementsByName("checks");
				for (var i = 0; i < checks.length; i++) {
					//设定全部多选的选中值与checkAll一值
					checks[i].checked = checkAll.checked

				}
			}

			function createRow() {
				var table = document.getElementById("table");
				//默认创建的行最后一行，参数可以调节行的位置
				var row = table.insertRow();
				//创建三列
				var td1 = row.insertCell();
				var td2 = row.insertCell();
				var td3 = row.insertCell();
				var input = document.createElement("input");
				input.type = "checkbox";
				input.name = "checks";

				//开始创建
				td1.appendChild(input);
				td2.innerHTML = "姓名" + row.rowIndex;
				td3.innerHTML = "年龄" + row.rowIndex;


			}

			function deleteRows() {
				var checks = document.getElementsByName("checks");
				for (var i = 0; i < checks.length; i++) {
					//被选中判断
					if (checks[i].checked) {
						//获取当前的行对象
						var tr = checks[i].parentNode.parentNode;
						var table = document.getElementById("table");
						table.deleteRow(tr.rowIndex);
						//删除一行后checks的数量减少，要减一
						i--;
					}
				}

			}
		</script>