我把整体分为了三个部分

1.空洞的设计方法（因为大多数的人对设计的方法论都处在一个看了、学了、但是用不上的阶段，主要是讲在我分享的内容中可能会用到的一些设计理论和方法）

2.很一般的设计流程（这个优化设计的流程其实千千万，最重要的还是和真实的项目相结合，每一个点都值得拿出来写一个长篇大论，有机会具体来说说）

3.不成熟的实际应用（设计流程大多复杂而冗长，对于处在初创期或者发展期的产品来说，可能并没有那么长的时间线来实践，这一点也是我想和设计同行一起探讨的问题）

“奥卡姆剃刀原理”是设计师们耳熟能详的一个理论，即“如无必要，勿增实体”，在UI\UX设计中，我的理解是，如果能够在用户的行为路径上和交互方式做出优化，就不要增加新的功能。

这个理论会贯穿在整个产品设计流程中。

用户体验五要素，是我们在学生时代就会听到的一个理论，但其实对于五要素真的对应着什么，意味着什么，可能并没有一个确切的概念。

我说说我的理解：
这五个要素，从战略层到表现层，是一个从抽象到具象的过程，是一个易用产品背后必不可少的东西。

战略层：用户需求、产品目标——就是说在使用完这个产品之后，能不能很好的满足了用户的需求，达没达成做这个产品的目的。

范围层：在产品定位明确的情况下，我们要有什么样的功能和内容——具体需求

结构层：各页面、功能的联系，用户通过一个什么样的路径、什么样的层级关系完成一个流程

架构层：按钮、控件、图片、文本区域的布局，用户对页面的整体感知

表现层：长什么样，颜色啊、风格啊等等）

所谓KANO模型，它和接下来要说的消极选择、NUF评估筛选都可以理解成为一个需求筛选的方法，他们都能够帮助设计师在众多需求当中，找到最合适和最合理的那个。

KANO模型中，我们可以把需求或者说创意点分成5个属性

1.魅力/惊喜属性
用户意想不到，如果没有这个功能用户可能感知不到，但是做了这个功能，用户会非常惊喜和满意。（我们有没有这样的功能？首页tab bar动效）

2.期望/期待属性
做了这个功能，用户满意度会提升，否则反之，会降低

3.必备/必要属性
一个产品的有效性功能，最基本的功能。如果做了用户满意度不会提升，觉得理所当然，但是如果没有，满意度会大幅下降。

4.无差异因素
做和不做对用户的影响并不大，用户也不太在意。

5.反相/错误因素
你不做还好，一旦做了用户反而会反感，降低满意度。

对于一个产品，最重要的即是必要属性和期望属性。

消极选择其实是我们在生活当中也用得到的筛选方法，简单来说就是：当我们想到的两个idea都能用来解决一个问题，那么我们要选这两个当中实现成本低的那个或者说“性价比”最高的那个。

NUF评估筛选相比前两种方法，就显得稍微繁复一点，用起来可能并不如前两种方法更容易。
它其实是，在新颖、使用、可行三个维度，对我们要筛选的点进行打分，再根据分值进行筛选。
用起来其实比较消耗时间。

我把这一部分分成了4个步骤，分别是：桌面研究，用户研究、概念提炼、设计方案

产品深度使用，提问并分析（比如素养课页面，有多少卡片类型，有多少内容分类？哪些课程点击率比较高，为什么？等等）-同类产品分析-用户体验诊断，舒适体验和不是体验-确定设计方向，产品定位、改版（优化）目的、用户群体、价值点）（确定大致设计方向，提出假设，如：经过我们上述的研究和分析，发现丰富、高质量的内容和清晰的布局，能够让用户有浏览和互动欲望，从而达到转化目的

我们一般通过定量问卷和定性访谈来从用户那里获得想要的信息点以得出用户画像和验证我们前期的假设

在做访谈之前，要明确的就是我们要得到什么，或者说我们要访谈用户的哪些方面
即：用户习惯的研究、用户行为模式的研究、用户行为动机的研究

