一：图片与选项联动
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type = "text/javascript" src="index.js"></script>
</head>
<body onload="ymd(),initLogo()">
<form>
<select name="yyyy" id = "yyyy"></select>年
<select name="mm" id = "mm" onchange="seletYmd()"></select>月
<select name="dd" id = "dd"></select>日
<input type = "button" value = "删除列表框条目" onclick="
deleteSelect()"><br>
<img id = "logoImg" src="../image/4.png">
<select id="logo" onchange="selectLogo()"></select>
</form>
</body>
</html>
index.css
function ymd(){
var yyyy = document.getElementById("yyyy");
var mm = document.getElementById("mm");
var dd = document.getElementById("dd");
var date = new Date();
var year = parseInt(date.getFullYear());
initSelect(yyyy,1999,year);
initSelect(mm,1,12);
initSelect(dd,1,31);
//获取年列表框的长度
var n = yyyy.length;
//列表框选中中间的条目
yyyy.selectedIndex = Math.round(n/2)
//把日列表框，长度设为0，起到删除的效果
// dd.options.length = 0
}
//给列表框赋值，传递三个参数：表单元素，开始值，结束值
function initSelect(obj,start,end) {
for(var i=start;i<=end;i++){
obj.options.add(new Option(i,i));
}
}
function seletYmd(){
var yyyy = document.getElementById("yyyy");
var mm = document.getElementById("mm");
var dd = document.getElementById("dd");
var m = parseInt(mm.value);
var dayEnd;
if(m == 4 || m == 6 ||m == 9 || m ==11){
dayEnd = 30;
}else if(m==2){
dayEnd = 28;
}else{
dayEnd = 31;
}
dd.options.length = 0;
initSelect(dd,1,dayEnd);
}
//删除列表框的某一个条目，即：按索引号删除
function deleteSelect(){
var dd = document.getElementById("dd");
dd.options.remove(1);
}
function initLogo() {
var logo = document.getElementById("logo");
for (i = 1;i<=5;i++){
logo.options.add(new Option(i,i))
}
}
function selectLogo() {
var logo = document.getElementById("logo");
var n = logo.value;
var logoImg = document.getElementById("logoImg");
logoImg.src = "../image/" + n + ".png"
}
image.png
网友评论