2019年04月_zuo_zuo_blog

12月 11月 10月 09月 08月 07月 06月 05月 04月 03月 02月 01月

原创返回头部小箭头

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> img{ position: fixed; ...

2019-04-30 19:23:07 935

原创 jQuery 滑动方法

jQuery 滑动方法可使元素上下滑动。slideDown()slideUp()slideToggle()<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script type="text/javascr...

2019-04-27 13:15:36 1677

原创两侧跟随广告

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .imag1{ position: absolute; ...

2019-04-26 13:21:59 1708

原创固定导航栏

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0...

2019-04-26 11:51:04 2119

原创图片文字定时左右轮播

HTMl<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link href="CSS/teaminduce.css" rel='stylesheet' type='te...

2019-04-26 11:40:53 651

原创菜单栏缓动滑动

offsetLeft获取值四舍五入取整后计算当差值大于0的时候向上取整，小于0的时候向下取整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> ...

2019-04-22 19:24:41 365

原创带有定时器的无缝轮播

需求：无缝滚动。思路：赋值第一张图片放到ul的最后，然后当图片切换到第五张的时候，直接切换第六章，再次从第一张切换到第二张的时候先瞬间切换到，第一张图片，然后滑动到第二张步骤：1.获取事件源及相关元素。（老三步）2.复制第一张图片所在的li,添加到ul的最后面。3.给ol中添加li，ul中的个数-1个，并点亮第一个按钮。4.鼠标放到ol的li上切换图片5.添加定时器6.左右切换...

2019-04-21 20:11:33 1627

原创带有左右按钮的轮播图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> body,ul,ol,li,img{margin:0;pa...

2019-04-21 17:20:44 3240 1

原创轮播图（滑动焦点）

利用框架移动盒子（两个参数1.元素2.目标位置） animate(ul,-this.index*490); function animate(ele,target) { clearInterval(ele.timer); var speed=target>ele.offsetLeft?10:-10; ele.timer=setInt...

2019-04-18 20:52:08 449

原创事件解绑及其兼容/addEventListener和attachEvent区别

//第一种解绑 btn.function () { alert(1); } btn.null;//第二种解绑 btn.addEventListener("click",fn); function fn() { alert(1); } btn.removeEventListener("click",fn);//第...

2019-04-16 14:38:44 152

原创监听器原理以及事件绑定

1. 绑定事件方式a) 方式一document（容易重叠）b) 方式二addEventListener（事件监听器）btn.addEventListener("click",fn1)2.监听器原理（自己封装） var btn=document.getElementsByTagName("button")[0]; fn("click","fn1",btn); fn...

2019-04-16 09:09:05 315

原创 JS内置对象Date、string、math使用及案例

1.内置对象(语言自带的对象，提供了常用的基本的功能)打印数组和字符串不用for…in….(JSon才用)Arguments 函数参数集合Array 数组Boolean 布尔对象Date 日期时间Error 异常对象Function 函数构造器Math 数学对象Number 数值对象Object 基础对象RegExp 正则表达式对象String 字符...

2019-04-16 08:46:51 249

原创苹果发布会倒计时

1.定义一个定时器var div=document.getElementsByTagName("div")[0]; setInterval(fn,1000);2.方法封装function fn() { var futureTime=new Date("2019/04/24 08:00:00"); var nowTime=new...

2019-04-14 12:46:23 240

原创模拟日历获取当前时间

代码如下：js部分 //显示现有时间 var date=new Date(); var year=date.getFullYear(); var month=date.getMonth(); var hao=date.getDate(); var week=date.getDay(); var hour=date.getHours(); ...

2019-04-13 18:53:46 222

原创定时器原理关闭广告

定时器setInterval()循环定时器，周而复始的执行setTimeout()炸弹定时器，用完以后报废var num=0; setInterval(function () { console.log(num); num++; },1000);1.五秒关闭广告 <script> window.function () { ...

2019-04-13 16:08:23 281

原创 BOM的基本操作和方法

1.BOm浏览器对象模型window是Bom的顶级对象通常可以省略所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法Window对象下面的属性和方法调用的时候可以省略window2.打开窗口Window.open（url，target，param）url要打开的地址target新窗口的位置_blank_self_parent（父框架）param新窗口的一些设置...

2019-04-13 14:18:02 1728

原创 Js模拟百度搜索，模拟服务器获取内容

1通过输入事件模拟服务器获取内容创建列表2.判断字符串以某个字符串开头通过给定字符串的索引值=0var str="abcdefg"; //判断str是否以a开头（给定字符窜他的索引值为0） var num=str.indexOf("a"); alert(num); //03.3个bug解决 //问题1每次创建ul之前删除旧的 // var aaa=...

2019-04-13 11:09:40 2063

原创动态创建元素的方式

一、 document.write() document.write("<li>我</li>");二、 innnerHTMl接利用innerHTMLli.innerHTML="我是第三种创建的";三、 createElement()操作：appendChild() removeChild() insertChild() replaceChild()...

2019-04-09 20:49:53 266

原创隐藏显示的三种方式

1.隐藏显示display：元素隐藏后不占位置，页面上面的元素会重新排列this.style.display=“none/block”；2.Visibility：元素隐藏后占位置（hidden/visible）this.style.visibility=“hidden/visible”;3.设置透明度opacity=“0”this.style.opacity=“0”;...

2019-04-09 20:46:12 1460

原创上传图片并回显

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/html"><head><meta charset="UTF-8"><title>多张图片上传</title><script src="js/jquery.min.js"></s...

2019-04-09 19:22:48 1728

原创 Js高级隔行变色

功能（隔行变色，鼠标滑过变白，划出恢复原色）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .wrap{ tex...

2019-04-07 21:06:59 151

原创 JS设置样式的两种方式

a) ClassName/style------DOM的style属性只能获取标签中使用style设置的样式，无法获取潜入或者外部样式，style.cssText获取style里面的字符串（只能在行内式获取）b) 样式少的时候使用c) Style是对象类型d) 值是字符串，没有设置值是“”e) 命名以驼峰命名f) 改变透明度div.style.opacity=“0.2”;div.sty...

