JavaScript的小例子
- 给元素对象绑定事件,通过事件触发函数。 在函数中获取元素对象-----获取对象的属性值修改对象的元素(添加元素、删除元素)。
一.三级联动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三级联动</title>
<script type="text/javascript">
function changeCity(obj){
var cityObj=document.getElementById('city');
var cityOption=document.createElement('option');
cityOption.setAttribute('label','----请选择----');
cityObj.options.length=1;
var cityArr=new Array();
cityArr['陕西省']=['西安市','渭南市','宝鸡市','咸阳市','延安市'];
cityArr['广东省']=['广州市','深圳市','珠海市','佛山市','东菀市'];
cityArr['四川省']=['成都市','自贡市','攀枝花市','泸州市','德阳市'];
cityArr['浙江省']=['杭州市','宁波市','温州市','嘉兴市','绍兴市'];
cityArr['河北省']=['石家庄市','唐山市','保定市','廊坊市','遵化市'];
var provinceText=obj.value;
var citys=cityArr[provinceText];
for(var i=0;i<citys.length;i++){
var newCityOption=document.createElement('option');
newCityOption.setAttribute('label',citys[i]);
newCityOption.setAttribute('value',citys[i]);
cityObj.appendChild(newCityOption);
}
changeCounty(cityObj);
}
function changeCounty(obj){
var countys=document.getElementById('county');
var countyOption=document.createElement('option');
countyOption.setAttribute('label','----请选择----');
countys.options.length=1;
var countyArr=new Array();
countyArr['西安市']=['临潼区','周至县','雁塔区','长安区','碑林区'];
countyArr['渭南市']=['富平县','大荔县','蒲城县','白水县','合阳县'];
countyArr['宝鸡市']=['岐山县','凤翔县','梅县','陇县','千阳县'];
countyArr['咸阳市']=['泾阳县','三原县','礼泉县','长武县','武功县'];
countyArr['延安市']=['延长县','宝塔区','安塞区','黄陵县','黄龙县'];
countyArr['广州市']=['越秀区','海珠区','荔湾区','白云区','花都区'];
countyArr['深圳市']=['罗湖区','福田区','南山区','龙岗区','盐田区'];
countyArr['珠海市']=['香洲区','金湾区','斗门区'];
countyArr['佛山市']=['禅城区','南海区','顺德区','高明区','三水区'];
countyArr['东菀市']=['虎门镇','厚街镇','长安镇','沙田镇','大岭山镇'];
countyArr['成都市']=['武侯区','锦江区','青羊区','金牛区','成华区'];
countyArr['自贡市']=['流井区','贡井区','大安区','盐滩区','荣县'];
countyArr['攀枝花市']=['东区','西区','仁和区','盐边区','米易区'];
countyArr['泸州市']=['泸县','合江县','叙永县'];
countyArr['德阳市']=['旌阳区','中江县','罗江县'];
countyArr['杭州市']=['上城区','下城区','西湖区','江干区','临安区'];
countyArr['宁波市']=['江东区','江北区','镇海区','北仑区','余姚市'];
countyArr['温州市']=['永嘉县','平阳县','苍南县','文成县','泰顺县'];
countyArr['嘉兴市']=['南湖区','秀洲区','嘉善县','海盐县','平湖县'];
countyArr['绍兴市']=['越城区','柯桥区','上虞区','新昌县','诸暨市'];
countyArr['石家庄市']=['新华区','桥西区','长安区','桥东区','裕华区'];
countyArr['唐山市']=['路南区','路北区','古冶区','开平区','丰南区'];
countyArr['保定市']=['定州市','安国市','易县','徐水县','定兴县'];
countyArr['廊坊市']=['安次区','广阳区','三河市','霸州市','香河县'];
countyArr['遵化市']=['遵化镇','铁厂镇','建明镇','石门镇','党峪镇'];
var cityText=obj.value;
var countyText=countyArr[cityText];
for(var i=0;i<countyText.length;i++){
var newCountyOption=document.createElement('option');
newCountyOption.setAttribute('label',countyText[i]);
newCountyOption.setAttribute('value',countyText[i]);
countys.appendChild(newCountyOption);
}
}
</script>
</head>
<body>
<div>
<span>
省:<select id="provice" onchange="changeCity(this)">
<option>----请选择----</option>
<option value="陕西省">陕西省</option>
<option value="广东省">广东省</option>
<option value="四川省">四川省</option>
<option value="浙江省">浙江省</option>
<option value="河北省">河北省</option>
</select>
</span>
<span>
市:<select id="city" onchange="changeCounty(this)">
<option>----请选择----</option>
</select>
</span>
<span>
县/区:<select id="county">
<option>----请选择----</option>
</select>
</span>
</div>
</body>
</html>
二.轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自动和手动同时存在</title>
<style type="text/css">
h2{
display: inline;
font-size: 30px;
}
</style>
</head>
<body>
<div align="center">
<h2 id="bimg" onclick="bimg()"> < </h2>
<img id="imglb" src="img/德云社02.jpg" height="300px" width="300px"/>
<h2 id="aimg" onclick="aimg()"> > </h2>
</div>
</body>
<script type="text/javascript">
var num=0;
var imgarr=["德云社02.jpg","德云社03.jpg","德云社04.jpg","德云社05.jpg","德云社06.jpg"];
function lunbotu(){
var imgsrc=imgarr[num];
var img=document.getElementById("imglb");
img.src="img/"+imgsrc;
num++;
if(num==imgarr.length){
num=0;
}
}
window.setInterval(lunbotu,2000);
function bimg(){
num--;
if(num<0){
num=imgarr.length-1;
}
var imgsrc=imgarr[num];
var img=document.getElementById("imglb");
img.src="img/"+imgsrc;
}
function aimg(){
num++;
if(num>imgarr.length-1){
num=0;
}
var imgsrc=imgarr[num];
var img=document.getElementById("imglb");
img.src="img/"+imgsrc;
}
</script>
</html>
三.表单数据验证
- 用户名不能以数字为开头,长度不能小于6 ,不能大于10位 ;
- 密码由数字组成;
- 性别只能是男或者女 。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数据验证</title>
</head>
<body>
<div align="center">
<form action="轮播图.html" method="get" onsubmit="return login()">
用户名:<input type="text" id="username" onchange="nameyanzhneg(this.value)" /><label id=uname></label><br />
密码:<input type="password" id="pass" onchange="passyanzhneg(this.value)" /><label id=upass></label><br />
性别:男<input type="radio" name="sex" value="男" checked="true" />
女<input type="radio" name="sex" value="女" />
<br>
<input type="submit" value="登录" />
</form>
</div>
</body>
<script type="text/javascript">
function nameyanzheng(name){
var username=document.getElementById("uname");
if(!name.match("^[a-zA-Z][0-9a-z][5,10]")){
uname.innerHTML="用户名不符合规范,长度最低6个,最多10个,不能用数字开头。";
uname.style.color="red";
return false;
}else{
uname.innerHTML="";
}
return true;
}
function passyanzheng(pass){
var upass=document.getElementById("upass");
if(!pass.match("[0-9]+")){
upass.innerHTML="*密码不符合要求";
upass.style.color="red";
return false;
}else{
upass.innerHTML="";
}
return true;
}
function sexfun(){
var sexs=document.getElementsByName("sex");
alert(sexs.length);
for(var i=0;i<sexs.length;i++){
if(sexs[i].checked==true){
alter("选中的性别是"+sexs[i].value);
}
}
}
</script>
</html>
四.图片放大镜
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style>
img{
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<img src="img/德云社04.jpg" id="img04" onmousemove="fangda()" onmouseout="suoxiao()"/>
</body>
<script>
function fangda(){
var imp04=document.getElementById("img04");
img04.style.height="400px";
img04.style.width="400px";
}
function suoxiao(){
var imp04=document.getElementById("img04");
img04.style.height="200px";
img04.style.width="200px";
}
</script>
</html>
五.遍历对象创建表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="selectall()">显示所有信息</button>
<div align="center">
<table border="1">
<thead>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</thead>
<tbody id="tbd">
</tbody>
</table>
</div>
</body>
<script>
var stu={name:'张三',age:'18',sex:'男'};
var stus=[
{name:'张三',age:'18',sex:'男'},
{name:'李四',age:'20',sex:'女'},
{name:'王五',age:'19',sex:'男'},
{name:'赵六',age:'21',sex:'女'},
{name:'小王',age:'19',sex:'男'}
];
function selectall(){
var mess="";
for(var i=0;i<stus.length;i++){
var student=stus[i];
mess+="<tr><td>"+student.name+"</td><td>"+student.age+"</td><td>"+student.sex+"</td><td οnclick='del(this)'>删除</td></tr>";
}
var tbd=document.getElementById("tbd");
tbd.innerHTML=mess;
}
function del(obj){
var tbd=document.getElementById("tbd");
tbd.removeChild(obj.parentNode);
}
</script>
</html>