JS入门案例

xiaoxiao2025-08-22  88

<!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;                 }

 

转载请注明原文地址: https://www.6miu.com/read-5035132.html

最新回复(0)