js基础知识汇总13

图片轮播

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}/** 设置outer的样式*/#outer{/*设置宽和高*/width: 520px;height: 333px;/*居中*/margin: 50px auto;/*设置背景颜色*/background-color: greenyellow;/*设置padding*/padding: 10px 0;/*开启相对定位*/position: relative;/*裁剪溢出的内容*/overflow: hidden;}/*设置imgList*/#imgList{/*去除项目符号*/list-style: none;/*设置ul的宽度*//*width: 2600px;*//*开启绝对定位*/position: absolute;/*设置偏移量*//** 每向左移动520px，就会显示到下一张图片*/left: 0px;}/*设置图片中的li*/#imgList li{/*设置浮动*/float: left;/*设置左右外边距*/margin: 0 10px;}/*设置导航按钮*/#navDiv{/*开启绝对定位*/position: absolute;/*设置位置*/bottom: 15px;/*设置left值outer宽度  520navDiv宽度 25*5 = 125520 - 125 = 395/2 = 197.5* *//*left: 197px;*/}#navDiv a{/*设置超链接浮动*/float: left;/*设置超链接的宽和高*/width: 15px;height: 15px;/*设置背景颜色*/background-color: red;/*设置左右外边距*/margin: 0 5px;/*设置透明*/opacity: 0.5;/*兼容IE8透明*/filter: alpha(opacity=50);}/*设置鼠标移入的效果*/#navDiv a:hover{background-color: black;}</style><!--引用工具--><script type="text/javascript" src="js/tools.js"></script><script type="text/javascript">window.onload = function(){//获取imgListvar imgList = document.getElementById("imgList");//获取页面中所有的img标签var imgArr = document.getElementsByTagName("img");//设置imgList的宽度imgList.style.width = 520*imgArr.length+"px";/*设置导航按钮居中*///获取navDivvar navDiv = document.getElementById("navDiv");//获取outervar outer = document.getElementById("outer");//设置navDiv的left值navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";//默认显示图片的索引var index = 0;//获取所有的avar allA = document.getElementsByTagName("a");//设置默认选中的效果allA[index].style.backgroundColor = "black";/*点击超链接切换到指定的图片点击第一个超链接，显示第一个图片点击第二个超链接，显示第二个图片* *///为所有的超链接都绑定单击响应函数for(var i=0; i<allA.length ; i++){//为每一个超链接都添加一个num属性allA[i].num = i;//为超链接绑定单击响应函数allA[i].onclick = function(){//关闭自动切换的定时器clearInterval(timer);//获取点击超链接的索引,并将其设置为indexindex = this.num;//切换图片/** 第一张  0 0* 第二张  1 -520* 第三张  2 -1040*///imgList.style.left = -520*index + "px";//设置选中的asetA();//使用move函数来切换图片move(imgList , "left" , -520*index , 20 , function(){//动画执行完毕，开启自动切换autoChange();});};}//开启自动切换图片autoChange();//创建一个方法用来设置选中的afunction setA(){//判断当前索引是否是最后一张图片if(index >= imgArr.length - 1){//则将index设置为0index = 0;//此时显示的最后一张图片，而最后一张图片和第一张是一摸一样//通过CSS将最后一张切换成第一张imgList.style.left = 0;}//遍历所有a，并将它们的背景颜色设置为红色for(var i=0 ; i<allA.length ; i++){allA[i].style.backgroundColor = "";}//将选中的a设置为黑色allA[index].style.backgroundColor = "black";};//定义一个自动切换的定时器的标识var timer;//创建一个函数，用来开启自动切换图片function autoChange(){//开启一个定时器，用来定时去切换图片timer = setInterval(function(){//使索引自增index++;//判断index的值index %= imgArr.length;//执行动画，切换图片move(imgList , "left" , -520*index , 20 , function(){//修改导航按钮setA();});},3000);}};</script></head><body><!-- 创建一个外部的div，来作为大的容器 --><div id="outer"><!-- 创建一个ul，用于放置图片 --><ul id="imgList"><li><img src="img/1.jpg"/></li><li><img src="img/2.jpg"/></li><li><img src="img/3.jpg"/></li><li><img src="img/4.jpg"/></li><li><img src="img/5.jpg"/></li><li><img src="img/1.jpg"/></li></ul><!--创建导航按钮--><div id="navDiv"><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a></div></div></body>
</html>

