JS
1.轮播图自动播放
需求：
有一组图片，每隔３秒，就去切换一张，最终是一直不停切换
技术分析：
切换图片
每个３秒钟
2.定时器：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//window 对象是一个最顶层对象
// window.setInterval("alert('123');",2000);
function test(){
console.log("setInterval 调用了");
}
// setInterval("test()",2000);
// setTimeout("test()",2000);
var timerID;
function startDinshiqi(){
// timerID = setInterval("test()",2000);
timerID = setTimeout("test()",3000);
}
function stopDingshiqi(){
// clearInterval(timerID);
clearTimeout(timerID);
}
</script>
</head>
<body>
<input type="button" value="开启定时器" onclick="startDinshiqi()" /><br />
<input type="button" value="取消定时器" onclick="stopDingshiqi()"/><br />
</body>
</html>
3.切换图片：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*
1. 事件: 点击事件 onclick
2. 事件要触发函数: changeImg
3. 在函数中
*/
function changeImg(){
// alert("要切换了")
var img = document.getElementById("img1");
img.src = "../img/1-161104143944.gif";
}
</script>
</head>
<body>
<input type="button" value="点击切换图片" onclick="changeImg()" />
<br />
<img src="../img/222.jpg" id="img1" />
</body>
</html>
4.图片自动播放
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
1. 确定事件: 文档加载完成的事件 onload
2. 事件要触发 : init()
3. 函数里面要做一些事情:(通常会去操作元素,提供交互)
1. 开启定时器: 执行切换图片的函数 changeImg()
4. changeImg()
1. 获得要切换图片的那个元素
-->
<script>
var index = 0;
function changeImg(){
//1. 获得要切换图片的那个元素
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>
</html>
5.完成页面定时弹出广告
需求：
一般网页，当我们刚打开的时候，它会５秒自后，显示一个广告，让我们看５秒钟广告。然后它自动消失。
技术分析
定时器：
setlnterval 每隔多少毫秒执行一次函数
setTimeout 多少毫秒执行一次函数
clearlnterval
clearTimeout
显示广告：img.style.display = block
隐藏广告：img.style.display = none
步骤分析
确定事件：页面加载完成的事件
事件要触发函数：init()
init函数里面做一件事：
１启动一个定时器setTimeout
２显示一个广告
３再去开启一个定时器５秒钟后，关闭广告
显示和隐藏广告：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//文档加载顺序
// var img = document.getElementById("img1");
function hideImg(){
var img = document.getElementById("img1");
img.style.display = "none";
}
function showImg(){
var img = document.getElementById("img1");
img.style.display = "block";
}
</script>
</head>
<body>
<input type="button" value="显示" onclick="showImg()" />
<input type="button" value="隐藏" onclick="hideImg()" /><br />
<img src="../img/1-161104143944.gif" id="img1" />
</body>
</html>
6.表单校验
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
确认事件
事件触发函数
函数操作元素
校验用户名
1. 当用户鼠标移动到输入框中时候, 请给用户一个提示
事件: 焦点事件 onfocus
触发函数
函数里面要做一些事情
span 给用户提示信息
2. 当用户鼠标移开时候, 校验一下用户输入
事件: 失去焦点 onblur
触发函数
函数要干事情:
校验用户输入
得到用户输入的值
3. 当用户按键输入抬起的时候, 校验一下用户输入
-->
<script>
function showTips(spanID,msg){
var span = document.getElementById(spanID);
span.innerHTML = msg;
}
function checkUsername(){
/*
alert(this) 每一个函数中都隐藏着一个this指针, 指向的是当前事件触发对象
*/
var uValue = document.getElementById("username").value;
// alert(uValue);
var span = document.getElementById("span_username");
if(uValue.length < 6){
span.innerHTML = "对不起,太短啦!"
return false;
}else{
span.innerHTML = "恭喜您,够用!"
return true;
}
}
function checkForm(){
var flag = checkUsername();
return flag;
}
</script>
</head>
<body>
<form action="../01-自动轮播图片/图片自动轮播.html" onsubmit="return checkForm()">
用户名:<input type="text" id="username" onblur="checkUsername()" onfocus="showTips('span_username','用户名长度不能小于6位')" /><span id="span_username"></span> <br />
<input type="submit" value="注册" />
</form>
</body>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
引入外部的js文件
-->
<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>
7.表格的隔行换色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
1. 确定事件: 文档加载完成 onload
2. 事件要触发函数: init()
3. 函数:操作页面的元素
要操作表格中每一行
动态的修改行的背景颜色
-->
<script >
function init(){
//得到表格
var tab = document.getElementById("tab");
//得到表格中每一行
var rows = tab.rows;
//便利所有的行,然后根据奇数 偶数
for(var i=1; i < rows.length; i++){
var row = rows[i]; //得到其中的某一行
if(i%2==0){
row.bgColor = "yellow";
}else{
row.bgColor = "red"
}
}
}
</script>
</head>
<body onload="init()">
<table border="1px" width="600px" id="tab">
<tr >
<td>
<input type="checkbox" />
</td>
<td>分类ID</td>
<td>分类名称</td>
<td>分类商品</td>
<td>分类描述</td>
<td>操作</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>1</td>
<td>手机数码</td>
<td>华为,小米,尼康</td>
<td>黑马数码产品质量最好</td>
<td>
<a href="#">修改</a>|<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>2</td>
<td>成人用品</td>
<td>充气的</td>
<td>这里面的充气电动硅胶的</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>3</td>
<td>电脑办公</td>
<td>联想,小米</td>
<td>笔记本特卖</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>4</td>
<td>馋嘴零食</td>
<td>辣条,麻花,黄瓜</td>
<td>年货</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>5</td>
<td>床上用品</td>
<td>床单,被套,四件套</td>
<td>都是套子</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
</table>
</body>
表格的全选和全不选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
1. 确定事件: 文档加载完成 onload
2. 事件要触发函数: init()
3. 函数:操作页面的元素
要操作表格中每一行
动态的修改行的背景颜色
-->
<script >
function init(){
//得到表格
var tab = document.getElementById("tab");
//得到表格中每一行
var rows = tab.rows;
//便利所有的行,然后根据奇数 偶数
for(var i=1; i < rows.length; i++){
var row = rows[i]; //得到其中的某一行
if(i%2==0){
row.bgColor = "yellow";
}else{
row.bgColor = "red"
}
}
}
/*
全选和全不选步骤分析:
1.确定事件: onclick 单机事件
2.事件触发函数: checkAll()
3.函数要去做一些事情:
获得当前第一个checkbox的状态
获得所有分类项的checkbox
修改每一个checkbox的状态
*/
function checkAll(){
// 获得当前第一个checkbox的状态
var check1 = document.getElementById("check1");
//得到当前checked状态
var checked = check1.checked;
// 获得所有分类项的checkbox
// var checks = document.getElementsByTagName("input");
var checks = document.getElementsByName("checkone");
// alert(checks.length);
for(var i = 0; i < checks.length; i++){
// 修改每一个checkbox的状态
var checkone = checks[i];
checkone.checked = checked;
}
}
</script>
</head>
<body onload="init()">
<table border="1px" width="600px" id="tab">
<tr >
<td>
<input type="checkbox" onclick="checkAll()" id="check1" />
</td>
<td>分类ID</td>
<td>分类名称</td>
<td>分类商品</td>
<td>分类描述</td>
<td>操作</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone" />
</td>
<td>1</td>
<td>手机数码</td>
<td>华为,小米,尼康</td>
<td>黑马数码产品质量最好</td>
<td>
<a href="#">修改</a>|<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone"/>
</td>
<td>2</td>
<td>成人用品</td>
<td>充气的</td>
<td>这里面的充气电动硅胶的</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone"/>
</td>
<td>3</td>
<td>电脑办公</td>
<td>联想,小米</td>
<td>笔记本特卖</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone"/>
</td>
<td>4</td>
<td>馋嘴零食</td>
<td>辣条,麻花,黄瓜</td>
<td>年货</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone"/>
</td>
<td>5</td>
<td>床上用品</td>
<td>床单,被套,四件套</td>
<td>都是套子</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
</table>
</body>
7.DOM
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="../img/1-161104143944.gif" />
<p>文本</p>
</body>
</html>
操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*动态添加 : <p>文本</p> */
function dianwo(){
var div = document.getElementById("div1");
//创建元素节点
var p = document.createElement("p"); // <p></p>
//创建文本节点
var textNode = document.createTextNode("文本内容");// 文本内容
//将p 和文本内容关联起来
p.appendChild(textNode); // <p>文本</p>
//将P添加到目标div中
div.appendChild(p);
}
</script>
</head>
<body>
<input type="button" value="点我,添加P" onclick="dianwo()" />
<!--一会动态的往这个Div中添加节点-->
<div id="div1">
</div>
</body>
</html>
8.省市联动
<!DOCTYPE html>
<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>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
步骤分析
1. 确定事件: 点击事件 :onclick事件
2. 事件要触发函数 selectOne
3. selectOne要做一些操作
(将左边选中的元素移动到右边的select中)
1. 获取左边Select中被选中的元素
2. 将选中的元素添加到右边的Select中就可以
-->
<script>
function selectOne(){
// 1. 获取左边Select中被选中的元素
var leftSelect = document.getElementById("leftSelect");
var options = leftSelect.options;
//找到右侧的Select
var rightSelect = document.getElementById("rightSelect");
//遍历找出被选中的option
for(var i=0; i < options.length; i++){
var option1 = options[i];
if(option1.selected){
// 2. 将选中的元素添加到右边的Select中就可以
rightSelect.appendChild(option1);
}
}
}
//将左边所有的商品移动到右边
function selectAll(){
// 1. 获取左边Select中被选中的元素
var leftSelect = document.getElementById("leftSelect");
var options = leftSelect.options;
//找到右侧的Select
var rightSelect = document.getElementById("rightSelect");
//遍历找出被选中的option
for(var i=options.length - 1; i >=0; i--){
var option1 = options[i];
rightSelect.appendChild(option1);
}
}
</script>
</head>
<body>
<table border="1px" width="400px">
<tr>
<td>分类名称</td>
<td><input type="text" value="手机数码"/></td>
</tr>
<tr>
<td>分类描述</td>
<td><input type="text" value="这里面都是手机数码"/></td>
</tr>
<tr>
<td>分类商品</td>
<td>
<!--左边-->
<div style="float: left;">
已有商品<br />
<select multiple="multiple" id="leftSelect" ondblclick="selectOne()">
<option>华为</option>
<option>小米</option>
<option>锤子</option>
<option>oppo</option>
</select>
<br />
<a href="#" onclick="selectOne()"> >> </a> <br />
<a href="#" onclick="selectAll()"> >>> </a>
</div>
<!--右边-->
<div style="float: right;">
未有商品<br />
<select multiple="multiple" id="rightSelect">
<option>苹果6</option>
<option>肾7</option>
<option>诺基亚</option>
<option>波导</option>
</select>
<br />
<a href="#"> << </a> <br />
<a href="#"> <<< </a>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交"/>
</td>
</tr>
</table>
</body>
</html>
扫一扫
226
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
