- 博客(32)
- 资源 (6)
- 收藏
- 关注
原创 返回头部小箭头
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> img{ position: fixed; ...
2019-04-30 19:23:07 943
原创 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 1688
原创 两侧跟随广告
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .imag1{ position: absolute; ...
2019-04-26 13:21:59 1745
原创 固定导航栏
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0...
2019-04-26 11:51:04 2131
原创 图片文字定时左右轮播
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 713
原创 菜单栏缓动滑动
offsetLeft获取值四舍五入取整后计算当差值大于0的时候向上取整,小于0的时候向下取整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> ...
2019-04-22 19:24:41 374
原创 带有定时器的无缝轮播
需求:无缝滚动。思路:赋值第一张图片放到ul的最后,然后当图片切换到第五张的时候, 直接切换第六章,再次从第一张切换到第二张的时候先瞬间切换到, 第一张图片,然后滑动到第二张步骤:1.获取事件源及相关元素。(老三步)2.复制第一张图片所在的li,添加到ul的最后面。3.给ol中添加li,ul中的个数-1个,并点亮第一个按钮。4.鼠标放到ol的li上切换图片5.添加定时器6.左右切换...
2019-04-21 20:11:33 1641
原创 带有左右按钮的轮播图
<!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 3276 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 484
原创 事件解绑及其兼容/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 159
原创 监听器原理以及事件绑定
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 341
原创 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 281
原创 苹果发布会倒计时
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 260
原创 模拟日历获取当前时间
代码如下: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 242
原创 定时器原理关闭广告
定时器setInterval()循环定时器 ,周而复始的执行setTimeout()炸弹定时器,用完以后报废var num=0; setInterval(function () { console.log(num); num++; },1000);1.五秒关闭广告 <script> window.function () { ...
2019-04-13 16:08:23 321
原创 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 1760
原创 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 2092
原创 动态创建元素的方式
一、 document.write() document.write("<li>我</li>");二、 innnerHTMl接利用innerHTMLli.innerHTML="我是第三种创建的";三、 createElement()操作:appendChild() removeChild() insertChild() replaceChild()...
2019-04-09 20:49:53 298
原创 隐藏显示的三种方式
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 1541
原创 上传图片并回显
<!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 1744
原创 Js高级隔行变色
功能(隔行变色,鼠标滑过变白,划出恢复原色)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .wrap{ tex...
2019-04-07 21:06:59 161
原创 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 1669
原创 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 1814 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 680
原创 *for循环为文本框赋值取值
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><input type="text"><br><br>...
2019-04-07 08:46:56 1001
原创 JS实现全选反选
功能:点击上面input上面全选,点击下面按钮判断,如果全部选中那么上面就选中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .wrap...
2019-04-07 08:45:09 1339
原创 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 786
原创 禁用/解禁文本框
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 321
原创 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 317
原创 京东或者淘宝获取焦点事件
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 159
原创 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 596
原创 DOM节点的获取和操作
DOM基础1.DOM:文档对象模型BOM:浏览器对象模型JS以事件驱动为核心的一门语言2.事件三要素事件源(执行者),-----引发后续事件的标签事件(执行的事情),-------JS定义好直接使用事件处理程序(结果)-------对样式和HTML的操作3.执行事件步骤a) 获取事件源b) 绑定事件(事件源.事件=function(){事件})c) 书写事件驱动程序4.获...
2019-04-06 12:31:29 424
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人