JavaScript的案例（数据校验，js轮播图，页面定时弹窗）
1.数据校验
步骤
1.确定事件（onsubmit）并绑定一个函数
2.书写这个函数，获取数据，并绑定id
3.对用户输入数据进行判断
4.数据合法，让表单提交，非法不让表单提交
如何控制表单提交：onsubmit用于提交的位置，定义函数是给出一个返回值
onsubmit=return checkform()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function checkForm(){
var uValue=document.getElementById("username").value;
if(uValue==""){
document.getElementById("remind").innerHTML="用户名不能为空 ";
return false;
}
var pValue=document.getElementById("password").value;
if(pValue==""){
alert("密码不能为空");
return false;
}
var eValue=document.getElementById("email".value);
if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(eValue)){
alert("邮箱格式不正确")
return false
}
}
</script>
</head>
<body>
<div align="center">
<form action="#" method="get" name="regForm" onsubmit="return checkForm()">
用户名：<input type="text" name="username" id="username"/><br />
<font id="remind" color="red"></font><br /><br />
密 码：<input type="password" name="password" id="password"/><br /><br /><br />
邮 箱：<input type="text" name="email" id="email" /><br /><br /><br />
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</form>
</div>
</body>
</html>
2.js轮播图
步骤
1.确定事件（onload）并为其绑定一个函数
2.书写绑定的这个函数
3.书写定时任务
4.书写定时任务里面的函数
5.通过变量的方式进行循环
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 500px;
height: 350px;
margin: auto;
text-align: center;
}
</style>
<script type="text/javascript">
function init(){
setInterval("changeImg()",1000)
}
var i=0;
function changeImg(){
document.getElementById("img").src="img/"+(i%5+1)+".jpg";
i++;
}
</script>
</head>
<body onload="init()">
<div>
<img src="img/1.jpg" width="500px" id="img"/>
</div>
</body>
</html>
3.页面定时弹窗
1.确定事件（onload）并为其绑定一个函数
2.书写绑定函数，并绑定id
3.隐藏一个广告图片
4.利用定时器将display显现（block）
5.清除定时器，书写隐藏图片定时操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时弹出广告</title>
<script type="text/javascript">
function tim(){
a=setTimeout("showAd()",3000); }
function showAd(){
adEle=document.getElementById("img");
adEle.style.display="block"
clearTimeout(a);
b=setTimeout("hidAd()",3000)
}
function hidAd(){
adEle.style.display="none"
}
</script>
</head>
<body onload="tim()">
<img src="img/广告.jpg" style="display: none;" id="img"/>
</body>
</html>
JavaScript的案例（数据校验，js轮播图，页面定时弹窗）的更多相关文章
- javascript原生js轮播图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- swiper轮播问题之一：轮播图内容为动态数据生成时轮播图无法自动轮播
本人在用H5做移动端项目中使用Swiper遇到的两个问题,因此加深了对Swiper的掌握,分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助. 首先,new Swiper的初始化最 ...
- 纯js轮播图练习-2，js+css旋转木马层叠轮播
基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...
- 纯js轮播图练习-1
偶尔练习,看视频自己学着做个简单的纯JS轮播. 简单的纯js轮播图练习-1. 样子就是上面图片那样,先不管好不好看,主要是学会运用和理解轮播的原理 掌握核心的理论知识和技术的操作,其他的都可以在这个基 ...
- JS轮播图（网易云轮播图）
JS 轮播图 写在前面 最聪明的人是最不愿浪费时间的人.--但丁 实现功能 图片自动切换 鼠标移入停止自动播放,显示按钮 点击按钮,实现前后翻 鼠标移入小圆圈,可以跳转到对应图片 点击左右两侧图片部分 ...
- 用原生的javascript 实现一个无限滚动的轮播图
说一下思路:和我上一篇博客中用JQ去写的轮播图有相同点和不同点 相同点: 首先页面布局是一样的 同样是改变.inner盒子的位置去显示不同的图片 不同点: 为了实现无限滚动需要多添加两张重复的图片 左 ...
- 第六十八天 js轮播图
1.浮动与定位结合使用 浮动与相对定位 //1.两者均参与布局 //2.主浮动布局,相对布局辅助完成布局微调 //3.相对定位布局微调不同于盒模型布局微调,相对定位布局不影响盒子原有位置,就会影响兄弟 ...
- js轮播图和bootstrap中的轮播图
js中的轮播图案例: <!DOCTYPE html><html lang="en"> <head> <meta charset=" ...
- JS —— 轮播图中的缓动函数的封装
轮播图的根本其实就是缓动函数的封装,如果说轮播图是一辆跑动的汽车,那么缓动函数就是它的发动机,今天本文章就带大家由简入繁,封装属于自己的缓动函数~~ 我们从需求的角度开始,首先给出一个简单需求: 1. ...
随机推荐
- redis 的数据结构
Redis 数据类型 详解见: http://www.runoob.com/redis/redis-strings.html Redis支持五种数据类型:string(字符串),hash(哈希),li ...
- java提供的线程池的使用
应用场景,比如你有个业务模块,非常耗时,并且还需要重复调用5次. 如果你写个for循环调用5次,调用一次3秒,那么5次就15秒,不是很友好. 这时,如果你用线程池就方便了,多线程跑,都跑完,收集到结果 ...
- fjwc2019 D6T1 堆（组合数+打表）
#193. 「2019冬令营提高组」堆 但是每个点都遍历一遍,有些点的子树完全相同却重复算了 忽然记起完全二叉树的性质之一:每个非叶节点的子树中至少有一个是满二叉树 那么我们预处理满二叉树的那一块,剩 ...
- MQ选型对比RabbitMQ RocketMQ ActiveMQ Kafka（外加redis对比及其实现）
rocketmq 4.3开始支持事务https://www.cnblogs.com/hzmark/p/rocket_txn.html 参考:rabbitMQ.activeMQ.zeroMQ.Kafka ...
- 【题解】Luogu P3901 数列找不同
我博客中对莫队的详细介绍 原题传送门 不错的莫队练手题 块数就直接取sqrt(n) 对所有询问进行排序 排序第一关键词:l所在第几块,第二关键词:r的位置 考虑Ai不大,暴力开数组 add时如果加之后 ...
- php7安装redis拓展
phpredis下载地址https://github.com/phpredis/phpredis 解压并进入源码包 unzip phpredis-develop.zip cd phpredis-d ...
- 20145311 王亦徐 《网络对抗技术》 Web基础
20145311 王亦徐 <网络对抗技术> Web基础 实验内容 简单的web前端页面(HTML.CSS等) 简单的web后台数据处理(PHP) Mysql数据库 一个简单的web登陆页面 ...
- UVa 12099 The Bookcase - 动态规划
题目大意 给定一些书,每个书有一个高度和宽度,然后将它们放到一个三层的书架里(要求每一层都不为空).定义书架的大小为每层最大的高度和 乘 每层宽度和的最大值.求最小的书架大小. 显然动态规划(直觉,没 ...
- docker 容器配置tocmat时间不统一
1.在tomcat配置文件bin下 vim setenv.sh #!/bin/bashCATALINA_OPTS='-Duser.timezone=Asia/Shanghai'export CAT ...
- ubuntu 容器安装ping ifconfig ip命令
进入容器测试ifconfig ping 没有-------->>很尴尬 apt-get install net-tools ### ifconfig apt-get install ...