2019-04-07 20:36:34 1652

原创 JS封装方法实现菜单栏切换

HTMl部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="tools.js"></script> <style&g...

2019-04-07 19:37:54 1784 1

原创 JS制作tab栏实现来回切换

简单版<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding:0; mar...

2019-04-07 12:05:10 663

原创 *for循环为文本框赋值取值

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><input type="text"><br><br&gt...

2019-04-07 08:46:56 981

原创 JS实现全选反选

功能：点击上面input上面全选，点击下面按钮判断，如果全部选中那么上面就选中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .wrap...

2019-04-07 08:45:09 1300

原创 JS表单位数验证/下拉框设置选项

1.下拉框设置选项 Title<button>识别鲤鱼</button><br><br><select name="" id="sel"> <option value="0">苹果</option> <option value="1">香蕉</opti...

2019-04-06 21:46:33 770

原创禁用/解禁文本框

2.禁用文本框var inp=document.getElementsByTagName(“input”)[0];var btn=document.getElementsByTagName(“button”)[0];btn.function () {inp.disabled=“no”;//引号内放true或者数字都可以解禁：btn1.function () {/* inp.disab...

2019-04-06 21:38:33 284

原创 onmouseover事件显示隐藏二维码

1.二维码鼠标滑过事件onmouseover，onmouseout<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .nodeSmall{...

2019-04-06 21:23:57 296

原创京东或者淘宝获取焦点事件

1.<label for=” 跳转到想要的Id“>2.文本框获取焦点onfocus（焦点就是插入条光标）3.失去焦点事件onblur4.输入事件oninput（文字的输入和删除都会触发事件）在这里插入代码片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"...

2019-04-06 20:04:29 146

原创 JS案例之图片切换、显示隐藏盒子、相册轮播

1.图片切换< a href="#" style=“margin: 10px;display: block” “fn()”>切换< img src=“jd1.jpg” width=“400” alt="" id=“image”>var a=document.getElementsByTagName("a")[0];var img=document.getElemen...

2019-04-06 16:16:39 584

原创 DOM节点的获取和操作

DOM基础1.DOM：文档对象模型BOM：浏览器对象模型JS以事件驱动为核心的一门语言2.事件三要素事件源（执行者），-----引发后续事件的标签事件（执行的事情），-------JS定义好直接使用事件处理程序（结果）-------对样式和HTML的操作3.执行事件步骤a）获取事件源b）绑定事件（事件源.事件=function(){事件}）c）书写事件驱动程序4.获...

2019-04-06 12:31:29 407