//尝试创建一个可以执行简单动画的函数
/** 参数：*     obj:要执行动画的对象*   attr:要执行动画的样式，比如：left top width height*   target:执行动画的目标位置*   speed:移动的速度(正数向右移动，负数向左移动)*  callback:回调函数，这个函数将会在动画执行完毕以后执行*/
function move(obj, attr, target, speed, callback) {//关闭上一个定时器clearInterval(obj.timer);//获取元素目前的位置var current = parseInt(getStyle(obj, attr));//判断速度的正负值//如果从0 向 800移动，则speed为正//如果从800向0移动，则speed为负if(current > target) {//此时速度应为负值speed = -speed;}//开启一个定时器，用来执行动画效果//向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识obj.timer = setInterval(function() {//获取box1的原来的left值var oldValue = parseInt(getStyle(obj, attr));//在旧值的基础上增加var newValue = oldValue + speed;//判断newValue是否大于800//从800 向 0移动//向左移动时，需要判断newValue是否小于target//向右移动时，需要判断newValue是否大于targetif((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {newValue = target;}//将新值设置给box1obj.style[attr] = newValue + "px";//当元素移动到0px时，使其停止执行动画if(newValue == target) {//达到目标，关闭定时器clearInterval(obj.timer);//动画执行完毕，调用回调函数callback && callback();}}, 30);
}/** 定义一个函数，用来获取指定元素的当前的样式* 参数：*      obj 要获取样式的元素*       name 要获取的样式名*/
function getStyle(obj, name) {if(window.getComputedStyle) {//正常浏览器的方式，具有getComputedStyle()方法return getComputedStyle(obj, null)[name];} else {//IE8的方式，没有getComputedStyle()方法return obj.currentStyle[name];}}//定义一个函数，用来向一个元素中添加指定的class属性值
/** 参数:*    obj 要添加class属性的元素*  cn 要添加的class值*  */
function addClass(obj, cn) {//检查obj中是否含有cnif(!hasClass(obj, cn)) {obj.className += " " + cn;}}/** 判断一个元素中是否含有指定的class属性值*  如果有该class，则返回true，没有则返回false*     */
function hasClass(obj, cn) {//判断obj中有没有cn class//创建一个正则表达式//var reg = /\bb2\b/;var reg = new RegExp("\\b" + cn + "\\b");return reg.test(obj.className);}/** 删除一个元素中的指定的class属性*/
function removeClass(obj, cn) {//创建一个正则表达式var reg = new RegExp("\\b" + cn + "\\b");//删除classobj.className = obj.className.replace(reg, "");}/** toggleClass可以用来切换一个类*     如果元素中具有该类，则删除*   如果元素中没有该类，则添加*/
function toggleClass(obj, cn) {//判断obj中是否含有cnif(hasClass(obj, cn)) {//有，则删除removeClass(obj, cn);} else {//没有，则添加addClass(obj, cn);}}

类的操作

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.b1{width: 100px;height: 100px;background-color: red;}.b2{height: 300px;background-color: yellow;}</style><script type="text/javascript">window.onload = function(){//获取boxvar box = document.getElementById("box");//获取btn01var btn01 = document.getElementById("btn01");//为btn01绑定单击响应函数btn01.onclick = function(){//修改box的样式/** 通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面*     这样的执行的性能是比较差的，而且这种形式当我们要修改多个样式时，也不太方便*//*box.style.width = "200px";box.style.height = "200px";box.style.backgroundColor = "yellow";*//** 我希望一行代码，可以同时修改多个样式*///修改box的class属性/** 我们可以通过修改元素的class属性来间接的修改样式* 这样一来，我们只需要修改一次，即可同时修改多个样式，*  浏览器只需要重新渲染页面一次，性能比较好，*    并且这种方式，可以使表现和行为进一步的分离*///box.className += " b2";//addClass(box,"b2");//alert(hasClass(box,"hello"));//removeClass(box,"b2");toggleClass(box,"b2");};};//定义一个函数，用来向一个元素中添加指定的class属性值/** 参数:*  obj 要添加class属性的元素*  cn 要添加的class值*  */function addClass(obj , cn){//检查obj中是否含有cnif(!hasClass(obj , cn)){obj.className += " "+cn;}}/** 判断一个元素中是否含有指定的class属性值*  如果有该class，则返回true，没有则返回false*     */function hasClass(obj , cn){//判断obj中有没有cn class//创建一个正则表达式//var reg = /\bb2\b/;var reg = new RegExp("\\b"+cn+"\\b");return reg.test(obj.className);}/** 删除一个元素中的指定的class属性*/function removeClass(obj , cn){//创建一个正则表达式var reg = new RegExp("\\b"+cn+"\\b");//删除classobj.className = obj.className.replace(reg , "");}/** toggleClass可以用来切换一个类*  如果元素中具有该类，则删除*   如果元素中没有该类，则添加*/function toggleClass(obj , cn){//判断obj中是否含有cnif(hasClass(obj , cn)){//有，则删除removeClass(obj , cn);}else{//没有，则添加addClass(obj , cn);}}</script></head><body><button id="btn01">点击按钮以后修改box的样式</button><br /><br /><div id="box" class="b1 b2"></div></body>
</html>

二级菜单

@charset "utf-8";/* sdmenu */div.sdmenu {width: 150px;margin: 0 auto;font-family: Arial, sans-serif;font-size: 12px;padding-bottom: 10px;background: url(bottom.gif) no-repeat right bottom;color: #fff;
}div.sdmenu div {background: url(title.gif) repeat-x;overflow: hidden;
}div.sdmenu div:first-child {background: url(toptitle.gif) no-repeat;
}div.sdmenu div.collapsed {height: 25px;
}div.sdmenu div span {display: block;height: 15px;line-height: 15px;overflow: hidden;padding: 5px 25px;font-weight: bold;color: white;background: url(expanded.gif) no-repeat 10px center;cursor: pointer;border-bottom: 1px solid #ddd;
}div.sdmenu div.collapsed span {background-image: url(collapsed.gif);
}div.sdmenu div a {padding: 5px 10px;background: #eee;display: block;border-bottom: 1px solid #ddd;color: #066;
}div.sdmenu div a.current {background: #ccc;
}div.sdmenu div a:hover {background: #066 url(linkarrow.gif) no-repeat right center;color: #fff;text-decoration: none;
}

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>二级菜单</title><style type="text/css">* {margin: 0;padding: 0;list-style-type: none;}a,img {border: 0;text-decoration: none;}body {font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";}</style><link rel="stylesheet" type="text/css" href="css/sdmenu.css" /><script type="text/javascript" src="js/tools.js"></script><script type="text/javascript">window.onload = function(){/** 我们的每一个菜单都是一个div*  当div具有collapsed这个类时，div就是折叠的状态*  当div没有这个类是，div就是展开的状态*//** 点击菜单，切换菜单的显示状态*///获取所有的class为menuSpan的元素var menuSpan = document.querySelectorAll(".menuSpan");//定义一个变量，来保存当前打开的菜单var openDiv = menuSpan[0].parentNode;//为span绑定单击响应函数for(var i=0 ; i<menuSpan.length ; i++){menuSpan[i].onclick = function(){//this代表我当前点击的span//获取当前span的父元素var parentDiv = this.parentNode;//切换菜单的显示状态toggleMenu(parentDiv);//判断openDiv和parentDiv是否相同if(openDiv != parentDiv  && !hasClass(openDiv , "collapsed")){//打开菜单以后，应该关闭之前打开的菜单//为了可以统一处理动画过渡效果，我们希望在这将addClass改为toggleClass//addClass(openDiv , "collapsed");//此处toggleClass()不需要有移除的功能//toggleClass(openDiv , "collapsed");//切换菜单的显示状态toggleMenu(openDiv);}//修改openDiv为当前打开的菜单openDiv = parentDiv;};}/** 用来切换菜单折叠和显示状态*/function toggleMenu(obj){//在切换类之前，获取元素的高度var begin = obj.offsetHeight;//切换parentDiv的显示toggleClass(obj , "collapsed");//在切换类之后获取一个高度var end = obj.offsetHeight;//console.log("begin = "+begin +" , end = "+end);//动画效果就是将高度从begin向end过渡//将元素的高度重置为beginobj.style.height = begin + "px";//执行动画，从bengin向end过渡move(obj,"height",end,10,function(){//动画执行完毕，内联样式已经没有存在的意义了，删除之obj.style.height = "";});}};</script></head><body><div id="my_menu" class="sdmenu"><div><span class="menuSpan">在线工具</span><a href="#">图像优化</a><a href="#">收藏夹图标生成器</a><a href="#">邮件</a><a href="#">htaccess密码</a><a href="#">梯度图像</a><a href="#">按钮生成器</a></div><div class="collapsed"><span class="menuSpan">支持我们</span><a href="#">推荐我们</a><a href="#">链接我们</a><a href="#">网络资源</a></div><div class="collapsed"><span class="menuSpan">合作伙伴</span><a href="#">JavaScript工具包</a><a href="#">CSS驱动</a><a href="#">CodingForums</a><a href="#">CSS例子</a></div><div class="collapsed"><span class="menuSpan">测试电流</span><a href="#">Current or not</a><a href="#">Current or not</a><a href="#">Current or not</a><a href="#">Current or not</a></div></div></body>
</html>

JSON

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><!--如果需要兼容IE7及以下的JSON操作，则可以通过引入一个外部的js文件来处理--><script type="text/javascript" src="js/json2.js"></script><script type="text/javascript">/** JSON*  - JS中的对象只有JS自己认识，其他的语言都不认识*  - JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，*         并且可以转换为任意语言中的对象，JSON在开发中主要用来数据的交互*   - JSON*         - JavaScript Object Notation JS对象表示法*       - JSON和JS对象的格式一样，只不过JSON字符串中的属性名必须加双引号*          其他的和JS语法一致*         JSON分类：*             1.对象 {}*            2.数组 []* *      JSON中允许的值：*          1.字符串*          2.数值*           3.布尔值*          4.null*             5.对象*           6.数组*///创建一个对象var arr = '[1,2,3,"hello",true]';var obj2 = '{"arr":[1,2,3]}';var arr2 ='[{"name":"孙悟空","age":18,"gender":"男"},{"name":"孙悟空","age":18,"gender":"男"}]';/** 将JSON字符串转换为JS中的对象*     在JS中，为我们提供了一个工具类，就叫JSON*  这个对象可以帮助我们将一个JSON转换为JS对象，也可以将一个JS对象转换为JSON*/var json = '{"name":"孙悟空","age":18,"gender":"男"}';/** json --> js对象*      JSON.parse()*      - 可以将以JSON字符串转换为js对象*       - 它需要一个JSON字符串作为参数，会将该字符串转换为JS对象并返回*/var o = JSON.parse(json);var o2 = JSON.parse(arr);//console.log(o.gender);//console.log(o2[1]);var obj3 = {name:"猪八戒" , age:28 , gender:"男"};/** JS对象 ---> JSON*  JSON.stringify()*       - 可以将一个JS对象转换为JSON字符串*      - 需要一个js对象作为参数，会返回一个JSON字符串*/var str = JSON.stringify(obj3);//console.log(str);/** JSON这个对象在IE7及以下的浏览器中不支持，所以在这些浏览器中调用时会报错*/var str3 = '{"name":"孙悟空","age":18,"gender":"男"}';JSON.parse(str3);</script></head><body></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">var str = '{"name":"孙悟空","age":18,"gender":"男"}';/** eval()*     - 这个函数可以用来执行一段字符串形式的JS代码，并将执行结果返回*   - 如果使用eval()执行的字符串中含有{},它会将{}当成是代码块*        如果不希望将其当成代码块解析，则需要在字符串前后各加一个()* *    - eval()这个函数的功能很强大，可以直接执行一个字符串中的js代码，*        但是在开发中尽量不要使用，首先它的执行性能比较差，然后它还具有安全隐患*/var str2 = "alert('hello');";var obj = eval("("+str+")");//console.log(obj);</script></head><body></body>
</html>

js基础知识汇总13相关推荐

JS基础知识学习（一）
JS基础知识前端开发常用的浏览器谷歌浏览器(chrome):Webkit内核(v8引擎) 火狐浏览器(firefox):Gecko内核欧朋浏览器(opera):Presto内核 IE浏览器:Tr ...
计算机网络把许多什么连接在一起,计算机网络技术基础知识汇总习题
计算机网络技术基础知识汇总习题 1.21世纪要实现信息化,就必须依靠完善的网络,这里的网络是指,向用户提供不同服务的电信网络,有线电视网络和计算机网络三种网络.(电信网络,有线电视网络,计算机网络) ...
js基础知识学习（二）
JS基础知识 JavaScript 数据类型转换把其它数据类型转换为number类型 isNaN .Number.parseInt.parseFloat 在进行加减乘除数学运算的时候 true-&g ...
网络基础知识汇总学习
一.网线(双绞线)连接线的制作双绞线制作有 568A 和 568B 两个标准,日常以 568B 标准较常用. 568B 标准按颜色排序为: 1- 橙白. 2- 橙.3- 绿白.4- 蓝. 5- 蓝白 ...
【若泽大数据001】Linux基础知识汇总
[若泽大数据001]Linux基础知识汇总前情提要: Linux平台搭建 [若泽大数据001]Linux基础知识汇总 1.查看当前光标所在的目录的命令是什么? 2.切换到当前用户的家目录,哪三种方式 ...
高二上计算机知识点,高二会考计算机基础知识汇总.doc
高二会考计算机基础知识汇总.doc 计算机应用基础试卷结构与题型试题分为知识题和操作题两大类,其中知识题约占40,操作题约占60.试卷内容比例为计算机基础知识和操作系统及其应用约占30.文字编辑.电子 ...
“元宇宙”基础知识汇总
元宇宙即将到来,无论您是否准备好. 随着技术迅猛发展,我们很容易迷失方向--或者被抛在后面,但没有必要恐慌.本文为大家准备了元宇宙基础知识汇总,由元创元宇宙研究院融合了目前网络对元宇宙的描述和分析的多 ...
c++语言基础知识,c++语言基础知识汇总.ppt
<c++语言基础知识汇总.ppt>由会员分享,可在线阅读,更多相关<c++语言基础知识汇总.ppt(68页珍藏版)>请在人人文库网上搜索. 1.1,第二章 C+语言初步,本章主 ...
脑科学与脑电基础知识汇总
点击上面"脑机接口社区"关注我们更多技术干货第一时间送达脑科学与脑电基础知识汇总该部分汇总了社区分享的部分脑科学.EEG.fNIRS.BCI.人机交互等相关知识. 脑电与情绪 ...
python基础知识资料-Python基础知识汇总
原标题:Python基础知识汇总 1.Anaconda的安装百度Anaconda的官网,下载左边的Python3.X版本然后是设置路径,最后给出Jupyter notebook.具体参考: 猴子: ...

js基础知识汇总13

图片轮播

类的操作

二级菜单

JSON

js基础知识汇总13相关推荐

最新文章

热门文章