在设置问题时，要明确每个问题的背后我们关注的点在哪里，不可能在不相干问题中浪费时间。

通过前面的两个阶段，我们已经可以得到很多东西了：完整清晰的用户画像、同理心地图、As is 旅程图。我们通过这些东西，找到我们可以优化、可以提升用户体验的地方，即机会点，然后利用我们之前提到的筛选方法，进行创意决策。

（同理心地图）

（As is 旅程图 来自：池喜太厚）

通过前面完整的研究和决策，在此阶段，得出交互设计方案、UI设计方案等等

这一部分是我想和大家探讨的，前面所说的设计流程，多数时候在实际工作当中应用起来并不容易，这也是很多设计师对设计方法嗤之以鼻的原因，觉得设计方法都是玄学，胡说胡有理，这里我也说说我的一些思考。

在我们日常的工作当中要把上述的所有流程都走到，所有设计方法都应用，显然是不现实的。而且，在产品的不同阶段，优化和迭代的驱动力是不同的。在初创和成长阶段，一般为问题驱动，在成熟期，一般为价值驱动。

也就是说，平时的工作可能是一个，发现问题到解决问题的过程，我们需要把成熟的方法和流程进行拆分，进行小部分流程的应用，这样也能够让我们得出一个合理的设计方案。

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

原理

1. 利用键盘控制移动，则需要了解onkeydown函数，表示某个按键被按下，可以以此绑定一个事件响应函数，当键盘被按下时候，触发此事件，进行移动
   

2. keyCode 对于keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。 因此我们可以根据keycode返回的字符码来判断用户所按下的键，下面就是一个用于测试上下左右按键的js代码，经过我的测试之后，返回37 38 39 40；
   

   window.onload = function(){
               var box = document.getElementById("box");
               document.onkeydown = function(event){
                   event = event || window.event;
                   console.log(event.keyCode);
               }           
           };
   3

   
   

   
   

   3.方块的移动实际上就是坐标的改变，因此需要offsetLeft 和offsetTop 来获得当前方块的坐标，然后将坐标进行一定的更改，就可以实现移动的效果了，下面给出代码

   window.onload = function() {
               document.onkeydown = function(event) {
                   event = event || window.event;
                   //设置移动速度
                   var speed = 10;
                   //当ctrl和方向按键同时按下时，提升移动速度
                   if(event.ctrlKey) {
                       speed = 50;
                   }
                   //获取div
                   var box01 = document.getElementById("box01");
                   switch(event.keyCode) {
                       /*keyCode返回按下按键的编码
                        * 37 向左
                        * 38向上
                        * 39向右
                        * 40向下
                        */
                       case 37:
                           box01.style.left = box01.offsetLeft - speed + "px";
                           break;
                       case 39:
                           box01.style.left = box01.offsetLeft + speed + "px";
                           break;
                       case 38:
                           box01.style.top = box01.offsetTop - speed + "px";
                           break;
                       case 40:
                           box01.style.top = box01.offsetTop + speed + "px";
                           break;
   
                   }
               };
   
           };
   

   
   

   
   

   这样就可以简单实现方块的移动，但是此时我们会发现一个问题，当我们进行移动的时候，按住按键不松手，理论上方块应该直接平滑的进行移动，但实际上并非如此，第一下它会有一个小的停顿，这实际上是浏览器防止误触所设置的，因此我们需要对此进行优化
   解决方案
   
   这里我采用了定时器的做法来解决这个问题，因为控制移动的因素有两个，一个是控制方向，一个是控制速度，控制方向没有问题，因此我们需要改变速度
   setInterval（function(){},time）;这是一个定时器，我们只需要在time时间内调用一次函数，就可以解决停顿的问题了
   下面附上修改后的完整代码
   
   
   

   <!DOCTYPE html>
   <html>
   
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           #box01 {
               width: 100px;
               height: 100px;
               background-color: #008000;
               position: absolute;
           }
       </style>
       <script type="text/javascript">
           window.onload = function() {
   
               //获取div
               var box01 = document.getElementById("box01");
               //设置移动速度
               var speed = 10;
               //设置移动的方向
               var dir = 0;
   
               setInterval(function() {
                   switch(dir) {
                       /*keyCode返回按下按键的编码
                        * 37 向左
                        * 38向上
                        * 39向右
                        * 40向下
                        */
                       case 37:
                           box01.style.left = box01.offsetLeft - speed + "px";
                           break;
                       case 39:
                           box01.style.left = box01.offsetLeft + speed + "px";
                           break;
                       case 38:
                           box01.style.top = box01.offsetTop - speed + "px";
                           break;
                       case 40:
                           box01.style.top = box01.offsetTop + speed + "px";
                           break;
   
                   }
   
               }, 50)
   
               document.onkeydown = function(event) {
                   event = event || window.event;
   
                   //当ctrl和方向按键同时按下时，提升移动速度
                   if(event.ctrlKey) {
                       speed = 50;
                   } else {
                       speed = 10;
                   }
                   //使dir等于keycode的值
                   dir = event.keyCode;
   
                   //当鼠标松开时，停止移动         ---如果不写这一个会造成无法停止移动的效果
                   document.onkeyup = function() {
                       dir = 0;
                   };
   
               };
   
           };
       </script>
   </head>
   
   <body>
       <div id="box01"></div>
   </body>
   

