如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

微信小程序学习参考demo源码集合，仅供参考学习用途！！！

   总结了工作中可能经常会用到的各类正则表达式的写法。
   方便以后进行查找，减少工作量。

   1. 校验基本日期格式

var reg1 = /^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$/;
var reg2 = /^(^(\d{4}|\d{2})(\-|\/|\.)\d{1,2}\3\d{1,2}$)|(^\d{4}年\d{1,2}月\d{1,2}日$)$/;

   2. 校验密码强度
   密码的强度必须是包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间。

var reg = /^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/;

   3. 校验中文 

   字符串仅能是中文。

var reg = /^[\\u4e00-\\u9fa5]{0,}$/; 4. 由数字、26个英文字母或下划线组成的字符串 var reg = /^\\w+$/; 5. 校验E-Mail 地址
同密码一样，下面是E-mail地址合规性的正则检查语句。 var reg = /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/; 6. 校验身份证号码
下面是身份证号码的正则校验。15 或 18位。
15位： var reg = /^[1-9]\\d{7}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}$/; 18位： var reg = /^[1-9]\\d{5}[1-9]\\d{3}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}([0-9]|X)$/; 7. 校验日期
“yyyy-mm-dd” 格式的日期校验，已考虑平闰年。 var reg = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/; 8. 校验金额
金额校验，到2位小数。 var reg = /^[0-9]+(.[0-9]{2})?$/; 9. 校验手机号
下面是国内 13、15、18开头的手机号正则表达式。（可根据目前国内收集号扩展前两位开头号码） var reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\\d{8}$/;    10. 判断IE的版本
   IE目前还没被完全取代，很多页面还是需要做版本兼容，下面是IE版本检查的表达式。

var reg = /^.*MSIE [5-8](?:\\.[0-9]+)?(?!.*Trident\\\/[5-9]\\.0).*$/;

      11. 校验IP-v4地址

var reg = /\\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\b/;

     12. 校验IP-v6地址

var reg = /(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))/;

      13. 检查URL的前缀
   应用开发中很多时候需要区分请求是HTTPS还是HTTP，通过下面的表达式可以取出一个url的前缀然后再逻辑判断。

if (!s.match(
    /^[a-zA-Z]+:\/\//
  )) {
  s =
    'http://' +
    s;

}

      14. 提取URL链接
   下面的这个表达式可以筛选出一段文本中的URL。

var reg = /^(f|ht){1}(tp|tps):\/\/([\w-]+\.)+[\w-]+(\/[\w- ./?%&=]*)?/;    15. 文件路径及扩展名校验
   验证 windows下文件路径和扩展名（下面的例子中为.txt文件）
