js | 易学教程

原生js与jquery的区别

阅读更多关于原生js与jquery的区别

1.选择器： js:　　　　$('.car_img_con img')[0]; var jsObj = document.getElementsByClassName('sel_index_block')[0];jsObj.html();TypeError: undefined is not a function jquery:　 $('.car_img_con img'); var jqObj = $('.sel_index_block').eq(0); jqObj.html() "不选预算" 2.文档加载：页面加载过程有两个事件，一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），二是onload，指示页面包含图片等文件在内的所有元素都加载完成。（可以说：ready 在onload 前加载。）（1）一些待调用函数定义，要在调用前定义。（2）对于完善网页元素的JS，伴随文档加载执行。（3）而绑定元素事件响应的JS，则一定要等到相应元素加载后或文档全部加载完成后再执行，否则无法找到元素，当然不可绑定事件。 js:　　 window.onload = function(){ 　　document.getElementById('id').addEventListener('click',func,false); //需定义响应函数func } 　

js/数值

阅读更多关于 js/数值

1、toString（数字转字符串）　　toString方法可以接受一个参数，表示输出的进制。如果省略这个参数，默认将数值转成十进制的字符串；否则就根据参数指定的进制，将一个数字转化成某个进制的字符串　　toString 方法只能将十进制的数，转为其他进制的字符串。如果要将其他进制的数，转回十进制，需要使用 parseInt 方法。　　( 10 ).toString( )　　// "10" 　　( 10 ).toString( 2 )　　// "1010" 　　( 10 ).toString( 8 )　　// "12" 　　( 10 ).toString( 16 )　　// "a" 　　10["toString"]( 2 )　　// "1010" 　　注意：上面代码中，数字一定要放在括号里，这样表明后面的点表示调用对象属性。如果不加括号，这个点会被 JavaScript 引擎解释成小数点，从而报错。 2、toFixed（保留数字小数点后几位）　　toFixed( )方法将数字转成指定位数的小数的字符串　　由于浮点数的原因，小数 5 的四舍五入是不确定的，使用的时候必须小心。　　( 10 ).toFixed( 2 )　　// "10.00" 　　( 10.005 ).toFixed( 2 )　　// "10.01" 　　注意：上面代码中，数字一定要放在括号里

无缝滚动 Js

阅读更多关于无缝滚动 Js

js 无缝切换 CSS .clearfix { clear: both; } .banner { width: 500px; height: 500px; overflow: hidden; margin: 0 auto; position: relative; background: url(../img/loading.gif) no-repeat center;} .banner ul { height: 500px;} .banner li {position: absolute; left: 500px; top: 0; width: 500px; height: 500px; list-style: none; z-index: 5;} .bannerspan { text-align: center; position: absolute; bottom: 10px; left: 0px; width: 500px; z-index: 11;} .bannerspan span { display: inline-block; width: 10px; height: 10px; border-radius: 5px; background: #0ff; margin: 0 3px; cursor: pointer;} .bannerspan span.on {

JS无缝滚动

阅读更多关于 JS无缝滚动

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> *{margin:0;padding:0;} #div1 {width:712px;height:108px;margin:100px auto;} #div1 ul {position:absolute;left:0;top:0;} #div1 ul li{width:200px;height:200px;background: red;position: absolute;left:200px;top:150px;} </style> <script>//无缝滚动 window.onload= function () { var oDiv=document.getElementById('div1'); var oUl=oDiv.getElementsByTagName('ul')[0]; var aLi=oul.getElementsByTagName('li'); var speed=2; oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;//4+4==8 oUl.style.width=aLi[0].offsetWidth*aLi.length+'px

js 无缝滚动

阅读更多关于 js 无缝滚动

1 <html> 2 <head> 3 <meta charset=utf-8 /> 4 <script type="text/javascript"> 5 /** 6 +----------------------------- 7 * @desc js 无缝滚动 8 * @date 2013年02月18日 22:32 9 +----------------------------- 10 */ 11 function S(str_id,xy,speed){ 12 var obj = null,time; 13 speed = typeof speed == 'string' || typeof speed == 'undefined' ? 30 : speed; 14 xy = typeof xy == 'undefined' ? 'x' : xy; 15 if(typeof str_id == 'string'){ 16 obj = document.getElementById(str_id); 17 }else if(typeof str_id == 'object'){ 18 obj = str_id; 19 } 20 var content = obj.innerHTML, 21 id = obj.getAttribute("id"), 22 obj_in =

[Js]无缝滚动

阅读更多关于 [Js]无缝滚动

效果： 1.默认缓慢往左滚动 2.放到左箭头上还是向左滚动，放到右箭头上向右滚动 3.放到图片上停止滚动，移出继续滚动思路： 1.计算图片列表ul的宽度 2.开启定时器，使其向左边距不断增大，造成向左运动的效果 3.图片列表复制一份，向左移动时，当左边距大于一份的宽度时，把它的左边距拉回到0。向右移动时，当左边距大于0时，把它的左边距拉到整个两份图片列表一半的宽度（即一份的宽度）。（拉的瞬间很快，用户察觉不到，造成一种无缝滚动的假象） 4.offsetLeft值的正负决定往哪边移动 5.放到图片上停止这个定时器，移开再开启 window.onload=function(){ var odiv=document.getElementById('div'); var oul=odiv.getElementsByTagName('ul')[0]; var oli=oul.getElementsByTagName('oul'); var btn=document.getElementsByTagName('btn'); var ispeed=-1; var timer=null; oul.innerHTML+=oul.innerHTML; //图片列表复制一份 oul.style.width=oli[0].offsetWidth*oli.length+'px'; //不算出ul的宽度的话

js无缝滚动

阅读更多关于 js无缝滚动

原理及知识点原理：使用div盒子，ul包li，复制多一个ul1,当第一个ul滚动到最后一张的时候，下一次的点击将ul1定位到显示的那个位置，这里要注意一下z-index,ul定位到上一张的位置，然后才让两个滚动知识点：这里用到了（运动框架，自定义属性，定时器，复制元素，添加元素）代码链接：https://llcmite.github.io/ 进去首页的轮播图就是了 github：https://github.com/llcMite/llcMite.github.io.git 来源： https://www.cnblogs.com/llcMite/p/6229367.html

JS无缝滚动

阅读更多关于 JS无缝滚动

思路： 1、获取元素。 2、要使图片动起来就是用setInterval来改变，如往左边滚动就改变offsetLeft，把图片的左边距改为负数。 3、当图片往左滚的时候，右边就会出现空白，这时候需要用innerHTML复制原来的4个li 形成8个li 4、就算有8个li，但总会有滚到尽头的时候，这时就做一个判断当offsetLeft大于ul宽度的一半时，把ul拉回来0的位置（往左滚）。 5、当offsetLeft大于0时，就把Left设置为负ul 宽度的一半。（往右滚） 6、鼠标指向图片，图片停止。 7、鼠标离开图片，图片继续滚动。 8、往左滚往右滚就是控制offsetLeft，负数就是向左滚，正数就是向右滚。 JS代码： 1 <script> 2 window.onload=function() 3 { 4 var pic=document.getElementById('pic'); 5 var ul=pic.getElementsByTagName('ul')[0]; 6 var li=pic.getElementsByTagName('li'); 7 var left=document.getElementById('left'); 8 var right=document.getElementById('right'); 9 var speed=2; 10 11 ul

js/预解析

阅读更多关于 js/预解析

1、js引擎在执行js代码时，会先解析js代码然后再去执行js代码，在解析js代码时会将var声明的变量和function声明的函数提到当前作用域代码的顶部。 2、当var声明的变量名与function声明的函数名一样的时候，函数优先级更高　　（1）案例一　　　　console.log(f) 　　　　var f = 123; 　　　　function f(){console.log(456)} 　　　　解析过程：　　　　var f; 　　　　function f(){console.log(456)} // 函数整体提升　　　　console.log(f) // function f(){console.log(456)} 　　　　f = 123; 　　（2）案例二　　　　console.log(f) 　　　　 function f(){console.log(456)} 　　　　var f = 123; 　　　　解析过程：　　　　function f(){console.log(456)} // 函数整体提升　　　　var f; 　　　　console.log(f) // function f(){console.log(456)} 　　　　f = 123; 来源： https://www.cnblogs.com/cuishuangshuang/p

使用css将网页变成黑白色

阅读更多关于使用css将网页变成黑白色

其实将整个网页全局变色，无非就是三种，css直接设置，添加svg滤镜，通过js遍历所有标签更改颜色，于是 1、css 直接编辑样式，然后在需要应用的地方设置class 1 .gray { 2 -webkit-filter: grayscale(100%); 3 -moz-filter: grayscale(100%); 4 -ms-filter: grayscale(100%); 5 -o-filter: grayscale(100%); 6 filter: grayscale(100%); 7 filter: gray; 8 } 2、svg 先编写svg文件 <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <filter id="grayscale"> <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/> </filter> </svg> css调用 1 filter: url(gray.svg#grayscale); 3、js遍历直接插入代码就好啦，能白嫖是不可能手写的（ps：用rgba和!important的无法改变

订阅 js