JS(10)
来源:互联网 发布:淘宝优惠群起什么名字 编辑:程序博客网 时间:2024/06/14 16:52
复习
- window - document
- document.title document.head document.body
- document.documentElement (约等于 document.html )
- scrollTop 被卷去的头部 scrollLeft 封装自己的 函数
- scrollTo(x,y) 去往页面的 x 和 y 坐标 的位置
- window.scrollTo(x,y)
- window.onscroll = fucntion() { fun (); } fun() function() {iffss }
- JSON js 对象表示法 数据传输
- var json = {} 对象 var arr = [] ; 数组 var num; 变量
- var json = { width: “100px” , height: 100 } 声明的方法
- json.height 100 使用
client 家族
client 可视区域
offsetWidth: width + padding + border (披着羊皮的狼)
clientWidth: width + padding 不包含border
scrollWidth: 大小是内容的大小
检测屏幕宽度(可视区域)
ie9及其以上的版本 window.innerWidth
标准模式 document.documentElement.clientWidth
怪异模式 document.body.clientWidth
自己封装一个 返回可视区宽度和高度的函数。
window.onresize 改变窗口事件
window.onscroll = function() {}
屏幕滚动事件 window.onresize = function() {}
窗口改变事件
onresize 事件会在窗口或框架被调整大小时发生
要求:
当我们的页面宽度大于 960 像素的时候 页面颜色是红色
当我们的页面宽度 大于 640 小于 960 页面的颜色是 绿色
剩下的颜色是 蓝色
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>改变页面大小导致颜色变化</title></head><body></body></html><script> function client() {//封装可视区域大小的函数 if(window.innerWidth != null)// ie9+最新浏览器 { return{ width: window.innerWidth, height:window.innerHeight } } else if (document.compatMode === "CSS1Compat") { //标准浏览器 return { width: document.documentElement.clientWidth, height:document.documentElement.clientHeight } } return { //怪异浏览器 width:document.body.clientWidth, height:document.body.clientHeight } } reSize(); window.onresize = reSize;//不带括号,只要屏幕出发,就调用reSize函数 function reSize() { var clientWidth = client().width; if (clientWidth > 960) { document.body.style.backgroundColor = "red"; }else if (clientWidth > 640 ) { document.body.style.backgroundColor = "green"; }else { document.body.style.backgroundColor = "pink"; } }</script>
function fun() { 语句 }
fun 是函数体的意思
fun() 调用函数 的意思
function fun() {
return 3;
}
console.log(fun); // 返回函数体 function fun() { retrun 3}
console.log(fun()); // 调用函数 3 返回的是结果
fun();
window.onresize = 3
window.onresize = function fun() { retrun 3}
检测屏幕宽度(分辨率)
clientWidth 返回的是 可视区 大小 浏览器内部的大小
window.screen.width 返回的是我们电脑的 分辨率 跟浏览器没有关系
简单冒泡机制
事件冒泡: 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。
顺序
E 6.0:
div -> body -> html -> document
其他浏览器:
div -> body -> html -> document -> window
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>冒泡的问题</title></head><body><button id="btn">点击</button></body></html><script> var btn = document.getElementById("btn"); document.onclick = function () { alert("点击了空白处"); } btn.onclick = function (event) { alert("点击了按钮"); var event = event || window.event; if(event && event.stopPropagation){ event.stopPropagation();//w3c标准 }else { event.cancelBubble = true;//ie678 ie浏览器 } }</script>
不是所有的事件都能冒泡。以下事件不冒泡:blur、focus、load、unload
阻止冒泡的方法
标准浏览器 和 ie浏览器
w3c的方法是event.stopPropagation() proPagation—传播传递
IE则是使用event.cancelBubble = true bubble 冒泡 泡泡 cancel 取消
兼容的写法:
if(event && event.stopPropagation) { event.stopPropagation(); // w3c 标准 } else { event.cancelBubble = true; // ie 678 ie浏览器 }
小案例 点击空白处隐藏盒子
这个案例就是说,一个盒子,点击除了自己之外的任何一个地方,就会隐藏。
原理:
点击自己不算 ( 怎么证明我是我 点击的这个对象id 正好和自己一样 )
点击空白处 就是点击 document
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>点击空白处隐藏</title> <style> body { height: 2000px; } #mask { width: 100%; height: 100%; opacity: 0.4; /*半透明*/ filter: alpha(opacity = 40);/*ie 6半透明*/ background-color: black; position: fixed; top: 0; left: 0; display: none; } #show { width: 300px; height: 300px; background-color: #fff; position: fixed; left: 50%; top: 50%; margin: -150px 0 0 -150px; display: none; } </style></head><body><a href="javascript:;" id="login">注册</a><a href="javascript;:">登录</a><div id="mask"></div><div id="show"></div></body></html><script> function $(id) { return document.getElementById(id);} var login = document.getElementById("login"); login.onclick = function (event) { $("mask").style.display = "block"; $("show").style.display = "block"; document.body.style.overflow = "hidden";//不显示滚动条 //取消冒泡 var event = event || window.event; if (event && event.stopPropagation) { event.stopPropagation(); }else { event.cancelBubble = true; } } document.onclick = function (event) { var event = event || window.event; var targetId = event.target ? event.target.id : event.srcElement.id; if(targetId != "show"){ $("mask").style.display = "none"; $("show").style.display = "none"; document.body.style.overflow = "visible";//显示滚动条 } }</script>
判断当前对象
火狐 谷歌 等 - - event.target.id
ie 678 - - event.srcElement.id
兼容性写法:
var targetId = event.target ? event.target.id : event.srcElement.id;
targetId != "show"
选中之后,弹出层
我们想,选中某些文字之后,会弹出一个弹出框
这个和 我们前面讲过的拖拽有点不一样。
拖拽是拖着走。 拉着鼠标走 。
选择文字: 这个弹出的层 选中的时候不出来,弹起鼠标的时候才出现 。
所以这个的事件一定是 onmouseup . 盒子显示而且盒子的位置 再 鼠标的 clientX 和 clientY 一模一样
用来判断选择的文字:
获得用户选择内容
window.getSelection()
标准浏览器 document.selection.createRange().text;
ie 获得选择的文字
兼容性的写法:
if(window.getSelection){ txt = window.getSelection().toString(); // 转换为字符串}else{ txt = document.selection.createRange().text; // ie 的写法}
综合代码:
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 400px; margin:50px; } #demo { width: 100px; background-color: pink; position: absolute; top: 0; left: 0; display: none; } </style></head><body><span id="demo"></span><div id="test">我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字</div><div id="another"> 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字</div></body></html><script> function $(id) {return document.getElementById(id)} $("test").onmouseup = function(event) { var event = event || window.event; var x = event.clientX; var y = event.clientY; var txt; if (window.getSelection) { txt = window.getSelection().toString(); }else{ txt = document.selection.createRange().text; } if (txt) { show(x,y,txt); } } document.onmousedown = function (event) { var event = event || window.event; var targetId = event.target ? event.target.id : event.scrElement.id; if (targetId !="demo") { $("demo").style.display = "none"; } } function show(mousex,mousey,contentText) { setTimeout(function () { $("demo").style.display = "block"; $("demo").style.left = mousex +"px"; $("demo").style.top = mousey +"px"; $("demo").innerHTML = contentText; },200) }</script>
动画原理
人走路的时候, 步长
动画的基本原理 : 让盒子的 offsetLeft + 步长
盒子 原来的位置 0 + 10 盒子现在的offsetLeft 10
10 + 10 = 20 + 10
原理:
<script> //动画的基本原理 盒子的 offsetLeft + 步长 var btn = document.getElementsByTagName("button")[0]; var div = document.getElementsByTagName("div")[0]; var timer = null; btn.onclick = function() { timer = setInterval(function() { if(div.offsetLeft > 400) { clearInterval(timer); } div.style.left = div.offsetLeft + 10 + "px"; },20); }</script>
|-5| = 5
Math.abs(-5)
取绝对值函数 js 就是数学计算
匀速运动封装函数
function animate(obj,target){ var speed = obj.offsetLeft < target ? 5 : -5; // 用来判断 应该 + 还是 - obj.timer = setInterval(function() { var result = target - obj.offsetLeft; // 因为他们的差值不会超过5 obj.style.left = obj.offsetLeft + speed + "px"; if(Math.abs(result)<=5) // 如果差值不小于 5 说明到位置了 { clearInterval(obj.timer); obj.style.left = target + "px"; // 有5像素差距 我们直接跳转目标位置 } },30) }
案例:轮播图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">*{ padding:0; margin:0; list-style:none; border:0;}.all{ width:500px; height:200px; padding:7px; border:1px solid #ccc; margin:100px auto; position:relative;}.screen{ width:500px; height:200px; overflow:hidden; position:relative;}.screen li{ width:500px; height:200px; overflow:hidden; float:left;}.screen ul{ position:absolute; left:0; top:0px; width:3000px;}.all ol{ position:absolute; right:10px; bottom:10px; line-height:20px; text-align:center;}.all ol li{ float:left; width:20px; height:20px; background:#fff; border:1px solid #ccc; margin-left:10px; cursor:pointer;}.all ol li.current{ background:yellow;}</style><script type="text/javascript"> function animate(obj,target) { clearInterval(obj.timer); var speed = obj.offsetLeft < target ? 15:-15; obj.timer = setInterval(function(){ var result = target - obj.offsetLeft; obj.style.left = obj.offsetLeft + speed +"px"; if (Math.abs(result)<=15) { clearInterval(obj.timer); obj.style.left = target + "px"; } },10) } window.onload = function() { var box = document.getElementById("all"); var ul = document.getElementById("ul"); var ulLis = ul.children; //因为要无缝滚动,所以要克隆第一张,放到最后一张后面 ul.appendChild(ul.children[0].cloneNode(true)); var ol = document.createElement("ol"); box.appendChild(ol); for (var i = 0; i < ulLis.length-1; i++) { var li = document.createElement("li"); li.innerHTML = i+1; ol.appendChild(li); } ol.children[0].className = "current"; //开始动画部分 var olLis = ol.children; for (var i = 0; i < olLis.length; i++) { olLis[i].index = i; olLis[i].onmouseover = function() { for (var j = 0; j < olLis.length; j++) { olLis[j].className = ""; } this.className = "current"; animate(ul,-this.index*500) square = key = this.index; } } //添加定时器 var timer =null;//轮播图的定时器 var key = 0;//控制播放张数 var square = 0;//控制小方块 timer = setInterval(autoplay,1000); function autoplay() { key++; if (key>ulLis.length -1) { ul.style.left = 0; key =1; } animate(ul,-key*500); square++; if (square >olLis.length -1) { square = 0; } for (var i = 0; i < olLis.length; i++) { olLis[i].className = ""; } olLis[square].className = "current"; } box.onmouseover = function() { clearInterval(timer); } box.onmouseout = function() { timer = setInterval(autoplay,1000); } }</script></head><body><div class="all" id='all'> <div class="screen"> <ul id="ul"> <li><img src="images/taobao/1.jpg" width="500" height="200" /></li> <li><img src="images/taobao/2.jpg" width="500" height="200" /></li> <li><img src="images/taobao/3.jpg" width="500" height="200" /></li> <li><img src="images/taobao/4.jpg" width="500" height="200" /></li> <li><img src="images/taobao/5.jpg" width="500" height="200" /></li> </ul> </div></div></body></html>
- JS 10
- JS(10)
- js菜單左移10/24
- js静态方法[10]
- JS第10天
- js注意事项10
- JS 基础教程10
- js学习记录10
- js倒计时10秒
- JS-10 location对象
- js 10元买酒
- 2017-07-10(JS)
- JS-10-原型链
- 笔记10--js基础知识
- JS事件10
- js
- js
- JS
- 模拟实现堆+堆的应用
- android实现下拉框和输入框结合
- hadoop入门九(HDFS基本原理和操作)
- opencv3.1.0 SVM
- [Tensorflow]3.DCGAN代码及实验结果分析
- JS(10)
- 90后分享学习linux系统全过程
- 编辑神器VIM中常用的快捷操作
- NOIP 2003 普及组 数字游戏
- BP神经网络及其Tensorflow实现
- spring入门
- HDU 2112 HDU Today
- Linux下更换为阿里yum源
- python调用R的方式有用的几个参考文章