</html>

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

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

原文链接：https://blog.csdn.net/weixin_42878211/article/details/104558443

vuex的基础

1,状态管理(共享)

缓存数据==>内存， 只要刷新页面，数据就丢了

订单，详情等，，，不适用vuex缓存数据



用于



非父子通信的问题

缓存后端数据，提高用户体验

注意：

vuex只能有一个store,

为了防止多人修改，我们切割成子store, 再合并成唯一一个大的store对象

模块写法

import Vue from 'vue'
import Vuex from 'vuex'
import cinema from './module/cinemaModule'
import tabbar from './module/tabbarshowModule'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {

  }, // "全局"状态
  mutations:{

  },//唯一修改状态的地方
  //异步处理
  actions:{
  },
  // 对上面的“全局状态”进行数据处理， 类似于vue中的计算属性
  getters:{
  },

  modules:{
    cinema,
    tabbar
  }
})
export default store

2,子模块的写法

const module = {
  namespaced:true, //命名空间
  state :{
    cinemaList:[]
  },
  actions:{
    store.commit("setCinemaList",res.data.data.cinemas) //支持传参
  },
  mutations:{
    setCinemaList(state,data){
      console.log("setCinemaList",data)
      state.cinemaList = data
    }
  },
  getters:{
    topDataList(state){
      //state形参s， vuex自动调用时候，传来值
      return state.cinemaList.slice(0,5)
    }
  }
}

export default module

3,为了防止页面刷新丢失数据,所以还得找到其他插件来帮忙

import createPersistedState from "vuex-persistedstate"; //在index.js页面加入这个插件

