第2章 WEB02-CSS&JS篇-视频教程-第二部分
2023-06-13 09:13:25 时间
11-案例二:网站注册页面重新布局-代码实现
12-案例二:网站注册页面重新布局-扩展的属性及颜色介绍
13-案例三:使用JS完成页面表单的简单校验-需求分析及JS的概述
14-案例三:使用JS完成页面表单的简单校验-JS的数据类型、运算符和语句
15-案例三:使用JS完成页面表单的简单校验-JS的输出和步骤分析
16-案例三:使用JS完成页面表单的简单校验-代码实现
17-案例四:使用JS完成首页轮播效果-需求和分析
18-案例四:使用JS完成首页轮播效果-代码实现
19-今天内容总结
1.4 使用JS完成简单的数据的校验
1.4.1 需求分析:
使用JS完成对注册页面进行简单的数据的非空校验。在提交表单的时候,不可以出现用户名,密码是空的情况。
1.4.2 分析:
1.4.2.1 技术分析:
HTML骨架,CSS美化,JS可以使页面动起来。
【JavaScript的概述】
- 什么是JavaScript:
运行在浏览器端的脚本语言.
JS的组成:
ECMAScript:语法,语句.
BOM:浏览器对象
DOM:Document Object Model 操作文档中的元素和内容.
- 在哪些地方使用JS
JS增加用户和网站交互
- 如何使用JS
语法:
- 区分大小写
- 语法要求不是特别严格
- 变量是弱变量类型
- var s = “aa”;
- var i = 3;
- JS代码需要写在<script></script>
【JS的数据类型】
- 原始类型:
- string
- number
- boolean
- undefined
- null
- 引用类型:
基于对象而不是面向对象.内置对象.对象类型的默认值是null.
【JS的运算符和语句】
运算符与Java中一致.
- 全等于 === :类型和值都一致返回true
语句与Java一致:
【JS的输出】
- alert()
向页面中弹出一个提示框!!
- innerHTML:
向页面的某个元素中写一段内容,将原有的东西覆盖
- document.write();
向页面中写内容
1.4.2.2 步骤分析:
- JS都是由事件触发的,第一步确定事件。
on…
- JS的事件都会触发一个函数,编写一个函数。
- JS获得操作的对象的元素。
document.getElementById(“”);
- JS修改这个元素的属性或值。
1.4.3 代码实现:
<script>
// 第一步确定事件:onsubmit
// 第二步编写触发函数:
function checkForm(){
// 第三步:通过ID获得元素
var uValue = document.getElementById("username").value;
// alert(uValue);
if(uValue == ""){
alert("用户名不能为空!");
return false;
}
// 校验密码
var pValue = document.getElementById("password").value;
if(pValue == ""){
alert("密码不能为空!");
return false;
}
// 校验确认密码
var rpValue = document.getElementById("repassword").value;
if(rpValue != pValue){
alert("两次密码输入不一致!");
return false;
}
// 校验邮箱:使用正则表达式:
var eValue = document.getElementById("email").value;
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
alert("邮箱格式不正确!");
return false;
}
}
</script>
1.5 使用JS完成首页上轮播图片效果:
1.5.1 需求分析:
在网站的首页上图片的轮播,现在页面中图片是静止的。让图片隔5秒自动切换。
1.5.2 分析:
1.5.2.1 技术分析:
【修改图片的路径】
获得图片,修改图片的src的属性。
document.getElementById("img1").src="2.jpg";
【JS中定时操作】
查看BOM中的window对象:
- setInterval() :隔多少毫秒之后,执行一段代码。重复执行。
- setTimeout() :隔多少毫秒之后,执行一段代码。
清除定时:
- clearInterval() :清除setInterval的定时操作。
- clearTimeout() : 清除setTimeout的定时操作。
示例代码:
function init(){
// window.setTimeout("alert('aaa')",5000);
window.setInterval("alert('bbb')",5000);
}
1.5.2.2 步骤分析:
- 步骤一:使用页面加载的事件触发一个函数
- 步骤二:在函数中设置定时:setInterval设置定时,5秒之后(切换图片-定义一个函数)
- 步骤三:编写切换图片的函数
- 步骤四:在函数中获得图片的元素
- 步骤五:修改图片的src的属性
1.5.3 代码实现:
<script>
function init(){
// 设置定时
setInterval("changeImg()",5000);
}
// 定义一个全局变量
var i = 1;
function changeImg(){
// 获得图片的元素:
var img1 = document.getElementById("img1");
if(i == 3){
i =1;
}else{
i++;
}
// 修改图片的src的属性
img1.src = "../img/"+i+".jpg";
}
</script>
相关文章
- iOS小技能:本地化(Internationalization & Localization)
- 有效捕捉目标级别语义信息,之江实验室&浙大提出再注意机制TRT
- 图像质量评价方法PSNR+SSIM&&评估指标SROCC,PLCC
- 每日tips:Dart & Flutter Easy Wins 36-42
- JS跳转代码_js中跳转页面路径
- 第2章 WEB02-CSS&JS篇-视频教程-第一部分
- Minecraft反代(跨服)服务端搭建从入门到精通(For BungeeCord & Velocity)
- 二叉排序树的平均查找长度(成功&&不成功)
- R语言线性混合效应模型(固定效应&随机效应)和交互可视化3案例|附代码数据
- SecureCRT mac&win(专业终端SSH工具)
- SpringBoot之Webflux&R2DBC操作MySQL
- 全球合作伙伴大会创想·位置&车联分论坛 | 对话科技,未来已来!
- get两个js小技能——JS截取视频第一帧&图片转Base64
- CVPR 2023|两行代码高效缓解视觉Transformer过拟合,美图&国科大联合提出正则化方法DropKey
- 最详细的JVM&GC讲解
- Linux上的JS压缩工具(js压缩工具linux)
- AMP MySQL升级提升数据库性能的必要之举(amp mysql升级)
- 使用JS在网页中连接Oracle数据库(js网页链接oracle)
- 如何增加Oracle数据库的AMP值(amp值oracle)
- Redis中的订阅机制及其在JS中的应用(redis 订阅 js)
- 用js怎么把&字符换成"&:"
- 解析取模运算%和位与运算&之间的关系详解
- 将DataTable转换成List<T>实现思路及示例代码
- 解释&&和||在javascript中的另类用法
- js中运算符&&和||的使用记录