js生成二级城市联动菜单，动态生成年、月、日字段，生产一个验证码

最新推荐文章于 2017-05-16 08:39:54 发布

Styx1222

最新推荐文章于 2017-05-16 08:39:54 发布

阅读量861

点赞数

1. 生成二级城市联动菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

select{

width:100px;

}

</style>

function selcity()

{

//定义数据对应关系

//城市有很多，所以通过数组存储。每一个省对应一个城市数组，怎么建立对应关系呢？

//每一个省都有自己的角标。通过角标和数组建立对应关系，这就是二维数组。

var arr = [['--选择城市--'],['海淀区','朝阳区','东城区','西城区']

,['沈阳','大连','鞍山','抚顺']

,['济南','青岛','烟台','威海']

,['石家庄','廊坊','唐山','秦皇岛']];

//获取选择的省的角标。

var selNode = document.getElementById("selid");

var index = selNode.selectedIndex;

var cities = arr[index];

var subSelNode = document.getElementById("subselid");

//有更简单清除方式，只要改变下拉菜单的长度即可。

subSelNode.options.length = 0;

//清除上一次选择的子菜单内容。

for(var x=1; x<subSelNode.options.length;)

{

alert(subSelNode.options.length+"..."+subSelNode.options[x].innerHTML+"..."+x);

subSelNode.removeChild(subSelNode.options[x]);

}

for(var x=0; x<cities.length; x++)

{

var optNode = document.createElement("option");

optNode.innerHTML = cities[x];

subselid.appendChild(optNode);

}

</script>

</head>

<body>

</select>

</select>

</body>

</html>

2.动态生成年、月、日字段

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

/**

* @author Administrator

//通过js创建年,月,日

//获取Dom

var dom = window.document;

function myYear() {

//获取年的select

var year = dom.getElementById("year");

//创建年

var minYear = 1900;

var maxYear = new Date().getFullYear();

for (var i = minYear; i <= maxYear; i++) {

//创建Option

var opt = dom.createElement("option");

//设置Option,标签体.

opt.innerHTML = i;

opt.value = i;

//挂载节点

year.appendChild(opt);

}

function myMonth() {

var month = dom.getElementById("month");

//创建月

for (var i = 1; i <= 12; i++) {

//创建Option

var opt = dom.createElement("option");

//设置Option,标签体.

if (i < 10) {

opt.innerHTML = "0" + i;

opt.value = i;

} else {

opt.innerHTML = i;

opt.value = i;

}

month.appendChild(opt);

}

month.onchange = myDay;

}

function myDay() {

clear();

//创建天

// 大月1 3 5 7 8 10 12 ,小月4 6 9 11 闰年2月非闰年的2月

//获取年

var year = dom.getElementById("year").value;

//获取月

var month = dom.getElementById("month").value;

if (year == "") {

alert("请选择年");

return;

}

if (month == "") {

alert("请选择月");

return;

}

//获取天select

var day = dom.getElementById("day");

//一个月至少有28天.

for (var i = 1; i <= 28; i++) {

var opt = dom.createElement("option");

if (i < 10) {

opt.innerHTML = "0" + i;

opt.value = "0" + i;

} else {

opt.innerHTML = i;

opt.value = i;

}

day.appendChild(opt);

}

//大月

var isBigMonth = month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12;

//小月

var isSmallMonth = month == 4 || month == 6 || month == 9 || month == 11;

//闰年可以整除4但不能整除100 或者年份可以整除400.

var isLeapYear = (year % 4 == 0 && year % 100 != 0) || year % 400 == 0;

//判断,如果是大月,添加3天

if (isBigMonth) {

//添加3天

for (var i = 29; i <= 31; i++) {

var opt = dom.createElement("option");

opt.innerHTML = i;

opt.value = i;

day.appendChild(opt);

}

} else if (isSmallMonth) {

//添加2天

for (var i = 29; i <= 30; i++) {

var opt = dom.createElement("option");

opt.innerHTML = i;

opt.value = i;

day.appendChild(opt);

}

} else if (isLeapYear) {

//如果是闰年,添加一天.专门处理闰年2月.

var opt = dom.createElement("option");

opt.innerHTML = 29;

opt.value = 29;

day.appendChild(opt);

}

function clear() {

var day = dom.getElementById("day");

var optArr = day.childNodes;

for (var i = optArr.length - 1; i >= 0; i--) {

day.removeChild(optArr[i]);

}

function getBirthday() {

//获取Dom

var dom = window.document;

myYear();

myMonth();

}

getBirthday();

</script>

<title>javascript</title>

</head>

<body>

生日:

</select>

</select>

</select>

</body>

</html>

2. 生产一个验证码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

/**

* @author Administrator

//验证码 ,4位的,由字符,数字组成.

function createCode() {

var datas = ["A", "B", "C", "D", "E", "F", "G", "H", "Z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];

//随机的从数组中取出4个元素.

var mess = "";

var index = 0;

for (var i = 0; i < 4; i++) {

//生成随机数.而且是在数组的长度范围内.

//0-9之间的随机数. Math.floor(Math.random()*10)

//0到数组长度(不包含)之间的浮点数.,向下取整,

var index = Math.floor(Math.random() * datas.length);

mess += datas[index];

};

var codeSpan = window.document.getElementById("codeSpan");

codeSpan.style.color = "red";

codeSpan.style.fontSize = "20px";

codeSpan.style.background = "gray";

codeSpan.style.fontWeight = "900";

codeSpan.style.fontStyle = "italic";

codeSpan.style.textDecoration = "line-through";

codeSpan.innerHTML = mess;

codeSpan.value = mess;

}

createCode();

</script>

<title>javascript</title>

</head>

<body>

</body>

</html>

Styx1222

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js生成二级城市联动菜单，动态生成年、月、日字段，生产一个验证码

1. 生成二级城市联动菜单 DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">htmlxmlns="http://www.w3.org/1999/xhtml">he
复制链接

扫一扫