一：省级联动菜单
HTML部分代码
如下图所示
有两个下拉标签组成
当select元素的option的选项发生改变时，触发onChange事件
css代码如图所示
效果如图
分析：JavaScript代码
1.第一步：回填省份下拉表
Var SFarray=[‘湖北’, ’湖南’, ‘广东’];
2获取省份select元素
var SFselect = ElementById('province');
3. 在省份元素里添加option子元素
遍历省份数组，依次添加option子元素
for(var i=0;i<SFArray.length;i++){
创建option子元素
var SFoption = ateElement('option');
SFoption.innerHTML = SFArray[i];
给省份option元素添加value值，联动城市回填
SFoption.value = i;
添加到SFselect元素里
SFselect.appendChild(SFoption);
}
第二步：城市下拉列表的回填
定义城市数组
var CSArray = [
['武汉', '襄阳', '荆州'],
['长沙', '株洲', '湘潭'],
['广州', '深圳', '东莞']
];
获取城市下拉列表
var CSselect = ElementById('city');
function SFonChange(){
回填城市下拉列表
接收省份的value，来判断选中了哪个省份
var val = SFselect.value;
将城市下拉列表的元素重置
CSselect.options.length = 1;
for(var j=0;j<CSArray[val].length;j++){
创建城市option元素
var CSoption = ateElement('option');
给城市option元素添加城市名
CSoption.innerHTML = CSArray[val][j];
将创建好的城市option元素添加到城市select元素里
CSselect.appendChild(CSoption);
}
}
二：点击产生随机事件（星星亮起来）
效果预览；
<style>
#dv {
background: black;
width: 600px;
height: 600px;
position: relative;
}
span {
position: absolute;
font-size: 30px;
}
</style>
</head>
<body>
<input type="button" value="亮起来" id="btn">
<div id="dv">
</div>
<script>
load = function (){
获取黑色幕布元素和按钮元素
var dv = ElementById('dv');
var btn = ElementById('btn');
lick = function (){
setInterval(function (){
添加星星到幕布里去
dv.innerHTML = '<span>⭐</span>'
产生随机left值和top值
var x = parseInt(Math.random() * 600);
var y = parseInt(Math.random() * 600);
给星星元素设置left和top值
dv.firstChild.style.left = x + 'px';
dv.p = y + 'px';
}, 5);
}
}
</script>
本文发布于:2024-02-02 06:04:40，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170682507741851.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
