任务一
运动的没法截图我就不截图了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
img{
float: left;
}
//内部轮播图
#lbt{
display: inline-block;
width: 5000px;
position: relative;
}
.m20{
margin-left: 20px;
}
//居中显示的方块
#jzxs{
width: 590px;
height:470px;
position: fixed;
text-align: center;
top: calc(50vh - 470px / 2 );
left: calc(50vw - 590px / 2 );
overflow: hidden;
}
</style>
<script type="text/javascript">
var obj
var intl
function yidong(){
var myi=1
//定时移动
var myjsq=setInterval(function(){
myi++;
window.intl=window.intl-10;
intls=window.intl+"px";
console.log(intls);
window.obj.style.left=intls;
if (myi==62){
clearInterval(myjsq);
}
},80);
}
window.onload=function(){
obj =document.getElementById("yd")
intl= window.obj.style.left;
//起始移动
setTimeout(yidong,3000)
//获取img个数
my_fors=document.getElementsByTagName("img").length;
//动态循环img图片
for (i = 1; i < my_fors-1; i++){
setTimeout(yidong,i*10000+12000)
}
}
</script>
</head>
<body style="text-align: center;">
<div id="jzxs">
<div id="lbt">
<img src="C:\\Users\\admin\\Desktop\\lbt\\1 (1).png" width="590px" />
<img class="m20" src="C:\\Users\\admin\\Desktop\\lbt\\1 (2).png" width="590px" />
<img class="m20" src="C:\\Users\\admin\\Desktop\\lbt\\1 (3).png" width="590px" />
<img class="m20" src="C:\\Users\\admin\\Desktop\\lbt\\1 (4).png" width="590px"/>
<img class="m20" src="C:\\Users\\admin\\Desktop\\lbt\\1 (5).png" width="590px" />
<img class="m20" src="C:\\Users\\admin\\Desktop\\lbt\\1 (5).png" width="590px" />
</div>
</div>
</body>
</html>
任务二
变量：var 不需要设置类型，由JS自动分辨类型做处理，又全局变量和局部变量，全局可以用window.获取;
循环：for和while 两种循环一种是按照次数一个是按照判断条件；
判断：if和else if是带有条件的内容，而else是所有其他的内容；
函数：复用、便于梳理、便于分块处理；
JS类：必须在访问前对类进行定义，ES6中class (类)被引入，而且和函数的差异不到，并且内部可以定义函数
事件：鼠标的点击、经过，键盘按下等各种时间的内容；
dom/CSS：各种标签获取和样式属性的处理，修改和增加相关内容等；
多级联动菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var jsondata={
"北京市":{
"北京市":["东城区","东城区2","东城区3"]
},
"天津市":{"天津市":["河东","河西","南开","和平","河北","虹桥"]},
"湖北省":{"武汉市":["汉江","桥口","武昌","汉阳","洪山","江夏","江岸","汉江","桥口","武昌","汉阳","洪山","江夏","江岸"],
"黄港市":["黄港市1","黄港市2","黄港市3"]
},
}
jsondata_sheng=[]
i=0;
for (var key in window.jsondata) {
jsondata_sheng[i]=key;
i++
}
// values="1" οnclick="my_click(this)"
window.onload=function(){
var my_a1=document.getElementsByClassName("selecdiv");
for (i=0;i<parseInt(my_a1.length);i++){
my_a1[i].onclick=function(){
a1ch=this.children;
my_class=this.children[1].getAttribute("class");
if (my_class=="my_hover my_hidden"){
a1ch[0].children[1].setAttribute("class","triangle_down");
a1ch[1].setAttribute("class","my_hover");
}else if(my_class=="my_hover"){
a1ch[0].children[1].setAttribute("class","triangle_up");
a1ch[1].setAttribute("class","my_hover my_hidden");
}
}
}
divstr="<div οnclick='my_click(this)'>请选省 </div>"
for(i=0;i<jsondata_sheng.length;i++){
divstr=divstr+"<div οnclick='my_click(this)'>"+jsondata_sheng[i]+" </div>"
}
document.getElementById("a11").innerHTML=divstr;
}
function my_click(mythis){
//获取外层id
parentID=mythis.parentNode.parentNode.getAttribute("id");
document.getElementById(parentID).children[0].children[0].innerText=mythis.innerText
i=0
list_name=mythis.innerText
list_name=list_name.replace(/^\s+|\s+$/g,"");
if(parentID=="a1"){
document.getElementById("a2").children[0].children[0].innerText="请选市 "
document.getElementById("a3").children[0].children[0].innerText="请选区 "
jsondata_shi="<div οnclick='my_click(this)'>请选区 </div>"
for (var key in jsondata[list_name]) {
jsondata_shi=jsondata_shi+"<div lve='"+list_name+"' οnclick='my_click(this)'>"+key+" </div>";
i++
}
mythis.parentNode.parentNode.nextElementSibling.children[1].innerHTML=jsondata_shi
}else if(parentID=="a2"){
lve=mythis.getAttribute("lve");
mythis.parentNode.parentNode.nextElementSibling.children[0].children[0].innerText="请选区 "
jd=jsondata[lve][list_name]
console.log(jd);
jsondata_shi="<div οnclick='my_click(this)'>请选区 </div>"
for (j=0; j<jd.length;j++) {
jsondata_shi=jsondata_shi+"<div οnclick='my_click(this)'>"+jd[j]+" </div>";
}
mythis.parentNode.parentNode.nextElementSibling.children[1].innerHTML=jsondata_shi
}
//获取选项值
}
</script>
<style>
*{
margin: 0;
padding: 0;
}
.selecdiv{
position: relative;
float: left;
width: 100px;
text-align: center;
line-height: 25px;
height: 25px;
background-color: aliceblue;
margin: 2px;
cursor: pointer;
}
.triangle_up{
display: inline-block;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid black;
}
.triangle_down{
display: inline-block;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid black;
}
.my_hover{
border-style: solid;
border-width: 0px 1px 1px 1.5px;
border-color: aliceblue;
overflow-y: overlay;
height: 200px;
}
.my_hover div:hover{
background-color: antiquewhite;
cursor: pointer;
}
.my_hidden{
display: none;
}
</style>
</head>
<body>
<div id="a1" class="selecdiv">
<div style="overflow: hidden;"><span>请选省 </span><i class="triangle_up"></i></div>
<div id="a11" class="my_hover my_hidden">
</div>
</div>
<div id="a2" class="selecdiv" >
<div style="overflow: hidden;"><span>请选市 </span><i class="triangle_up"></i></div>
<div id="a21" class="my_hover my_hidden">
<div>
暂无数据
</div>
</div>
</div>
<div id="a3" class="selecdiv">
<div style="overflow: hidden;"><span>请选区 </span><i class="triangle_up"></i></div>
<div id="a31" class="my_hover my_hidden">
<div>
暂无数据
</div>
</div>
</div>
</body>
</html>
完全手动写的下拉列表，用的是DIV为主，三级联动，想念JQuery哈哈哈
基础算法逻辑
冒泡排序：循环排序内容中size的次数，并且每一次都是从第一个开始比较，将比价后大的后移一直移动到最后为止，每次循环都是如此，只是每次会根据次数减少向后移动的位数；
计数排序：创建一个和数据集类型个数想的集合，并且将数据集逐一对应的放到创建的集合中，然后再把集合按照顺序逐一排列即可完成
递归：在函数中调用自己，不过为了避免死循环调用，必须在特定条件反馈非递归内容，例如斐波那契数列
PS：算法部分的资料内容，虽然能顺着看下来，但除了冒泡递归这种有实际应用和认知的，其他看完基本不明白什么时候去用，所以算法还是在实战中去学习比较好
192
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
