javascript中window.open()与window.location.href的区别

window.open(‘index.html’) 表示新增一个窗口打开 index.html 这个页面，并不刷新

location.href(‘index.html’) 表示在当前窗口重定向到新页面，打开并刷新 index.html 这个页面



window.location 是 window 对象的属性，用来替换当前页，也就是重新定位当前页

而window.open 是 window 对象的方法，是用来打开一个新窗口的函数

// 打开新页面
    // 注意：有些浏览器的安全设置会将window.open()屏蔽，例如避免弹出广告窗
    window.open('./index.html');

    // 在原窗口打开新页面
    window.location.href＝"./index.html";

    

        window.open()详解
    

window.open ('page.html', 'newwindow', 'height=100, width=400, 
top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no')


参数解释： 三个参数
 window.open 弹出新窗口的命令；
 ‘page.html’ 弹出窗口的文件名；
 ‘newPage’ 弹出窗口的名字（不是文件名），非必须，可用空’'代替；
 height=100 窗口高度；
 width=400 窗口宽度；
 top=0 窗口距离屏幕上方的象素值；
 left=0 窗口距离屏幕左侧的象素值；
 toolbar=no 是否显示工具栏，yes为显示；
 menubar=no 是否显示菜单栏，yes为显示；
 scrollbars=no 是否显示滚动栏，yes为显示；
 resizable=no 是否允许改变窗口大小，yes为允许；
 location=no 是否显示地址栏，yes为允许；
 status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；

常用的js返回与刷新页面
在此用a标签举例

前言：

做网页项目时想要背景是动态的，推荐两个我觉得比较可以的js动态背景。



随鼠标的移动而移动的线条，具体效果看图：

你焦点在哪，那么那里的线条就会汇聚到你的焦点处。

用法：将js声明到body内即可，我是放置在body底部的

<script type="text/javascript" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"&gt;&lt;/script&gt;

1

可以鼠标点击产生字的，如图：

用法和第一个类似，不过在这个js文件前得先引入jquery:

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script type="text/javascript">
            /* 鼠标 */
            var a_idx = 0;
            jQuery(document)
                    .ready(
                            function($) {
                                $("body")
                                        .click(
                                                function(e) {
                                                    var a = new Array("@健身",
                                                            "@学习", "@机车",
                                                            "@摄影", "@自由",
                                                            "@考研", "@自律",
                                                            "@独立", "@厨艺",
                                                            "@橘子", "@交友",
                                                            "@爱媳妇", "@爱家人");
                                                    var $i = $("<span></span>")
                                                            .text(a[a_idx]);
                                                    a_idx = (a_idx + 1)
                                                            % a.length;
                                                    var x = e.pageX, y = e.pageY;
                                                    $i
                                                            .css({
                                                                "z-index" : 999999999999999999999999999999999999999999999999999999999999999999999,
                                                                "top" : y - 20,
                                                                "left" : x,
                                                                "position" : "absolute",
                                                                "font-weight" : "bold",
                                                                "color" : "rgb("
                                                                        + ~~(255 * Math
                                                                                .random())
                                                                        + ","
                                                                        + ~~(255 * Math
                                                                                .random())
                                                                        + ","
                                                                        + ~~(255 * Math
                                                                                .random())
                                                                        + ")"
                                                            });
                                                    $("body").append($i);
                                                    $i.animate({
                                                        "top" : y - 180,
                                                        "opacity" : 0
                                                    }, 1500, function() {
                                                        $i.remove();
                                                    });
                                                });
                            });
        </script>

这里使用的是cdn形式的jquery即不用将jq放入本地文件再引入，直接访问网络上的jq即可，还有就是点击产生的字可以自行修改。

可以自定义一个file选择文件的按钮：

思路为：
用定位将自定义的按钮遮住原来的选择文件按钮，
再让点击自定义按钮时触发原来的选择文件按钮的事件即可
（对此，label可实现）

eg:
html:

css样式：

结果图：

点一下，就可以弹出选择文件的文件夹啦！

文章目录

一、HTML的概述

1. 什么是HTML？
   
2. HTML的标签、元素、属性
   
3. 标签、元素
   
4. 标签、属性
   
   附：补充上一节课网站和网页的笔记：
   
   附：img标签的详细介绍
   
   一、HTML的概述
   
5. 什么是HTML？
   
   HTML指的是超文本标记语言（Hyper Text Markup Language）
   
   HTML 不是一种编程语言，而是一种标记语言 (markup language)
   
   标记语言是一套标记标签 (markup tag)
   
   HTML 使用标记标签来描述网页
   
   HTML不区分大小写
   
6. HTML的标签、元素、属性
   
7. 标签、元素
   
   由尖括号包围，比如 <title>
   
   通常是成对出现的
   
   <title>百度一下，你就知道</title>
   
   
   
   其中，<title> 为 开始标签
   
   中间的 “百度一下，你就知道” 为内容
   
   </title>为结束标签， 我们可以清楚的观察到，标签结束是有 “/”。
   
   则 标签和内容，构成了网页的元素。
   
   
   
   标签的嵌套关系，如下列例子，你品
   
   <html><body></body></html>
   
   <html><body></html></body>
   
   
   

   标签的嵌套缩进

   

   
   
   如图所示<html>为外层标签，称为父元素，<head>和<body>为内层标签，称为子元素。其中<head>与<body>又互称为兄弟元素
   
   <!DOCTYPE html>
   
   
   
   声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
   
   声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
   
   <!DOCTYPE> 声明没有结束标签。
   
   <!DOCTYPE> 声明对大小写不敏感。
   
   在 HTML 4.01 中有三种 <!DOCTYPE> 声明。在 HTML5 中只有一种：<!doctype html>
   
   我们学习的是HTML5，所以我们不过多对HTML4的声明做过多解释。
   
   
   
   如果上述对<!doctype html>的概述不清楚的话，
   

   那记住以下两点即可，1. 不分大小写，2.在HTML的网页<html>标签之前加上<!doctype html>就可以啦。

   

   
   
   
   
   图示为 HTML DOM树，DOM：Document Object Model（文档对象模型）
   
   
   

   2. 标签、属性

   

   
   
   
   
   一个标签可能有多个属性，属性先后与顺序无关
   
   “=” 为赋值符号
   
   属性与属性之间用空格隔开
   
   附：补充上一节课网站和网页的笔记：
   
   HTML网页的编码为 utf-8
   
   网站可以理解成一个文件夹，而网页就是一个个的文件
   
   网页的文件后缀常见的有：htm、html、jsp、php、asp
   
   网站的文件结构通常包含 images文件夹，css文件夹，js文件夹，
   
   一个简单的网页，的文件目录通常由 images、css、js，作用顾名思义，就是存放相对应的文件资源
   
   附：img标签的详细介绍
   
   <img> 标签有两个必需的属性：src 和 alt。
   

   注释：从技术上来说，图像并不会插入到HTML页面中去，而是通过 src的值(URL) 链接到HTML页面上的，<img>标签的作用是为被引用的图像创建占位符。

   

   

   <img>标签常用的属性有src、alt、width、height、title
   
   src和alt为 img 标签的必需元素。
   
   
   
   话不多说，看图，为你们讲解代码。
   
   
   
   
   
   看网站的演示图和代码图，想必大家都很清楚了吧。
   
   （为了更直观的看到效果，我写了div和div的样式，1px粗的红色实线边框，这里的代码以后再具体详解）
   
   
   
   title和alt 的区别别，体现在 第 11 行和第 14 行，想必大家就能看出来了吧
   
   i. alt 属性是在图片不能正常显示时出现的文本提示。
   
   ii. title 属性是在鼠标在移动到元素上的文本提示。
   
   width和height的作用，用来规定图像的宽度和高度，单位为 像素（px）
   
   src路径，由于我的文件夹结构为 index.html文件和 images 文件夹。
   
   所以 src 的路径为 src="images/图片.后缀"，即src="URL"
   
   URL即（Uniform Resource Locator,统一资源定位符，在WWW上，每一信息资源都有统一的且在网上唯一的地址。
   
   简单的理解URL，就是网址，地址
   
   
   
   如果图片路径引用错误，都会导致网页中的图片无法正常显示！ 如，第 14 行和第 20 行代码。
   
   以上为img标签的常见用法。在我们写网页的时候，建议img写上 src、alt、width、height这四个属性，是否需要 title 具体看网站的功能。
   
   
   
   以上就是，第二课、Web前端开发之HTML基础的全部内容了，感谢阅读
   
   ————————————————
   
   版权声明：本文为CSDN博主「MineChen」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
   
   原文链接：https://blog.csdn.net/MineSu/article/details/104549536
   

引言

现在市场很多前端开发的招聘岗位都或多或少的要求你要掌握vue，可以说vue在国内是非常的火爆的，下面我给大家介绍一下vue框架吧！

vue是渐进式框架

vue的核心是一个视图模板引擎，但是这并不能说明vue不是一个框架，如上图所示在声明式渲染（视图模板）基础上，vue可以添加组件系统component，vue-router客户端路由，vuex的状态管理，vue-cli构建工具来构建一个完整的框架，更重要的是这些功能相互独立，你可以任意选用你项目需要的部件，不一定非要全部整合在一起（就像是vuex它是一个很好的可以管理组件之间共享状态的部件，但非必须在你的每一个项目中使用它，如果说你的项目相对简单，组件之间的通信相对简单你完全可以不使用它），可以看到渐进式，其实就是vue的使用方式，同时也能看到vue的设计理念
vue是mvvm模式
为什么说vue是mvvm模式呢？这个大家首先要知道mvvm是什么。mvvm是Model-View-ViewModel的简写，即模型视图视图模型。模型是指后端传过来的数据，视图是指我们看到的页面，视图模型是mvvm框架的核心，他是连接view和model的桥梁，它有两个方向，第一将后端传来的数据转换成页面可以看到的视图，第二，将用户在页面上的交互转化成为后端数据，我们称之为双向绑定。
总结mvvm模式的视图和模型是不能直接通信的，它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信
vue框架可以理解为是ViewModel，它可以实现dom监听和数据绑定
vue的数据绑定原理

当你把JavaScript对象传入vue实例作为data选项，vue会遍历此对象的所以属性，并使用Object.defineProperty把这些属性转换为getter和setter，每一个组件都有一个watcher实例，它会在组件渲染过程中，把接触过的数据记录为依赖，当依赖的setter被触发是，他会通知watcher，重而使关联的数据重新渲染，以下是代码展示。

<div id = "box"></div>
var obox = document.getElementById('box')
var obj = {}
object.defineProperty(obj,'myname',{
    get () {
        // obj设置了一个myname属性，当访问obj.myname属性会执行get方法
    },
    set (data) {
        // 当修改myname属性会执行set方法
        // data会得到你修改的值
        obox.innerHTML = data
    }
})

html5+css3实现2D-3D动画效果实例

主要实现的功能就是一些2D、3D的动画效果，如平移、缩放、旋转等等。



文章目录

html5+css3实现2D-3D动画效果实例

2D变换

3D变换

2D中应用实现案例

3D中应用实现案例

css3动画

2D变换

是在一个平面对元素进行的操作。

可以对元素进行水平或者垂直位移、旋转或者拉伸.

1

2

*2d对下面面坐标系简单分析如下：

（1）.默认状态下，x轴是水平的，向右为正。

（2）.默认状态下，y轴是垂直的，向下为正，这与传统的数学坐标系不同。

3D变换

2d场景，在屏幕上水平和垂直的交叉线x轴和y轴
3d场景，在垂直于屏幕的方法，相对于2d多出个z轴

下面首先需要了解2D、3D中的功能函数：

位移 translate()
translateX() 方法，元素在其 X 轴以给定的数值进行位置移动
translateY() 方法，元素在其 Y 轴以给定的数值进行位置移动
缩放scale()
scaleX()：相当于scale(sx,1)。表示元素只在X轴（水平方向）缩放元素，其默认值是1。
scaleY()：相当于scale(1,sy)。表示元素只在Y轴（纵横方向）缩放元素，其默认值是１。
旋转rotate()
rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转
rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转
正数”是顺时针，“负数”是逆时针，单位为“deg”。
倾斜skew()
一个参数时：表示水平方向的倾斜角度；
两个参数时：第一个参数表示水平方向的倾斜角度，
第二个参数表示垂直方向的倾斜角度
3D中多了Z轴，其他属性值不变

2D中应用实现案例
位移 translate()
效果图：

 position: absolute;
    left: 20px; top: 40px;
    transition: 2s;/*过渡时间*/
    transform: translateY(-320px);

.box3:hover .box3_h2{
    transform: translateY(0px);
}

<!-- 盒子3：实现位移 -->
        <div class="box3 box">
            <img class="img_3" src="../16/images/3.png" alt="">
            <div class="box_mm"></div>
            <h2 class="box3_h2">Taylor Swift</h2>
            <p class="box3_p1">I'm so glad you made time to see me. How's life, 
                tell me how's your family? I haven't seen them in a while. 
                You've been good, busier then ever. 
                We small talk, work and the weather Your guard is up and I know why...</p>
        </div>

/* 公共样式 */
.box{
    width:350px;
    height: 300px;
    position: relative;
    transform: 1s;
    margin: 20px 20px;
    float: left;
}
img{
    display: block;
    width: 350px;
    height: 300px;
}
/* 鼠标滑过覆盖上方的白色部分 */
.box_mm{
    width:350px;
    height: 300px;
    transform: 1s;
    background-color: #fff;
    position: absolute;/*设置定位，挡住box，*/
    top: 0;
    opacity: 0;/*透明，0全透明*/
}
h2{
    font-size: 20px;
}

/* 盒子3 */
.box3{
    overflow: hidden;
}
.img_3{
    transition: 2s;
}
.box3_h2{
    color: #fff;
    position: absolute;
    left: 20px; top: 40px;
    transition: 2s;/*过渡时间*/
    transform: translateY(-320px);
}
.box3_p1{
    font-size: 14px;
    width: 320px;
    position: absolute;
    left: 20px; bottom: 80px;
    transition: 2s;
    opacity: 0;
}
/*交互样式*/
.box3:hover .img_3{
    transform: translateY(-10px);
}
.box3:hover .box3_h2{
    transform: translateY(0px);
}
.box3:hover .box3_p1{
    transform: translateY(-50px);
    opacity: 1;
}

著名的 Web 设计网站 CSS-tricks.com 最近组织了一次调查，请15名顶尖的 Web 设计师对 CSS 提出自己的期望，15名设计师包括 Jon Hicks,  Wolfgang Bartelme, Mint 的 Shaun Inman 以及 Stuff and Nonsense 的 Andy Clarke。



调查结果显示，最被期待的 CSS 功能是 CSS 圆角，其它期待的功能包括跨浏览器渐变与阴影，类似 Photoshop 的层融合效果，更一致的声明简化语法以及对条件判断的本地支持。这些期待中一部分已经包含在未来的 CSS-3 中，但更多的仍然只是一些梦想。



WebMonkey 的编辑们将这个 Wishlist 发表在他们的网站并让 WebMonkey 的读者投票选出最热门的项目，以下是按投票多少排列的 CSS Wishlist 部分列表（只选取最热门的项目）。新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。



CSS 圆角 

by Webmonkey

标准的，直接基于 CSS 的圆角是很多人的期待，这样，就不必再费尽心机只为了显示一个圆角。





垂直居中

by michael lascarides

针对 block 对象的更容易的垂直居中设置。（div + css 让人既爱且恨的一个重要原因就是垂直居中，让一个对象垂直居中显示在 block 容器中，且兼容所有主流浏览器简直就是一个噩梦 - 译者）





兼容所有主流浏览器的 CSS 2.1 与 CSS 3 

by Erik

能兼容所有主流浏览器的 CSS 2.1 与 CSS 3 是 Erik 的梦想，但其中的某些功能在某些浏览器中总是磕磕绊绊。





更好的嵌入字体 

by Webmonkey

不要 sFIR, 不要图片，要真正的字体。





CSS 变量 

by Jeffrey Jordan Way, via css-tricks.com

能定义诸如色彩值一类的变量





更好地支持 100% height 

by JLR

设置了 100% height 的容器的顶部和底部真正附着在页首和页尾，页面中间部分匹配内容并准确显示滚动条。搜索“100% height css”能找到各种解决方法，但事情原本不该这么复杂。





可重复使用变量 

by Neal Lindsay

比如:

@var mycolor = #0080FF 

h1 { color: mycolor; } 

div.containbox { border: 1px mycolor; }





浏览器一致性与定义顺序 

by JML

浏览器一致性非常重要。某些 CSS 在某些浏览器被忽略或部分忽略使 CSS 只有借助 JavaScript 才能正常使用。同时，对里面的 CSS 定义应该可以覆盖全局定义。





一句话复原 

by Chris Pitzer

很多设计者要写40多行代码才能清除浏览器默认 CSS 定义，应当有一个简单的声明一次性将所有 CSS 复原，比如：

body { clear-default-styles:true; }





图形旋转与反转 

by Stephen Bell

在设置图形圆角效果时候，我们需要同一个圆角图片的4个旋转版本来实现。应该有一个简单的声明实现旋转，如：

img .horiz { rotate:90; }





成组的 CSS 简化定义 

by Volkan Görgülü, via css-tricks.com

如:

foo h1, #foo h2, #foo h3

改为:

foo [h1, h2, h3]

渐变 

by Anonymous

以避免一条线一条线地实现渐变。





定位计算 

by Anonymous

不使用 JavaScript 而是直接在 CSS 中实现：

left: ID1.Left + ID1.Width + 2px;





网格布局 

by Kurt Krumme

table 布局曾经流行一时，因为 table 布局更接近网格布局的原理。CSS 的设置者们为什么要推出一个不伦不类的 box 模型？

div + css 在 Web 设计界已经红得发紫，尽管 div 有众多缺陷（比如垂直居中，比如在 IE 中的众多 BUG），如果哪个设计师胆敢使用 table，被人查出源代码，是会被耻笑的。然而译者从不畏惧使用 table + css，且愿意告戒那些盲目追随 div 并被折磨得半死的人，至少在目前，table 是被各种浏览器支持得最完美的容器对象。



新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

使用 image 作 border 

by Anonymous

应当可以用 image 作为 border，如：

border-right: url('image.png')



支持多个背景图

by Brad

这个 CSS 功能非常有用，有了这个功能，完美实现 CSS 圆角就变得十分简单了。



所有浏览器支持统一标准 

by Anonymous

这里特指 IE<8 的版本。CSS 有成型的标准，但有些浏览器一定要搞一些自己的东西出来。



以上来自cb。大师们的期望果然很独特，相当多的期望也非常有用，如果实现了，Web开发就是多么轻松愉快的一件事情啊！比如变量、清除定义和定位计算，是我认为非常有用的。目前IE下可以用一些IE特有的表达式，但用起来太复杂。



还是期望CSS3更好更强大。也期望各个浏览器尽快支持CSS3

————————————————

版权声明：本文为CSDN博主「前端基础开发」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/html886/article/details/104582007

文章目录

一、this

1.什么是this

2.this 代表什么

3.绑定 this 的方法

4.this的指向

5.改变指向

二、Function.prototype.bind()

三、call/apply

1.定义

2.语法

3.异同

一、this

1.什么是this

this 关键字在大部分语言中都是一个重要的存在，JS中自然不例外，其表达的意义丰富多样甚至有些复杂，深刻理解this是学习JS、面向对象编程非常重要的一环。



2.this 代表什么

this代表函数（方法）执行的上下文环境（上下文，类似与你要了解一篇文章，了解文章的上下文你才能清晰的了解各种关系）。



但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。



1.在方法中，this 表示该方法所属的对象。



2.如果单独使用，this 表示全局对象。



3.在函数中，this 表示全局对象。



4.在函数中，在严格模式下，this 是未定义的(undefined)。



5.在事件中，this 表示接收事件的元素。



6.类似 call() 和 apply() 方法可以将 this 引用到任何对象。



3.绑定 this 的方法

this的动态切换，固然为 JavaScript 创造了巨大的灵活性，但也使得编程变得困难和模糊。有时，需要把this固定下来，避免出现意想不到的情况。JavaScript 提供了call、apply、bind这三个方法，来切换/固定this的指向。



4.this的指向

1.在一般函数方法中使用 this 指代全局对象

function test(){
　　　　this.x = 1;  //这里this就是window
　　　　console.log(this.x);
　　}
　　test(); // 1

JS规定，函数中的this，在函数被调用时确定，它指函数当前运行的环境。

2.作为对象方法调用，this 指代上级对象

var x =3;
function test(){
　　alert(this.x);
}
var o = {
  x:1,
  m:test 
};
o.m(); // 1

如果函数作为对象的方法时，方法中的 this 指向该对象。

3.作为构造函数调用，this 指代new 出的对象

function test(){
　　　　console.log(this);
　　}
　　var o = new test();
       test();
//可以看出o代表的不是全局对象

new关键词的作用是调用某个函数并拿到其中的返回值，只是调用过程稍特殊。在上面的代码实例中。test函数被new关键词调用时，内部依次执行了以下步骤:

（1）创建一个空对象。

（2）将这个空对象的原型，指向这个构造函数的prototype。

（3）将空对象的值赋给函数内部的this（this就是个空对象了）。

（4）执行函数体代码，为this这个对象绑定键值对。

（5）返回this，将其作为new关键词调用oop函数的返回值。

所以构造函数中的this，依旧是在构造函数被new关键词调用时确定其指向，指向的是当前被实例化的那个对象。

4.箭头函数中的this
箭头函数是ES6的新特性，最重要的特点是它会捕获其所在上下文的this作为自己的this，或者说，箭头函数本身并没有this，它会沿用外部环境的this。也就是说，箭头函数内部与其外部的this是保持一致的。

this.a=20
var test={
    a:40，
    init:()=>{
        console.log(this.a)
        function go(){
            this.a=60
            console.log(this.a)
        }
        go.prototype.a=50
        return go
    }   
}

var p=test.init()
p()
new (test.init())()
//输出 20 60 60 60

function f(y, z){
    return this.x + y + z;
}
var m = f.bind({x : 1}, 2);
console.log(m(3));
//6

function add(a, b) {
    return a + b;
}

function sub(a, b) {
    return a - b;
}

console.log(add.call(sub, 2, 1));//3

菲兹定律在交互设计中的应用是很普遍和广泛的，有时候在我们设计界面之时，不知不觉就应用了菲兹定律，但是我们却未察觉。

关于菲兹定律的具体内容，可以说是大家耳熟能详，甚至在学生时代就有所了解：从一个起始位置移动到最终目标点所需的时间由两个参数来决定，到目标的距离（D）和目标的大小（W），可以用数学公式表达为：

在当今互联网背景下简单来解释说，就是大而近的目标区域意味着用户用需要耗费太大的精力即可轻易点击或者关注到目标，反之，小而远的目标区域则意味着用户将耗费一些时间和动作才能触及到目标。在一般情况下，让用户耗费时间和动作的操作，会使人产生负面的用户体验。

以上说的，其实是对菲兹定律表象的解释，每个人在网上也会搜到很多类似的解释。当你搜索时会发现，关于对菲兹定律的应用，网上绝大多数的资料都是在以PC端界面作为定律的解释，但移动界面却少之又少，这里面的一部分原因是菲兹定律提出的时间，一部分也是因为在移动端的设计中，菲兹定律会变得很零散和琐碎，很难真正用几句话来总结，这篇文章也是我第一次试着在移动端的交互设计的范畴内对菲兹定律的应用进行简单的总结。

1. 让按钮更大一些

我在这一部分分了几种情况，分别进行讨论，其一呢，就是fab button。在现有的fab button中，大家会发现，虽然按照正常iOS的设计规范，一般按钮的大小都会被设计为88px，但是在设计fab button时，我们一般都会选择大一些的尺寸，例如100px、110px、120px。

其二就是页面内功能按钮的大小，我们在做界面设计的时候，都知道做到统一性，但很少去深入地想，界面统一的背后是在像用户传达一个什么意思。

举个例子，这是【洋葱数学】和【360家庭防火墙】的登录界面，市面上的登录界面大多大同小异，基本组成就是账号+密码+按钮（或手机号+按钮等）的组合。

那我们来思考一个问题：为什么在手机号只有11位已经确定的情况下，输入框和【下一步】按钮还要做这么长，接近通栏的一个样式。

我试着来找到这个问题的答案，第一个，是对于品牌设计规范的执行，对边距是有一定要求的，也就是我们常说的保持页面元素的统一性；第二个，即是对菲兹定律的应用，在这个页面中，最核心的两个功能【输入】和【下一步】给予他们一个足够的大小，会让用户的注意力更加集中，避免被分散精力。

2. 让相关联的信息内容距离更近

这也和设计原则中的亲密性相一致。依旧可以用我们常见的信息输入界面来加以印证。这两个界面是我随手做的，对比一下即可看出优劣。

在相关性比较强的功能中，拉近彼此距离，既能够给信息一个清晰的层级，更能够减少用户的操作成本。

3. 界面的边界会让用户操作更加精准和容易

在研究交互界面的时候，我们总听到一个说法，“界面的边界是无限的”，它当然不是在说界面是无限大的，对于一块屏幕来说，在进行操作的时候，无论是PC的鼠标光标，还是移动屏幕的手指，在操作到界面边缘时，因为无法延伸，所以最精准。

这也是我们看绝大多数fab button弹出的菜单是在界面边缘，而不是在界面中央的原因。

除此之外，还有在很多安卓手机中，卸载app时会让用户把要卸载的app拖拽到屏幕上边缘的区域进行卸载，这样相比给一个【X】按钮，会更加精准，而且拖拽的操作也会给用户更多思考的空间和时间，减少误操作的概率。

但是，这个但是很重要，不要把所有既定的法则都奉为圭臬，所有事物都要辩证着看，在没有限定条件的情况下，菲兹定律的应用不会有任何问题，但是如果加以条件的限定，就不是这么简单了。

简单举个例子：在进行删除等负向操作时，很多app会把确认删除等操作做得离你的上一步操作区域更远，或者让确认按钮更加不明显，这是在帮助用户，或者说希望用户在做负向操作时，有更多的思考空间和时间，规避误操作的影响。

在《看懂设计》这个系列里，我会选择性地对在交互设计中常常被应用的设计心理学、方法论等进行简洁有案例的解析，例如大家耳熟能详的交互设计7大定律、斯金纳箱理论、边际效应、锚定效应、格式塔理论等等让大家尽可能地在实际案例中找到它们的应用，而不是让这些方法论成为我们脑海中的空中楼阁，知道、听说过，但是不会应用。

转自：站酷-鹿爷不是咸鱼 

纯JS对页面表格进行EXCEL导出





1.中间部分在style标签那种可以使用css样式对表格进行任意样式的修改

2.在tableid.innerHTML中可以对表格中的内容进行修改替换（其中放的内容就是导出后的表格内容）

3.需要引入xlsx.full.min.js文件

4.tableid为为表格的id

5.sheetName为下载后的文件名称



        base64(excelFile) {

            return window.btoa(unescape(encodeURIComponent(excelFile)))

        },

        tableToExcel(tableid, sheetName) {

            var uri = 'data:application/vnd.ms-excel;base64,';

            var template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"' +

                'xmlns="http://www.w3.org/TR/REC-html40"&gt;&lt;head&gt;&lt;!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>'

                + '<x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets>'

                + '</x:ExcelWorkbook></xml><![endif]-->' +

                ' <style type="text/css">' +

                '    .ivu-table td{\n' +

                '        /background-color: #FFFFFF;/\n' +

                '        /color: #fff;/\n' +

                '        /border:1px  solid #FFFFFF;/\n' +

                '    }\n' +

                '    /每行的基本样式/\n' +

                '    .ivu-table-row td {\n' +

                '        color: #000000;\n' +

                '        min-width:50px;\n' +

                '    }\n' +

                '    /头部th/\n' +

                '    .ivu-table-header th{\n' +

                '        color:\t#FFFFFF;\n' +

                '        font-weight: bold;\n' +

                '        background-color: rgb(98,167,249);\n' +

                '        min-width:50px;' +

                '        border:1px  solid #FFFFFF;' +

                '        position: relative;  \n' +

                '        top: expression(this.offsetParent.scrollTop);  \n' +

                '        z-index: 300; \n' +

                '    }\n' +

                '    /偶数行/\n' +

                '    .ivu-table-stripe-even td{\n' +

                '        background-color: #ffffff!important;\n' +

                '    }\n' +

                '    /奇数行/\n' +

                '    .ivu-table-stripe-odd td{\n' +

                '        background-color:#F0FFFF!important;\n' +

                '    }\n' +

                '    /选中某一行高亮/\n' +

                '    .ivu-table-row-highlight td {\n' +

                '        background-color: #d63333!important;\n' +

                '    }' +

                '</style>' +

                '</head><body ><table class="excelTable">{table}</table></body></html>';

            if (!tableid.nodeType) tableid = document.getElementById(tableid);

            tableid.innerHTML = tableid.innerHTML.replace('暂无筛选结果','')

            var ctx = {worksheet: sheetName || 'Worksheet', table: tableid.innerHTML};

            var a = document.createElement("a");

            a.download = sheetName + ".xls";

            a.href = uri + this.base64(this.format(template, ctx));;

            a.click();

        },

        format (s, c) {

            return s.replace(/{(\w+)}/g,

                function (m, p) {

                    return c[p];

                });

        }