1 图片轮播
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//图片名称
var index=1;
function chim()
{
//只有5张图片，1.jpg-5.jpg,所以当index大于5时变回1
if(index>5)
{
index=1;
}
//获取id为im的元素
var im=document.getElementById("im");
//拼上index改变名字
im.src="img/"+index+".jpg";
//chim一秒执行一次，每执行一次index就+1，图片就切换
index=index+1;
}
function init()
{
//init方法在运行时调用时间函数，时间函数调用chim()方法，1秒执行一次
setInterval("chim()",1000);
}
</script>
</head>
//在这个页面载入的时候onload,执行init()方法
<body onload="init()">
<img src="img/1.jpg" id="im">
</body>
</html>
2 网站定时弹出广告
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function qq()
{
//获取id为ee的元素
var im=document.getElementById("ee");
//设置元素的style的display属性为可见，广告就出来了
im.style.display="block";
}
function gg()
{
//两秒后时间函数执行qq()方法
setInterval("qq()",2000)
}
</script>
</head>
//网页载入时就执行gg()方法
<body onload="gg()">
//这里设置广告一开始是不显示的
<img src="img/ad.jpg" id="ee" style="display: none;">
</body>
</html>
3 js表单校验
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//验证用户名onbuler和onkeyup的时候调用这个方法
function checkusername()
{
//先根据id获取元素再获取值
var username=document.getElementById("username");
//获取元素的值
var username_value=username.value;
//获取用户名后的span
var name_span=document.getElementById("name_span");
//判断用户名的值的长度是否小于6
if(username_value.length<6)
{
//小于6在span显示信息
name_span.innerHTML="<font color=red>用户名太短</font>";
}else{
//大于6显示信息
name_span.innerHTML="可用";
}
}
function checkpassword()
{
//原理和username验证差不多
var password=document.getElementById("upassword");
var password_value=password.value;
var span=document.getElementById("pass_span")
if(password_value.length<6)
{
span.innerHTML="<font color=red>密码太短</font>";
}else
{
span.innerHTML="密码可用";
}
}
function checkrepassword()
{
//总的来说，把两个密码都拿到，拿出值进行比较，再显示相应信息
var password=document.getElementById("upassword");
var password_value=password.value;
var spassword=document.getElementById("supassword");
var spassword_value=spassword.value;
var span=document.getElementById("spass_span");
if(password_value==spassword_value)
{
span.innerHTML="确认密码正确";
}else
{
span.innerHTML="请保持确认密码与密码一致！";
}
}
function checkemail()
{
}
function checkphone()
{
}
//form表单提交时调用这个方法
function all()
{
//定义一个坐标值，只有当所有的方法返回值都为true的时候才为true
var flag=checkusername()&&checkpassword()&&checkrepassword()&&checkemail()&&checkphone();
//相当于if(true)
if(flag)
{
//方法返回true表单就可以跳转到相应页面
return true;
}else{
return false;
}
}
//用来显示提示信息的方法，传入一个id，和要显示的信息
function showmsg(Spanid,msg)
{
//拿到这个元素
var span=document.getElementById(Spanid);
//设置元素显示传入的信息
span.innerHTML=msg;
}
</script>
</head>
<body>
<form action="植物大战僵尸.html" onsubmit="return all()">
用户名：<input type="text" id="username" onfocus="showmsg('name_span','用户名长度不得小于6')" onblur="checkusername()" onkeyup="checkusername()"><span id="name_span"></span><br>
密码：<input type="password" id="upassword" onfocus="showmsg('pass_span','密码长度不得小于6')" onblur="checkpassword()" onkeyup="checkpassword()"><span id="pass_span"></span><br>
确认密码：<input type="password" id="supassword" onfocus="showmsg('spass_span','确认密码需与密码一致')" onblur="checkrepassword()" onkeyup="checkrepassword()"><span id="spass_span"></span><br>
邮箱：<input type="email" id="uemail" onblur="checkemail()" onkeyup="checkemail()"><span id="email_span"></span><br>
手机号：<input type="text" id="uphone" onblur="checkphone()" onkeyup="checkphone()"><span id="phone_span"></span><br>
<input type="submit" value="提交">
</form>
</body>
</html>
4 表格隔行换色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function init()
{
//先拿到id为tab的
var tab=document.getElementById("tab");
//alert(tab);
/拿到tab的行数组
var rows=tab.rows;
//alert(rows);这里打印出来显示的都是一个什么HTML对象可以把var rows看成一个数组
//遍历行数组
for(var i=1;i<rows.length;i++)
{
var row=rows[i];
//判断是单还是双行，设置不同颜色
if(i%2==0)
{
row.bgColor="brown";
}else
{
row.bgColor="hotpink";
}
}
}
</script>
</head>
//载入时调用init()方法
<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>
</html>
5 表格全选与全不选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//当总的check被点击的时候调用这个方法
function cc()
{
//先拿到第一个check
var checkb=document.getElementById("checkb");
//获取第一个check状态
var checked=checkb.checked;
//alert(checkb_value);显示出来是一个on
//获取所有check
var all=document.getElementsByName("check");
//alert(all.length);//显示出来是5
//再for循环遍历
for(var i=0;i<all.length;i++)
{
var c=all[i];//按角标一个个取出来
c.checked=checked;//使角标状态等于第一个的状态
}
}
</script>
</head>
<body onload="init()">
<table border="1px" width="600px" id="tab">
<tr >
<td>
<input type="checkbox" id="checkb" onclick="cc()"/>
</td>
<td >分类ID</td>
<td>分类名称</td>
<td>分类商品</td>
<td>分类描述</td>
<td>操作</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check"/>
</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="check"/>
</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="check"/>
</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="check" />
</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="check"/>
</td>
<td>5</td>
<td>床上用品</td>
<td>床单,被套,四件套</td>
<td>都是套子</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
</table>
</body>
</html>
6 省市联动案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*用这种方法算法代码少。思路复杂一点，这种方法对应值要与数组下标相同，广东，湖南，福建0，1,2和数组中对应城市位置相同
* <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);
}
}
*/
function gg()
{
//根据idss获取省
var province = document.getElementById("ss");
//获取省的值
var p_value=province.value;
//alert(p_value);这里根据选内容是0.1.2.3
//获取市的列表项
var city = document.getElementById("city");
//添加3个空的项进city列表
var option1=document.createElement("option");
var option2=document.createElement("option");
var option3=document.createElement("option");
//当值等于1的时候说明是广东省
if(p_value==1)
{
city.options.length = 0;//这个是用于清除上一次选择的内容，不然几个省都有
//创出几个城市的文本
var text1=document.createTextNode("广州市");
var text2=document.createTextNode("惠州市");
var text3=document.createTextNode("东莞市");
//文本加到option中
option1.appendChild(text1);
option2.appendChild(text2);
option3.appendChild(text3);
//城市加到选项中
city.appendChild(option1);
city.appendChild(option2);
city.appendChild(option3);
}else if(p_value==2)//2湖南省
{
city.options.length = 0;
var text1=document.createTextNode("长沙市");
var text2=document.createTextNode("岳阳市");
var text3=document.createTextNode("株洲市");
option1.appendChild(text1);
option2.appendChild(text2);
option3.appendChild(text3);
city.appendChild(option1);
city.appendChild(option2);
city.appendChild(option3);
}else if(p_value==3)//3
{
city.options.length = 0;
var text1=document.createTextNode("厦门市");
var text2=document.createTextNode("滁州");
var text3=document.createTextNode("泉州");
option1.appendChild(text1);
option2.appendChild(text2);
option3.appendChild(text3);
city.appendChild(option1);
city.appendChild(option2);
city.appendChild(option3);
}else
{
city.options.length = 0;
}
}
</script>
</head>
<body>
//先创建好左边选项，当左边选项发生改变时就启用gg()方法
<select id="ss" onchange="gg()">
<option value="0">请选择</option>
<option value="1">广东省</option>
<option value="2">湖南省</option>
<option value="3">福建省</option>
</select>
<select id="city">
</select>
</body>
</html>
7 商品左右选择
YPE 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>