// 加入下面的代码
const store = new Vuex.Store({
  plugins: [createPersistedState({
    reducer(val){
      return {
        user: val.user
      }
    }
  })]

————————————————
版权声明：本文为CSDN博主「m0_46436313」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_46436313/article/details/104572076

中介者对象践行了最少知识原则，指一个对象尽可能少的了解别的对象，从而尽量减少对象间耦合程度。这样各个对象只需关注自身实现逻辑，对象间的交互关系交由中介者对象来实现和维护。



需求背景：



手机购买页面，在购买流程中，可以选择手机的颜色及输入购买数量，同时页面有两个展示区域，分别向用户展示刚选择好的颜色和数量。还有一个按钮动态显示下一步的操作，我们需要查询该颜色手机对应的库存，如果库存数量少于这次购买的数量，按钮将被禁用并显示库存不足，反之按钮可以点击并显示放入购物车。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>中介者模式 购买商品</title>
</head>
<body>
    选择颜色： 
    <select id="colorSelect">
        <option value="">请选择</option>
        <option value="red">红色</option>
        <option value="blue">蓝色</option>
    </select>

    输入购买数量：
    <input type="text" id="numberInput">

    您选择了颜色：<div id="colorInfo"></div><br>
    您输入了数量：<div id="numberInfo"></div><br>

    <button id="nextBtn" disabled>请选择手机颜色和购买数量</button>

</body>
<script>

// 最初级的写法
var colorSelect = document.getElementById('colorSelect'),
    numberInput = document.getElementById('numberInput'),
    colorInfo = document.getElementById('colorInfo'),
    numberInfo = document.getElementById('numberInfo'),
    nextBtn = document.getElementById('nextBtn');

var goods = {
    'red': 3,
    'blue': 6
}

colorSelect.onchange = function(){
    var color = this.value,
        number = numberInput.value,
        stock = goods[color]

    colorInfo.innerHTML = color;

    if(!color){
        nextBtn.disabled = true;
        nextBtn.innerHTML = '请选择手机颜色';
        return;
    }

    if( ( (number-0) | 0 ) !== number-0 ){      //用户输入的购买数量是否为正整数
        nextBtn.disabled = true;
        nextBtn.innerHTML = '请输入正确的购买数量';
        return;
    }

    if(number > stock){     //当前选择数量大于库存量
        nextBtn.disabled = true;
        nextBtn.innerHTML = '库存不足';
        return;
    }

    nextBtn.disabled = false;
    nextBtn.innerHTML = '放入购物车';
}

numberInput.oninput = function(){
    var color = colorSelect.value,
        number = this.value,
        stock = goods[color]

    colorInfo.innerHTML = color;

    if(!color){
        nextBtn.disabled = true;
        nextBtn.innerHTML = '请选择手机颜色';
        return;
    }

    if( ( (number-0) | 0 ) !== number-0 ){      //用户输入的购买数量是否为正整数
        nextBtn.disabled = true;
        nextBtn.innerHTML = '请输入正确的购买数量';
        return;
    }

    if(number > stock){     //当前选择数量大于库存量
        nextBtn.disabled = true;
        nextBtn.innerHTML = '库存不足';
        return;
    }

    nextBtn.disabled = false;
    nextBtn.innerHTML = '放入购物车';
}

</script>
</html>

在上个示例中，对象间联系高度耦合，只是两个输入框还好，但如果有多个的话，相互联系就非常复杂了，此时就要考虑用到中介者模式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>中介者模式 购买商品</title>
</head>
<body>
    选择颜色： 
    <select id="colorSelect">
        <option value="">请选择</option>
        <option value="red">红色</option>
        <option value="blue">蓝色</option>
    </select>

    选择内存： 
    <select id="memorySelect">
        <option value="">请选择</option>
        <option value="32G">32G</option>
        <option value="16G">16G</option>
    </select>

    输入购买数量：
    <input type="text" id="numberInput">

    您选择了颜色：<div id="colorInfo"></div><br>
    您选择了内存：<div id="memoryInfo"></div><br>
    您输入了数量：<div id="numberInfo"></div><br>

    <button id="nextBtn" disabled>请选择手机颜色、内存和购买数量</button>
</body>
<script>
    var goods = {
        'red|32G': 3,
        'red|16G': 0,
        'blue|32G': 1,
        'blue|16G': 6
    }

    //引入中介者
    var mediator = (function(){
        var colorSelect = document.getElementById('colorSelect'),
            memorySelect = document.getElementById('memorySelect'),
            numberInput = document.getElementById('numberInput'),
            colorInfo = document.getElementById('colorInfo'),
            memoryInfo = document.getElementById('memoryInfo'),
            numberInfo = document.getElementById('numberInfo'),
            nextBtn = document.getElementById('nextBtn');

        return {
            changed: function(obj){
                var color = colorSelect.value,
                    memory = memorySelect.value,
                    number = numberInput.value,
                    stock = goods[color + '|' + memory];

                if(obj == colorSelect){      //如果改变的是选择颜色下拉框
                    colorInfo.innerHTML = color;
                }else if(obj == memorySelect){
                    memoryInfo.innerHTML = memory;
                }else if(obj == numberInput){
                    numberInfo.innerHTML = number;
                }

                if(!color){
                    nextBtn.disabled = true;
                    nextBtn.innerHTML = '请选择手机颜色';
                    return;
                }

                if(!memory){
                    nextBtn.disabled = true;
                    nextBtn.innerHTML = '请选择手机内存';
                    return;
                }

                if(!number){
                    nextBtn.disabled = true;
                    nextBtn.innerHTML = '请填写手机数量';
                    return;
                }

                if( ( (number-0) | 0 ) !== number-0 ){      //用户输入的购买数量是否为正整数
                    nextBtn.disabled = true;
                    nextBtn.innerHTML = '请输入正确的购买数量';
                    return;
                }

                if(number > stock){     //当前选择数量大于库存量
                    nextBtn.disabled = true;
                    nextBtn.innerHTML = '库存不足';
                    return;
                }

                nextBtn.disabled = false;
                nextBtn.innerHTML = '放入购物车';
            }
        }
    })()

    colorSelect.onchange = function(){
        mediator.changed(this)
    }

    memorySelect.onchange = function(){
        mediator.changed(this)
    }

    numberInput.oninput = function(){
        mediator.changed(this)
    }

    //以后如果想要再增加选项，如手机CPU之类的，只需在中介者对象里加上相应配置即可。
</script>
</html>

在实际开发中，还是要注意选择利弊，中介者对象因为包含对象间交互的复杂性，所以维护成本可能也会较高。在实际开发中，最优目的还是要快速完成项目交付，而非过度设计和堆砌模式。有时对象间的耦合也是有必要的，只有当对象间复杂耦合确实已经导致调用与维护难以为继，才考虑用中介者模式。

————————————————
版权声明：本文为CSDN博主「一期一会」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_34832846/article/details/85989945

弹性布局（Flex）

随着移动互联网的发展，对于网页布局来说要求越来越高，而传统的布局方案对于实现特殊布局非常不方便，比如垂直居中。

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

下面是一些弹性布局的基本语法：

两部分：

1. 语法是添加到父容器上的
        display : flex;（弹性盒子的标志哦！！！）
        flex-direction: row; 布局的排列方向 （主轴排列方向）
             row 默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右。
             row-reverse  显示为行。但方向和row属性值是反的
             column  显示为列
             column-reverse 显示为列。但方向和column属性值是反的
        flex-wrap : nowrap; 是否进行换行处理。
             nowrap; 默认值，不换行处理
             wrap; 换行处理
             wrap-reverse; 反向换行
        flex-flow : flex-direction flex-wrap 复合写法 (是有顺序的)。
        justify-content ; 属性决定了主轴方向上子项的对齐和分布方式。  
            flex-start ： 子项都去起始位置对齐。
            flex-end ： 子项都去结束位置对齐。
            center ： 子项都去中心位置对齐。
            space-between : 表现为两端对齐。多余的空白间距在元素中间区域分配，两边没宽。 
            space-around : 边缘两侧的空白只有中间空白宽度一半即每个块都有左右间距。
            space-evenly :每个flex子项两侧空白间距完全相等。
        align-items : 每一行中的子元素上下对齐方式。
            stretch;默认值，flex子项拉伸
            flex-start;容器顶部对齐
            center;容器居中对齐
            flex-end;容器底部对齐
        align-content : 跟justify-content相反的操作。侧轴的对齐方式。(最少需要两行才能看出效果，因为他是多行的一个上下对齐方式)
            默认：多行下，有几行就会把容器划分为几部分，默认就是stretch拉伸的。
            值跟justify-content取值是相同的。

2. 语法是添加到子容器上的？
        order : 排序(值越大越后)
            0：默认值      eg:1234
            1：放在后面    eg:1342
            -2：放在前面   eg:2134
        flex-grow : 扩展 ( 想看到扩展的效果，必须有空隙 )
            0 : 默认值 , 不去扩展
            0.5：占空隙的一半
            1 : 去扩展 , 会把空白区域全部沾满
         （ 注：子元素会按照设置的比例值来分配空隙，如果比例值总和小于1，那么会有空隙，如果比例值总和大于等于1，那么就没有空隙。）
        flex-shrink : 收缩
            正常默认值是1
            0表示不收缩，.5收缩小一些，2收缩大一些。（大小是跟正常缩放1进行比较的）
        flex-basis : 跟flex-shrink/flex-grow很像。
            flex-shrink/flex-grow是设置一个比例值，flex-basis是设置一个具体值。
        flex : 一种复合写法
            flex-grow  flex-shrink  flex-basis
            flex:1;
                flex : 1 1 0    
            flex:0;
                flex : 0 1 0
        algin-self: 跟align-items操作很像，区别就是只是针对某一个子项。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        ul{list-style: none;}
        a{text-decoration: none;}
        img{display: block;}

        .box1{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;justify-content: center;align-items: center;}
        .box1 div{width: 30px;height: 30px;border-radius:50%;background: black;}

        .box2{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;align-items: center;justify-content: space-between;}
        .box2 div{width: 30px;height: 30px;border-radius:50%;background: black;margin: 10px;}
        .box2 div:nth-of-type(1){align-self: flex-start;}
        .box2 div:nth-of-type(2){align-self: flex-end;}

        .box3{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;align-items: center;justify-content: space-between;}
        .box3 div{width: 30px;height: 30px;border-radius:50%;background: black;margin: 10px;}
        .box3 div:nth-of-type(1){align-self: flex-start;}
        .box3 div:nth-of-type(3){align-self: flex-end;}

        .box4{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}
        .box4 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}
        .box4 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}

        .box5{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}
        .box5 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}
        .box5 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}

        .box6{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}
        .box6 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}
        .box6 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}

        #box{width: 400px;height: 400px;margin: 20px auto;border: 1px springgreen solid; 
        perspective: 500px;perspective-origin: right top;}
        #box .main{position: relative;width: 150px;height: 150px;margin: 125px;
        transform-style: preserve-3d;transition: 4s;transform-origin: center center -50px;}
        #box .main .box1{position: absolute;background:limegreen;left: 0;top: 0;
        width: 150px;height: 150px;}
        #box .main .box2{position: absolute;background:limegreen;left: 0;top: 0;
        width: 150px;height: 150px;left: 150px;transform-origin:left; transform:rotateY(90deg);}
        #box .main .box3{position: absolute;background:limegreen;left: 0;top: 0;
        width: 150px;height: 150px;left: -150px;transform-origin:right; transform:rotateY(-90deg);}
        #box .main .box4{position: absolute;background:limegreen;left: 0;top: 0;
        width: 150px;height: 150px;top: -150px;transform-origin:bottom; transform:rotateX(90deg);}
        #box .main .box5{position: absolute;background:limegreen;left: 0;top: 0;
        width: 150px;height: 150px;top: 150px;transform-origin:top; transform:rotateX(-90deg);}
        #box .main .box6{position: absolute;background:limegreen;left: 0;top: 0;
        width: 150px;height: 150px;transform:translateZ(-150px) rotateY(180deg);}

        #box:hover .main{transform:rotateY(360deg);}
    </style>
