任务一

运动的没法截图我就不截图了

<!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 objvar intlfunction 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)'>请选省&nbsp;</div>"for(i=0;i<jsondata_sheng.length;i++){divstr=divstr+"<div  οnclick='my_click(this)'>"+jsondata_sheng[i]+"&nbsp;</div>"}document.getElementById("a11").innerHTML=divstr;}function my_click(mythis){//获取外层idparentID=mythis.parentNode.parentNode.getAttribute("id");document.getElementById(parentID).children[0].children[0].innerText=mythis.innerTexti=0list_name=mythis.innerTextlist_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)'>请选区&nbsp;</div>"for (var key in jsondata[list_name]) {jsondata_shi=jsondata_shi+"<div lve='"+list_name+"'  οnclick='my_click(this)'>"+key+"&nbsp;</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)'>请选区&nbsp;</div>"for (j=0; j<jd.length;j++) {jsondata_shi=jsondata_shi+"<div οnclick='my_click(this)'>"+jd[j]+"&nbsp;</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>请选省&nbsp;</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>请选市&nbsp;</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>请选区&nbsp;</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：算法部分的资料内容，虽然能顺着看下来，但除了冒泡递归这种有实际应用和认知的，其他看完基本不明白什么时候去用，所以算法还是在实战中去学习比较好

【C1认证任务】C1-4相关推荐

C1认证之web基础知识及习题——我的学习笔记
文章目录目录文章目录前言 Web基础十四.语义化标签知识点习题十五.表单标签知识点习题十六.转义字符知识点习题十七.Head头知识点习题十八.CSS引入方 ...
C1认证学习六（HTTPS）
C1认证学习六(HTTPS) 文章目录 C1认证学习六(HTTPS) 任务学习任务目标加密算法对称加密非对称加密不可逆加密 SSL TLS 任务学习 HTTPS是身披 SSL / TLS 的 ...
C1认证学习一（进制学习）
C1认证学习一(进制学习) 文章目录 C1认证学习一(进制学习) 目标进制的定义二进制八进制十六进制十进制准换方法其他进制转换为十进制十进制转换为其他的进制二进制转换为八进制二进制 ...
C1认证学习十三（数据结构常识）
C1认证学习十三(数据结构常识) 任务背景数据结构是计算机中存储.组织数据的方式,他研究如何构造复杂的软件系统,它的核心是如何分解以及抽象,并且得到软件开发过程中的所需要的逻辑结构. 任务目标 1. ...
C1认证学习四（多媒体基础参数）
C1认证学习四(多媒体基础参数) 文章目录 C1认证学习四(多媒体基础参数) 任务学习任务目标参数的定义比特率采样率采样位深任务学习所谓的多媒体指的是多种媒体的综合,一般都包含有图像.声 ...
C1认证学习十四、十五（算法常识、HTML Head 头）
C1认证学习十四.十五(算法常识.HTML Head 头) 文章目录 C1认证学习十四.十五(算法常识.HTML Head 头) 十四(算法常识) 任务背景任务目标查找算法 1.顺序查找 2.二分 ...
C1认证学习五（HTTP）
C1认证学习五(HTTP) 文章目录 C1认证学习五(HTTP) 学习任务任务目标学习任务超文本传输协议: Hyper Text Transfer Protocol:HTTP HTTP是一个简单 ...
C1认证学习三（数据校验）
C1认证学习三(数据校验) 文章目录 C1认证学习三(数据校验) 数据校验任务背景校验的方法奇偶校验数据校验这是第三个笔记:数据的校验. 任务背景在数据传输的过程中,会受到各种各样的干扰. ...
C1认证学习十（Ipv6）
C1认证学习十(Ipv6) 任务背景 IPv4 中的分类不太合理,可以使用的IP地址数量过少,因此IPv6出现了,它的英文是Internet Protocol Version 6(互联网协议第六版), ...
C1认证学习十一（常用网络命令以及端口）
C1认证学习十一(常用网络命令以及端口) 任务背景工程师们天天在使用计算机做软件开发,有时候出了问题需要来确定到底是自己的问题,还是网络的问题,所以需要学习并且了解一些常见的计算机的命令以及开发中常 ...

【C1认证任务】C1-4

目录

任务一

任务二

多级联动菜单

基础算法逻辑

【C1认证任务】C1-4相关推荐

最新文章

热门文章