JavaScript笔记

it2022-05-05 155

1、JavaScript 介绍

注意：在JavaScript 代码实现中，操作步骤很重要，就是三步：确定事件；定义事件要触发的函数；函数内容。

2、案例：替换文本

3、数据校验

步骤：a、确定事件，此处为提交事件 onsubmit b、事件要触发的函数，checkForm c、在函数中要去做一些校验

4、切换图片

5、定时器

setInterval 和 setTimeout（指定毫秒后调用函数），两个类似。用法

6、onload事件

onload 事件会在页面或图像加载完成后立即发生。如：网页打开后，页面加载完成，轮播图开始自动切换图片。支持该事件的标签和JS对象有：

7、案例：自动轮播图片

<head> <meta charset="UTF-8"> <title></title>  <script> var index = 0; function changeImg(){ //获得要切换图片的那个元素 var img = document.getElementById("img1"); //计算出当前要切换到第几张图片 var curIndex = index%3 + 1; //0,1,2 img.src="../img/"+curIndex+".jpg"; //1,2,3 //每切换完,索引加1 index = index + 1; } function init(){ setInterval("changeImg()",1000); } </script> </head> <body onload="init()"> <img src="../img/1.jpg" width="100%" id="img1"/> </body>

8、定时弹出广告

需求分析

当我们打开一个页面后，它会过几秒后弹出一个广告，再过几秒后消失

技术分析步骤

9、表单校验改善

之前做的数据校验，是弹出一个警告框，提示用户输入不正确。改善后将会实现，当用户输入信息有问题时，在输入框后面给用户一个友好提示。用到的事件，如下图：分析：下面代码中的 checkEmail()函数就是使用外部引用文件中的函数。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>  <script type="text/javascript" src="../js/regutils.js" ></script> <script> /* 1. 确定事件 : onfocus 2. 事件要驱动函数 3. 函数要干一些事情: 修改span的内容 */ function showTips(spanID,msg){ //首先要获得要操作元素 span var span = document.getElementById(spanID); span.innerHTML = msg; } /* 校验用户名: 1.事件: onblur 失去焦点 2.函数: checkUsername() 3.函数去显示校验结果 */ function checkUsername(){ //获取用户输入的内容 var uValue = document.getElementById("username").value; //对输入的内容进行校验 //获得要显示结果的span var span = document.getElementById("span_username"); if(uValue.length < 6){ //显示校验结果 span.innerHTML = "<font color='red' size='2'>对不起,太短</font>"; return false; }else{ span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>"; return true; } } /* 密码校验 */ function checkPassword(){ //获取密码输入 var uPass = document.getElementById("password").value; var span = document.getElementById("span_password"); //对密码输入进行校验 if(uPass.length < 6){ span.innerHTML = "<font color='red' size='2'>对不起,太短</font>"; return false; }else{ span.innerHTML = "<font color='red' size='2'>恭喜您,够用</font>"; return true; } } /* 确认密码校验 * */ function checkRePassword(){ //获取密码输入 var uPass = document.getElementById("password").value; //获取确认密码输入 var uRePass = document.getElementById("repassword").value; var span = document.getElementById("span_repassword"); //对密码输入进行校验 if(uPass != uRePass){ span.innerHTML = "<font color='red' size='2'>对不起,两次密码不一致</font>"; return false; }else{ span.innerHTML = ""; return true; } } /* 校验邮箱 * */ function checkMail(){ var umail = document.getElementById("email").value; var flag = checkEmail(umail); var span = document.getElementById("span_email"); //对邮箱输入进行校验 if(flag){ span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>"; return true; }else{ span.innerHTML = "<font color='red' size='2'>对不起,邮箱格式貌似有问题</font>"; return false; } } function checkForm(){ var flag = checkUsername() && checkPassword() && checkRePassword() && checkMail(); return flag; } </script> </head> <body> <form action="../01-自动轮播图片/图片自动轮播.html" onsubmit="return checkForm()" > 用户名:<input type="text" id="username" onfocus="showTips('span_username','用户名长度不能小于6')" onblur="checkUsername()" onkeyup="checkUsername()" /><span id="span_username"></span><br /> 密码:<input type="password" id="password" onfocus="showTips('span_password','密码长度不能小于6')" onblur="checkPassword()" onkeyup="checkPassword()"/><span id="span_password"></span><br /> 确认密码:<input type="password" id="repassword" onfocus="showTips('span_repassword','两次密码必须一致')" onblur="checkRePassword()" onkeyup="checkRePassword()" /><span id="span_repassword"></span><br /> 邮箱:<input type="text" id="email" onfocus="showTips('span_email','邮箱格式必须正确')" onblur="checkMail()" /><span id="span_email"></span><br /> 手机号:<input type="text" id="text" /><br /> <input type="submit" value="提交" /> </form> </body> </html>

10、表格隔行换色

11、表格全选、全不选

12、DOM操作

13、省级联动

<html> <head> <meta charset="UTF-8"> <title></title> <script> /* 准备工作 : 准备数据 */ var provinces = [ ["深圳市","东莞市","惠州市","广州市"], ["长沙市","岳阳市","株洲市","湘潭市"], ["厦门市","福州市","漳州市","泉州市"] ]; /* 1. 确定事件: onchange 2. 函数: selectProvince() 3. 函数里面要搞事情了得到当前操作元素得到当前选中的是那一个省份从数组中取出对应的城市信息动态创建城市元素节点添加到城市select中 */ function selectProvince(){ var province = document.getElementById("province"); //得到当前选中的是哪个省份 //alert(province.value); var value = province.value; //从数组中取出对应的城市信息 var cities = provinces[value]; var citySelect = document.getElementById("city"); //清空select中的option citySelect.options.length = 0; for (var i=0; i < cities.length; i++) { // alert(cities[i]); var cityText = cities[i]; //动态创建城市元素节点 <option>东莞市</option> //创建option节点 var option1 = document.createElement("option"); // <option></option> //创建城市文本节点 var textNode = document.createTextNode(cityText) ;// 东莞市 //将option节点和文本内容关联起来 option1.appendChild(textNode); //<option>东莞市</option> // 添加到城市select中 citySelect.appendChild(option1); } } </script> </head> <body>  <select onchange="selectProvince()" id="province"> <option value="-1">--请选择--</option> <option value="0">广东省</option> <option value="1">湖南省</option> <option value="2">福建省</option> </select>  <select id="city"></select> </body> </html>

14、商品左右选择

效果图

可实现双击左边的，就会移动到右边。或者点链接也可实现移动。

15、HTML中的DOM操作

专利

最新回复(0)