</head>
<body>
    <div id="box">
        <div class="main">
            <div class="box1">
                <div></div>
            </div>
            <div class="box2">
                <div></div>
                <div></div>
            </div>
            <div class="box3">
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="box4">
                <div>
                    <li></li>
                    <li></li>
                </div>
                <div>
                    <li></li>
                    <li></li>
                </div>
            </div>
            <div class="box5">
                <div>
                    <li></li>
                    <li></li>
                </div>
                <div>
                    <li></li>
                </div>
                <div>
                    <li></li>
                    <li></li>
                </div>
            </div>
            <div class="box6">
                <div>
                    <li></li>
                    <li></li>
                </div>
                <div>
                    <li></li>
                    <li></li>
                </div>
                <div>
                    <li></li>
                    <li></li>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

注：默认情况下，在弹性盒子中的子元素的左右排列的。
注：
    水平是主轴的时候：默认情况下，当宽高不写的时候，宽度由内容决定，高度由父容器决定。
    垂直是主轴的时候：默认情况下，当宽高不写的时候，宽度由父容器决定，高度由内容决定。
注：当子项的总宽度大于父容器的时候，会自动收缩的（弹性的优先级是大于自身固定大小的）
注：当子项的内容已经达到了父容器最小宽高的时候，就会出现溢出的现象。
注：弹性布局中用的频率比较多的语法：
    display : flex;
    flex-direction;
    justify-content;
    align-items;
    flex;
