JavaScript——简单编程

任务⼀

• ⾸先，能够⽤HTML + CSS + JavaScript在⻚⾯正中⽣成⼀幅⼴告图⽚
• 其次，⽤JavaScript数组在⻚⾯上放置多张⼴告图⽚，同时动态计算不同⼴告位之间的布局，实现⽔平等间距布局
• 最后，⽤JavaScript代码实现多张⼴告图⽚轮播效果：在⻚⾯正中每隔3秒切换不同的⼴告图⽚，多张图⽚轮流显示

实现方法

• 第一步：（先加入一张照片）<img id="img" src="c1-04/1.jpg" alt="火锅">
• 第二步：（设置图片显示函数）

 function setcount(){
        var pathString = path + index + ".jpg";
        document.getElementById("img").setAttribute("src",pathString);  
        index++; 
        if(index == 4){ 
            index = 1;
        }
    }

• 第三步：（通过setInterval(“切换图片函数”, 3000); 实现（每3秒切换一张图片））

var time = setInterval("setcount()", 3000);

最终效果图为：

拓展任务

• ⽤HTML + CSS + JavaScript实现⽹⻚上常⻅的「省市区多级联动下拉菜单」（理解树型数据结构）

实现方法

• 1、构建对象容纳（包含：省、市、区）的信息。

• 2、写三个 标签， 快速搭建出（省、市、区）模型。

• 3、给（省、市、区）的select 标签附上（独自id）, document.getElementById(“id名”)获取。

• 4、写4个函数分别为：默认（加载省）、（已选省：加载市）、（已选省市：加载区）、（选中区存数据）

效果如图

本次的学习任务就到此结束啦！

请各位大佬多多指教。