var reg = /^([a-zA-Z]\\:|\\\\)\\\\([^\\]+\\)*[^\\/:*?"<>|]+\\.txt(l)?$/;       16. 提取Color Hex Codes
   有时需要抽取网页中的颜色代码，可以使用下面的表达式。
var reg = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/; 17. 提取网页图片
   假若你想提取网页中所有图片信息，可以利用下面的表达式。
var reg = /\\< *[img][^\\>]*[src] *= *[\\"\']{0,1}([^\\"\'\ >]*)/;    18. 提取页面超链接
   提取html中的超链接。

var reg = /(<a\\s*(?!.*\\brel=)[^>]*)(href="https?:\/\/)((?!(?:(?:www\\.)?'.implode('|(?:www\\.)?', $follow_list).'))[^"]+)"((?!.*\\brel=)[^>]*)(?:[^>]*)>/;

   19. 查找CSS属性
   通过下面的表达式，可以搜索到相匹配的CSS属性。

var reg = /^\\s*[a-zA-Z\\-]+\\s*[:]{1}\\s[a-zA-Z0-9\\s.#]+[;]{1}/;

   20. 抽取注释
   如果你需要移除HMTL中的注释，可以使用如下的表达式。

var reg = /<!--(.*?)-->/;

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

背景

• 设置禁用状态disabled，如：$(".js-example-disabled").prop("disabled",false);
• 默认值设置：$("#select2").val("1").trigger("change");
• 多选的默认值可以使用：$("#select2").val(["1","2"]).trigger("change"); 这样传递数组过
• select2还有丰富的自定义事件

  JavaScript

$("#select2").on("select2:open", function (e) { log("select2:open", e); });
 
$("#select2").on("select2:close", function (e) { log("select2:close", e); });
 
$("#select2").on("select2:select", function (e) { log("select2:select", e); });
 
$("#select2").on("select2:unselect", function (e) { log("select2:unselect", e); });
 
$("#select2").on("change", function (e) { log("change"); });

【select2的其他组件】

<div class="box1 div">

   <p>多选下拉框</p>

<select id="sel_menu1" multiple="multiple" class="form-control">

  <optgroup label="系统设置">

  <option value="1">用户管理</option>

  <option value="2">角色管理</option>

  <option value="3">部门管理</option>

  <option value="4">菜单管理</option>

  </optgroup>

  <optgroup label="订单管理">

  <option value="5">订单查询</option>

  <option value="6">订单导入</option>

  <option value="7">订单删除</option>

  <option value="8">订单撤销</option>

  </optgroup>

  <optgroup label="基础数据">

  <option value="9">基础数据维护</option>

  </optgroup>

  </select>

</div>

JS代码

$("#sel_menu1").select2({[/align]
         tags: true,
         maximumSelectionLength: 3 //最多能够选择的个数

      });

代码

Html代码

<div class="box2 div">
     <p>图文结合的效果</p>
     <select id="sel_menu2" class="js-example-templating js-states form-control">
          <optgroup label="系统设置">
  <option value="1">用户管理</option>
   <option value="2">角色管理</option>
   <option value="1">部门管理</option>
  <option value="1">菜单管理</option>
  </optgroup>
  <optgroup label="订单管理">
  <option value="1">订单查询</option>
  <option value="1">订单导入</option>
   <option value="1">订单删除</option>
  <option value="1">订单撤销</option>
   </optgroup>
  <optgroup label="基础数据">
  <option value="1">基础数据维护</option>
  </optgroup>
      </select>
</div>

JS代码

$("#sel_menu2").select2({
            templateResult: formatState,
            templateSelection: formatState
        });
        function formatState(state) {
            if (!state.id) {
                return state.text; 
            }
  var $state = $('<span><img src="./image/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
            );
            return $state;
        };

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

前言：css3的出现使得我们可以通过前端技术，让网页内容变得更丰富，更华丽。今天来玩玩好玩的颜色渐变。

以下是 JavaScript 错误 Top 10：

       为了便于阅读，我们将每个错误描述都缩短了。接下来，让我们深入到每一个错误，来确定什么会导致它，以及如何避免创建它。 
1. Uncaught TypeError: Cannot read property 
        如果你是一个 JavaScript 开发人员，可能你看到这个错误的次数比你敢承认的要多（LOL…）。当你读取一个未定义的对象的属性或调用其方法时，这个错误会在 Chrome 中出现。 您可以很容易的在 Chrome 开发者控制台中进行测试（尝试）。

       发生这种情况的原因很多，但常见的一种是在渲染 UI 组件时对于状态的初始化操作不当。
        我们来看一个在真实应用程序中发生的例子：我们选择 React，但该情况也同样适用于 Angular、Vue 或任何其他框架。

Javascript代码  

class Quiz extends Component {
  componentWillMount() {
    axios.get('/thedata').then(res => {
      this.setState({items: res.data});
    });
  }
  render() {
    return (
      <ul>
        {this.state.items.map(item =>
          <li key={item.id}>{item.name}</li>
        )}
      </ul>
    );
  }
} 这里有两件重要的事情要实现：

• 组件的状态（例如 this.state）从 undefined 开始。
• 当异步获取数据时，不管它是在构造函数componentWillMount还是componentDidMount中获取的，组件在数据加载之前至少会呈现一次，当 Quiz 第一次呈现时，this.state.items 是未定义的。 这又意味着 ItemList 将 items 定义为 undefined，并且在控制台中出现错误 - “Uncaught TypeError: Cannot read property ‘map’ of undefined”。
  

       这很容易解决。最简单的方法：在构造函数中用合理的默认值来初始化 state。

Javascript代码

class Quiz extends Component {
  // Added this:
  constructor(props) {
    super(props);
    // Assign state itself, and a default value for items
    this.state = {
      items: []
    };
  }
  componentWillMount() {
    axios.get('/thedata').then(res => {
      this.setState({items: res.data});
    });
  }
  render() {
    return (
      <ul>
        {this.state.items.map(item =>
          <li key={item.id}>{item.name}</li>
        )}
      </ul>
    );
  }
}

       在你的应用程序中的具体代码可能是不同的，但我们希望我们已经给你足够的线索，以解决或避免在你的应用程序中出现的这个问题。如果还没有，请继续阅读，因为我们将在下面覆盖更多相关错误的示例。
        2. TypeError: ‘undefined’ is not an object
        这是在 Safari 中读取属性或调用未定义对象上的方法时发生的错误。您可以在 Safari Developer Console 中轻松测 试。这与 1 中提到的 Chrome 的错误基本相同，但 Safari 使用了不同的错误消息提示语。

      3.TypeError: null is not an object
        这是在 Safari 中读取属性或调用空对象上的方法时发生的错误。 您可以在 Safari Developer Console 中轻松测试。

有趣的是，在 JavaScript 中，null 和 undefined 是不一样的，这就是为什么我们看到两个不同的错误信息。undefined 通常是一个尚未分配的变量，而 null 表示该值为空。 要验证它们不相等，请尝试使用严格的相等运算符 ===：  

       在现实世界的例子中，这种错误可能发生的一种场景是：如果在加载元素之前尝试在 JavaScript 中使用元素。 因为 DOM API 对于空白的对象引用返回值为 null。
        任何执行和处理 DOM 元素的 JS 代码都应该在创建 DOM 元素之后执行。 JS 代码按照 HTML 中的规定从上到下进行解释。 所以，如果 DOM 元素之前有一个标签，脚本标签内的 JS 代码将在浏览器解析 HTML 页面时执行。 如果在加载脚本之前尚未创建 DOM 元素，则会出现此错误。
        在这个例子中，我们可以通过添加一个事件监听器来解决这个问题，这个监听器会在页面准备好的时候通知我们。 一旦 addEventListener被触发，init() 方法就可以使用 DOM 元素。

Html代码

<script>
  function init() {
    var myButton = document.getElementById("myButton");
    var myTextfield = document.getElementById("myTextfield");
    myButton.onclick = function() {
      var userName = myTextfield.value;
    }
  }
  document.addEventListener('readystatechange', function() {
    if (document.readyState === "complete") {
      init();
    }
  });
</script>
<form>
  <input type="text" id="myTextfield" placeholder="Type your name" />
  <input type="button" id="myButton" value="Go" />
</form>

4. (unknown): Script error 
       当未捕获的 JavaScript 错误（通过window.onerror处理程序引发的错误，而不是捕获在try-catch中）被浏览器的跨域策略限制时，会产生这类的脚本错误。 例如，如果您将您的 JavaScript 代码托管在 CDN 上，则任何未被捕获的错误将被报告为“脚本错误” 而不是包含有用的堆栈信息。这是一种浏览器安全措施，旨在防止跨域传递数据，否则将不允许进行通信。 
        要获得真正的错误消息，请执行以下操作： 
        1. 发送 ‘Access-Control-Allow-Origin’ 头部 
        将 Access-Control-Allow-Origin 标头设置为 * 表示可以从任何域正确访问资源。 如有必要，您可以将域替换为您的域：例如，Access-Control-Allow-Origin：www.example.com。 但是，处理多个域会变得棘手，如果你使用 CDN，可能由此产生更多的缓存问题会让你感觉到这种努力并不值得。 在这里看到更多。 
         这里有一些关于如何在各种环境中设置这个头文件的例子： 
         在 JavaScript 文件所在的文件夹中，使用以下内容创建一个 .htaccess 文件：
代码

       Header add Access-Control-Allow-Origin "*"  

       将 add_header 指令添加到提供 JavaScript 文件的位置块中：
代码

       location ~ ^/assets/ {  add_header Access-Control-Allow-Origin *;  }  

        将以下内容添加到您为 JavaScript 文件提供资源服务的后端： 

代码 

        rspadd Access-Control-Allow-Origin:\ *  

        在 <script> 中设置 crossorigin="anonymous"

在您的 HTML 代码中，对于您设置了Access-Control-Allow-Origin header 的每个脚本，在 script 标签上设置crossorigin =“anonymous”。在脚本标记中添加 crossorigin 属性之前，请确保验证上述 header 正确发送。 在Firefox 中，如果存在crossorigin属性，但Access-Control-Allow-Origin头不存在，则脚本将不会执行。 

5. TypeError: Object doesn’t support property

       这是您在调用未定义的方法时发生在 IE 中的错误。 您可以在 IE 开发者控制台中进行测试。

       这相当于 Chrome 中的 “TypeError：”undefined“ is not a function” 错误。 是的，对于相同的逻辑错误，不同的浏览器可能具有不同的错误消息。 
        对于使用 JavaScript 命名空间的 Web 应用程序，这是一个 IE l浏览器的常见的问题。 在这种情况下，99.9％ 的原因是 IE 无法将当前名称空间内的方法绑定到 this 关键字。 例如：如果你 JS 中有一个命名空间 Rollbar 以及方法 isAwesome 。 通常，如果您在 Rollbar 命名空间内，则可以使用以下语法调用isAwesome方法：
Javascript代码 

this.isAwesome();  

        Chrome，Firefox 和 Opera 会欣然接受这个语法。 另一方面 IE，不会。 因此，使用 JS 命名空间时最安全的选择是始终以实际名称空间作为前缀。

6. TypeError: ‘undefined’ is not a function
        当您调用未定义的函数时，这是 Chrome 中产生的错误。 您可以在 Chrome 开发人员控制台和 Mozilla Firefox 开发人员控制台中进行测试。

       随着 JavaScript 编码技术和设计模式在过去几年中变得越来越复杂，回调和关闭中的自引用范围也相应增加，这是这种/那种混淆的相当常见的来源。
       考虑这个代码片段：
Javascript代码

function testFunction() {
  this.clearLocalStorage();
  this.timer = setTimeout(function() {
    this.clearBoard();    // what is "this"?
  }, 0);
};

执行上面的代码会导致以下错误：“Uncaught TypeError：undefined is not a function”。 你得到上述错误的原因是，当你调用setTimeout()时，实际上是调用window.setTimeout()。 因此，在窗口对象的上下文中定义了一个传递给setTimeout()的匿名函数，该函数没有clearBoard()方法。
一个传统的，旧浏览器兼容的解决方案是简单地将您的 this 保存在一个变量，然后可以由闭包继承。 例如：
Javascript代码 

function testFunction () {
  this.clearLocalStorage();
  var self = this;   // save reference to 'this', while it's still this!
  this.timer = setTimeout(function(){
    self.clearBoard(); 
  }, 0);

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

Echarts 标签中文本内容太长的时候怎么办 ? 
- 1对文本进行倾斜 
在xAxis.axisLabe中修改rotate的值

 xAxis: {
            data: ["衬衫11111","羊毛二二","雪纺衫111","裤子111","高跟鞋11","袜子111"],//x轴中的数据 name:"123",//坐标轴名称。 nameLocation:'end',//坐标轴名称显示位置。 axisLabel : {//坐标轴刻度标签的相关设置。 interval:0, rotate:"45" }
        },

 grid:{//直角坐标系内绘图网格 show:true,//是否显示直角坐标系网格。[ default: false ] left:"20%",//grid 组件离容器左侧的距离。 right:"30px",
            borderColor:"#c45455",//网格的边框颜色 bottom:"20%" // },

 axisLabel : {//坐标轴刻度标签的相关设置。 formatter : function(params){ var newParamsName = "";// 最终拼接成的字符串 var paramsNameNumber = params.length;// 实际标签的个数 var provideNumber = 4;// 每行能显示的字的个数 var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整 /**
                             * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                             */ // 条件等同于rowNumber>1 if (paramsNameNumber > provideNumber) { /** 循环每一行,p表示行 */ for (var p = 0; p < rowNumber; p++) { var tempStr = "";// 表示每一次截取的字符串 var start = p * provideNumber;// 开始截取的位置 var end = start + provideNumber;// 结束截取的位置 // 此处特殊处理最后一行的索引值 if (p == rowNumber - 1) { // 最后一次不换行 tempStr = params.substring(start, paramsNameNumber);
                                    } else { // 每一次拼接字符串并换行 tempStr = params.substring(start, end) + "\n";
                                    }
                                    newParamsName += tempStr;// 最终拼成的字符串 }

                            } else { // 将旧标签的值赋给新标签 newParamsName = params;
                            } //将最终的字符串返回 return newParamsName
                }

            }

axisLabel: { interval: 0,  
                               formatter:function(value) {  
                                   return value.split("").join("\n"); } } 

axisLabel : {//坐标轴刻度标签的相关设置。 clickable:true,//并给图表添加单击事件  根据返回值判断点击的是哪里 interval : 0,
                formatter : function(params,index){ if (index % 2 != 0) { return '\n\n' + params;
                    } else { return params;
                    }
                }

            }

这个动画是将鼠标移动到订阅按钮上移动光标会显示相应的彩色渐变。这个想法很简单，但是它能使这个按钮脱颖而出，人们一下子就注意到它了，增加了点击的概率。

那么如何使用CSS实现这个效果？

追踪位置

我们要做的第一件事就是获取到鼠标的位置。

  document.querySelector('.button').onmousemove = (e) => {
  const x = e.pageX - e.target.offsetLeft
  const y = e.pageY - e.target.offsetTop

  e.target.style.setProperty('--x', `${ x }px`)
  e.target.style.setProperty('--y', `${ y }px`)
  }
   1.选择元素，等待，直到用户将鼠标移过它；
   2.计算相对于元素的位置；
   3.将坐标存在CSS的变量中。

动画渐变
  .button {
     position: relative;
     appearance: none;
     background: #f72359;
     padding: 1em 2em;
     border: none;
     color: white;
     font-size: 1.2em;
     cursor: pointer;
     outline: none;
     overflow: hidden;
     border-radius: 100px;
  span {
    position: relative;
  }
  &::before {
    --size: 0;  
    content: '';
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    background: radial-gradient(circle closest-side, #4405f7, transparent);
    transform: translate(-50%, -50%);
    transition: width .2s ease, height .2s ease;
    }
    &:hover::before {
    --size: 400px;
      }

   }

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里、

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
.box{ display: flex;}
行内元素也可以使用 Flex 布局。
.box{ display: inline-flex;}
Webkit 内核的浏览器display: -webkit-flex;
设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。




容器属性：

flex-direction：（排列方向横向还是纵向）
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。



flex-wrap：（如何换行）
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

flex-flow：（flex-direction和flex-wrap简称，默认值为row nowrap）

justify-content：（横向对齐方式）
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。



align-items：（纵向对齐方式）
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。



align-content：（多根轴线的对齐方式）
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch（默认值）：轴线占满整个交叉轴。



 
box属性：

order：（排列顺序）
数值越小，排列越靠前，默认为0。

flex-grow：（剩余空间分配，box放大比例，默认为0，即如果存在剩余空间，也不放大）



flex-shrink：（box缩小比例，默认为1，即如果空间不足，该项目将缩小）



flex-basis：（box占据的宽度或高度）



align-self：（单个box的对齐方式，与其他box对齐方式）

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务