注：弹性布局的优势是做一维布局，网格布局的优势是做二维布局。

下面是弹性布局骰子案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        ul{list-style: none;}
        a{text-decoration: none;}
        img{display: block;}

        .box1{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;justify-content: center;align-items: center;}
        .box1 div{width: 30px;height: 30px;border-radius:50%;background: black;}

        .box2{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;align-items: center;justify-content: space-between;}
        .box2 div{width: 30px;height: 30px;border-radius:50%;background: black;margin: 10px;}
        .box2 div:nth-of-type(1){align-self: flex-start;}
        .box2 div:nth-of-type(2){align-self: flex-end;}

        .box3{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;align-items: center;justify-content: space-between;}
        .box3 div{width: 30px;height: 30px;border-radius:50%;background: black;margin: 10px;}
        .box3 div:nth-of-type(1){align-self: flex-start;}
        .box3 div:nth-of-type(3){align-self: flex-end;}

        .box4{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}
        .box4 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}
        .box4 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}

        .box5{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}
        .box5 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}
        .box5 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}

        .box6{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}
        .box6 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}
        .box6 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}

        #box{width: 400px;height: 400px;margin: 20px auto;border: 1px springgreen solid; 
        perspective: 500px;perspective-origin: right top;}
        #box .main{position: relative;width: 150px;height: 150px;margin: 125px;
        transform-style: preserve-3d;transition: 4s;transform-origin: center center -50px;}
        #box .main .box1{position: absolute;background:limegreen;left: 0;top: 0;
        width: 150px;height: 150px;}
        #box .main .box2{position: absolute;background:limegreen;left: 0;top: 0;
        width: 150px;height: 150px;left: 150px;transform-origin:left; transform:rotateY(90deg);}
        #box .main .box3{position: absolute;background:limegreen;left: 0;top: 0;
        width: 150px;height: 150px;left: -150px;transform-origin:right; transform:rotateY(-90deg);}
        #box .main .box4{position: absolute;background:limegreen;left: 0;top: 0;
        width: 150px;height: 150px;top: -150px;transform-origin:bottom; transform:rotateX(90deg);}
        #box .main .box5{position: absolute;background:limegreen;left: 0;top: 0;
        width: 150px;height: 150px;top: 150px;transform-origin:top; transform:rotateX(-90deg);}
        #box .main .box6{position: absolute;background:limegreen;left: 0;top: 0;
        width: 150px;height: 150px;transform:translateZ(-150px) rotateY(180deg);}

        #box:hover .main{transform:rotateY(360deg);}
    </style>
</head>
<body>
    <div id="box">
        <div class="main">
            <div class="box1">
                <div></div>
            </div>
            <div class="box2">
                <div></div>
                <div></div>
            </div>
            <div class="box3">
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="box4">
                <div>
                    <li></li>
                    <li></li>
                </div>
                <div>
                    <li></li>
                    <li></li>
                </div>
            </div>
            <div class="box5">
                <div>
                    <li></li>
                    <li></li>
                </div>
                <div>
                    <li></li>
                </div>
                <div>
                    <li></li>
                    <li></li>
                </div>
            </div>
            <div class="box6">
                <div>
                    <li></li>
                    <li></li>
                </div>
                <div>
                    <li></li>
                    <li></li>
                </div>
                <div>
                    <li></li>
                    <li></li>
                </div>
            </div>
        </div>
    </div>
</body>
</html>


实际效果：
 



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

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

原文链接：https://blog.csdn.net/GLINLIND/article/details/104572530

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样式：

结果图：

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