JS原生第八篇 (帅哥)
1.1 复习
1. clientX clientWidth 可视区域的宽度
clientWidth width + padding
offsetWidth width + padding + border
scrollWidth width + padding 超过 内容的宽度
- window.onresize 窗口改变
- 匀速运动函数 原理 : 盒子的原来位置 + 步长
1.2 三个取整函数
这三个函数都是 数学函数
Math
Math.ceil() 向上取整 天花板
比如说 console.log(Math.ceil(1.01)) 结果 是 2
console.log(Math.ceil(1.9)) 结果 2
console.log(Math.ceil(-1.3)) 结果 是 -1
Math.floor() 向下取整 地板
比如说 console.log(Math.floor(1.01)) 结果 是 1
console.log(Math.floor(1.9)) 结果 1
console.log(Math.floor(-1.3)) 结果 是 -2
Math.round() 四舍五入函数
console.log(Math.round(1.01)) 结果 是 1
console.log(Math.round(1.9)) 结果 是 2
1.3 缓动动画原理
匀速动画的原理: 盒子本身的位置 + 步长
缓动动画的原理: 盒子本身的位置 + 步长 (不断变化的)
封装代码:
1 function animate(obj,target){ // 第一个参数 动谁 第二个参数 动多少
2 clearInterval(obj.timer);
3 obj.timer = setInterval(function() {
4 // 计算步长 动画的原理 盒子本身的位置 + 步长
5 var step = (target - obj.offsetLeft) / 10; // 步长
6 step = step > 0 ? Math.ceil(step) : Math.floor(step); // 取整步长
7 // obj.style.left = 盒子本身的位置 + 步长
8 obj.style.left = obj.offsetLeft + step + "px";
9 if(obj.offsetLeft == target){
10 clearInterval(obj.timer);
11 }
12 },30)
13 }
1.4 js 常用 访问 CSS 属性
我们访问得到css 属性,比较常用的有两种:
1. 利用点语法
box.style.width box.style.top
点语法可以得到 width 属性 和 top属性 带有单位的。 100px
但是这个语法有非常大的缺陷, 不变的。
后面的width 和 top 没有办法传递参数的。
var w = width;
box.style.w
2. 利用 [] 访问属性
语法格式: box.style[“width”]
元素.style[“属性”];
console.log(box.style["left"]);
最大的优点 : 可以给属性传递参数
1.5 得到css 样式
我们想要获得css 的样式, box.style.left box.style.backgorundColor
但是它只能得到 行内的样式。
但是我们工作最多用的是 内嵌式 或者 外链式 。
怎么办?
核心: 我们怎么才能得到内嵌或者外链的样式呢?
1. obj.currentStyle ie opera 常用
外部(使用<link>)和内嵌(使用<style>)样式表中的样式(ie和opera)
2 .window.getComputedStyle("元素", "伪类") w3c
两个选项是必须的, 没有伪类 用 null 替代
3 兼容写法 :
我们这个元素里面的属性很多, left top width ===
我们想要某个属性, 就应该 返回改属性,所有继续封装 返回当前样式的 函数。
1 var demo = document.getElementById("demo");
14 function getStyle(obj,attr) { // 谁的 那个属性
15 if(obj.currentStyle) // ie 等
16 {
17 return obj.currentStyle[attr];
18 }
19 else
20 {
21 return window.getComputedStyle(obj,null)[attr]; // w3c 浏览器
22 }
23 }
24 console.log(getStyle(demo,"width"));
1.6 JSON 遍历
for in 关键字
for ( 变量 in 对象)
{ 执行语句; }
千万要记得 每个 的意思 : 那是相当重要
k 是 属性
json[k] 得到的是属性值
1.6.1 回调函数
等动画执行完毕再去执行的函数 回调函数
有个简单的问题? 什么是爱情?
我们怎么知道动画就执行完毕了呢?
很简单 当定时器停止了。 动画就结束了
1.7 in 运算符
in运算符也是一个二元运算符,但是对运算符左右两个操作数的要求比较严格。in运算符要求第1个(左边的)操作数必须是字符串类型或可以转换为字符串类型的其他类型,而第2个(右边的)操作数必须是数组或对象。只有第1个操作数的值是第2个操作数的属性名,才会返回true,否则返回false
// in 可以用用来判断 json 里面有没有某个属性
1.8 复习
1。 三个取整函数 Math.ceil(1.4) 2 天花板 往高了取
Math.floor(1.01) 1 地板 往小了取
Math.floor(1.9) 1
Math.round() 四舍五入函数 1.5 2
2. 动画的原理:
盒子位置 = 盒子当前的样式 + 步长
3. 以前 offsetLeft 现在 所有的样式 内嵌 外链
ie obj.currentStyle
window.getComputedStyle(obj, null);
1 function fun(obj,attr)
2 {
3 if(obj.currentStyle)
4 { return obj.currentStyle[attr];
5 } else {
6 return window.getComputedStyle(obj,null)[attr]}
7 }
8
1.9 json
两种声明方式
1. 对象声明 var json = {width:100,height:100}
旋转原理:
每次点击 按钮, 他们的json 数值就更换就可以了.
删除和添加 数组
pop() 删除最后一个
shift() 删除第一个
push() 追加 添加到最后面
unshift() 添加到 第一个位置
把 最后一个json 删除 并且把最后一个添加到json 第一个位置
json.unshift(json.pop());
json.pop() 删除最后一个元素
console.log(json.pop()) 返回最后一个值
JS原生第八篇 (帅哥)的更多相关文章
- JS原生第三篇 (帅哥)
1.1 数 组 1. 数组 看电影 电影院 座位 大的变量 里面可以放很多的值 var arr = [1,3,57]; var ar = new Array(); ...
- JS原生第七篇 (帅哥)
1.1 复习 offset 自己的 偏移 offsetWidth 得到自己的宽度 offsetHeight 构成 : width + padding + border div ...
- JS原生第六篇 (帅哥)
复习 按钮不可用 disabled = "disabled" || true setTimeout 只执行一次 setInterval 执行很多次 递归调用 ...
- JS原生第五篇 (帅哥)
1.1 节点 1. 节点 网页是有很多的节点组成的 . 元素节点 指的是 : 标签 li span 文本节点 属性节点 父子兄弟 父 parent ...
- JS原生第四篇 (帅哥)
1.1 1. 循环 for(初始化; 退出条件; 增量) { } while(退出条件) { } do { 语句 } while(退出条件) 2. switch( ) 多选1 ...
- JS原生基础终结篇 (帅哥)
闭包 基础 面向对象基础 1.1 闭包 在程序语言中,所谓闭包,是指语法域位于某个特定的区域,具有持续参照(读写)位于该区域内自身范围之外的执行域上的非持久型变量值能力的段落.这些外部执行域的非 ...
- JS原生Date类型方法的一些冷知识
ps:由于Date()是js原生函数,不同浏览器的解析器对其实现方式并不同,所以返回值也会有所区别.本文测试未特别申明浏览器的情况下,均是指win7 x64+chrome 44.0.2403.155 ...
- JS原生效果瀑布流布局的实现(一)
JS原生效果 实现: HTML页面布局: <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...
- Python之路【第十八篇】:Web框架们
Python之路[第十八篇]:Web框架们 Python的WEB框架 Bottle Bottle是一个快速.简洁.轻量级的基于WSIG的微型Web框架,此框架只由一个 .py 文件,除了Pytho ...
随机推荐
- 搜索技巧<转>
平时工作,搜索引擎是少不了的,作为程序员,当然首推 Google.这里简单介绍下几个 Google 搜索的小技巧,方便别人也方便自己查阅. ps:以下所有操作,均可以在 「谷歌搜索首页 -> 设 ...
- python基础04 运算
数学运算 print 2+2 #加法 print 1.3-4 #剪法 print 3*5 #乘法 print 4.5/1.5 #除法 print 3**2 #乘方 print 10%3 #求 ...
- 深入探索RB-tree数据结构
引子 部门在各个团队推广软件通用技能矩阵工具,希望通过度量找到能力薄弱点,引导团队进行改进.从我们团队的数据上看,团队在数据结构和算法上的短板明显,需要加强,这也是写这篇文章的背后的初衷. 数据结构和 ...
- vim 插件之 gist.vim 的安装
用 IntelliJ 的时觉得 create gist 很好用,查了下,发现 vim 下也有这个插件,于是马上配置上. 安装 下载 Gist.vim 解压后进入目录,拷贝文件 cp plugin/gi ...
- 第三周作业(一):安装VS以及创建单元测试
安装的时候找的是最新版本的VS2015,因为不想花钱也不想用破解版,所以用社区版本. 下了一个IOS文件,社区版VS2015,个人免费版,强行表示不用盗版来表现自己高尚的情操:D 放入虚拟光驱软件后, ...
- Ambari组件黄色预警
Ambari组件黄色预警 组件上为黄色问号,代表心跳丢失,解决如下: 1. 查看个节点之间是否可以相互通信,若ssh连接不上,有可能是该节点关机了,没有打开,手动开启该节点,再次验证是否可互通. 2 ...
- 我的window10
前言 这个一时半会写不完,也比较耗费时间,留着以后,每周更新一些新的技巧. 折腾了3天多时间的成果——>window10 的全新桌面,不比苹果差!不要说 windows 不能用 mac . 既然 ...
- BFS/DFS算法介绍与实现(转)
广度优先搜索(Breadth-First-Search)和深度优先搜索(Deep-First-Search)是搜索策略中最经常用到的两种方法,特别常用于图的搜索.其中有很多的算法都用到了这两种思想,比 ...
- 关于Hibernate的Dialect
org.hibernate HibernateException Dialect must be explicitly set :*** 使用Hibernate,有时候会遇到类似上面的异常. 使用 ...
- tornado web 框架的认识
tornado 简介 1,概述 Tornado就是我们在 FriendFeed 的 Web 服务器及其常用工具的开源版本.Tornado 和现在的主流 Web 服务器框架(包括大多数 Python 的 ...