development memo

HTML

If the button tag in the form does not set the type attribute, the default attribute is submit, and the page refresh will occur after clicking. If the page refresh is not required, the type should be set to button;
There should be no spaces or line breaks when writing the textarea label, otherwise the cursor cannot be at the starting position when the focus is obtained, and the user experience is very bad;
Pay attention to the nesting rules. When a div is nested in a p tag, the div will automatically run outside the p tag . There are several special block-level elements that can only contain inline elements, not block-level elements. These special tags are h1~h6, p, dt, and inline blocks can nest block-level elements;
Check the official account QR code and enter it in the address bar: open.weixin.qq.com/qr/code/?username=WeChat
360 browsers use extreme speed mode by default

<meta name="renderer" content="webkit">

Embedding Tencent Video in a webpage needs to run in a server environment

<object>
<param name="autostart" value="true">
<param name="movie" value="http://cache.tv.qq.com/qqplayerout.swf?playertype=4&v=p0024bgbsyk">
<param name="allowFullScreen" value="true">
<param name="wmode" value="opaque">
<param name="allowScriptAccess" value="always">
<param name="allownetworking" value="all">
<embed width="780" height="500" class="blog_video" id="blog_video_1479535406954" src="http://cache.tv.qq.com/qqplayerout.swf?playertype=4&auto=0&v=p0024bgbsyk" type="application/x-shockwave-flash" data-playtime="" data-mp4="" data-coverwidth="" data-coverheight="" data-vid="" data-duration="" data-type="" allownetworking="all" allowscriptaccess="always" enablecontextmenu="False"></embed> 
</object>

The defaultValue property of the input box can get the initial value, you can compare the user's input value with the initial value, and then do things

JS

Stop bubbling: http://caibaojian.com/javascript-stoppropagation-preventdefault.html
* Load more content method

function loadMore(){
   $.ajax({
      type: "post",
      contentType: "application/json",
      url: "index.json",
      beforeSend: function () {
         $(".loading").show();
      },
      success: function (data) {
         $("#Items").append("<div class='more'></div>");
         var lastDiv = $(".more:last")//chose last div has class more
         $(lastDiv).setTemplateElement("Template-Items").processTemplateURL("index.json");
      },
      complete: function () {
         $(".loading").hide();
      },
      error: function (data) {
         console.info("error: " + data.responseText);
      }
   });
}

/*
 * 价格保留2位小数
 * @param price 用户输入的价格
 */
float_num2: function(price){
    var f_x = parseFloat(price);
    if (isNaN(f_x)){
          return 0;
        }
    var f_x = Math.round(price * 100) / 100;
    var s_x = f_x.toString();
    var pos_decimal = s_x.indexOf('.');
    if (pos_decimal < 0){
      pos_decimal = s_x.length;
      s_x += '.';
    }
    while (s_x.length <= pos_decimal + 2){
      s_x += '0';
    }
    return s_x;
},

/* 模拟点击a标签打开新窗口 */
 var a = $("<a href='http://www.test.com' target='_blank' >test</a>").get(0);
 var e = document.createEvent('MouseEvents');
     e.initEvent('click', true, true);
     a.dispatchEvent(e);

/* return的用法 */
'1.用于结束当前函数，并返回函数的值，
    return相当于return null 
    return false 阻止默认行为，如a标签跳转和form表单提交
    return true 结束函数并不阻止默认行为
 2.用在$.each()中，return fasle 结束each遍历，如果没有fasle，那么只结束当前遍历函数，进入下一次遍历
 3.return 后面可以写多个表达式，返回值取最后一个表达式的值
     return console.log("1"),alert("2"),!1; 返回值为最后一个表达式'

/* new Date 设置时间（一个是0点，一个是8点开始） */
var t2 = new Date("2017-06-07")
// Wed Jun 07 2017 08:00:00 GMT+0800 (中国标准时间)

var t3 = new Date("2017,06,07")
// Wed Jun 07 2017 00:00:00 GMT+0800 (中国标准时间)

var t5 = new Date(2017,5,7)
// 如果未加引号，月份需要减1

// 获取当前时间 （年月日时分秒） 在input中显示 "2017-09-27 17:53:26"
// html代码 <input type="" id="clock" name="" value="">
function getNowDate() {
    var date = new Date();
    var seperator1 = "-";
    var seperator2 = ":";
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
    }

    var h = date.getHours();
    if (h >= 0 && h < 10) {
        h = "0" + h;
    }
    var m = date.getMinutes();
    if (m >= 0 && m <= 9) {
        m = "0" + m;
    }
    var s = date.getSeconds();
    if (s >= 0 && s <= 9) {
        s = "0" + s;
    }

    return date.getFullYear() + seperator1 + month + seperator1 + strDate + " " + h + seperator2 + m + seperator2 +  s;
}

function clock() {
    var t = getNowDate()
    document.getElementById("clock").value = t
}
var int = setInterval("clock()", 1000)

// 获取标签名称 input系列属性-复选框选中状态判断 
// JQ1.6之后，可以通过attr方法去获得属性，通过prop方法去获得特性;
$("#cb").attr("tagName"); //undefined   
$("#cb").prop("tagName"); //INPUT 

//获取是否选中   
var isChecked = $('#cb').prop('checked');   
//或   
var isChecked = $('#cb').is(":checked");   

//设置选中   
$('#cb').prop('checked',true); 

//获取选中的下拉选项 
jQuery("#select1  option:selected").text();

/**
* 复制操作人姓名和ID
* @param ID 待填充的下拉选择框ID "#XX"
*/
cloneOp:function(id){
 $(id).empty();        
 $('复制源的元素选择器').each(function(){ 
var oValue = $(this).val().toString(); 
        var oText = $(this).text().toString(); 
        $(id).append("<option value='"+oValue+"'>"+oText+"</option>");
    });
 $(id).children("option[value="+ $('#current_userid').val()+"]").attr("selected","selected");//设置为当前登录操作人
},

/* 数组转字符串 toString() 方法：会以逗号分隔的字符串形式返回数组项。 */
var arr = [1, 2 ,3, 4];
var str = arr.toString(); //"1,2,3,4"

/* join() 方法：只接受一个参数，即用作分隔符的字符串。会返回以传入分隔符来分隔的字符串形式，如果不传入参数或者传入 undefined ，则与 toString() 方法效果一样。 */
var arr = [1, 2 ,3, 4];
var str1 = arr.join();    //"1,2,3,4"
var str2 = arr.join("|"); //"1|2|3|4"
var str3 = arr.join("");  // "1234"

/* 字符串转数组 split() 方法：基于指定的分隔符将一个字符串分隔成多个子字符串，并将结果放在一个数组中返回。可以接受第二个可选的参数用于指定返回的数组大小。如果不指定分隔符，则将整个字符串放入数组中返回。*/

var colorText = "red,blue,green,yellow"
var colors1 = colorText.split(","); //["red","blue","green","yellow"]
var colors2 = colorText.split(",", 2); //["red","blue"]
var colors3 = colorText.split(); //["red,blue,green,yellow"]

 // 显示和关闭导航 注意点：阻止事件冒泡
 $("#menu").on("click", function (e) {
     $("#navList").slideToggle(400);
     $(document).on("click", function () {
         $("#navList").slideUp(400);
     });
     e.stopPropagation();
 });
 $("#navList").on("click", function (e) {
     e.stopPropagation();
 });

// 比较两个时间的大小
var yzstart_date="2017-10-24";
var yzend_date="2017-10-24";
if(new Date(yzstart_date.replace(/-/g, "/")).getTime()>new Date(yzend_date.replace(/-/g, "/")).getTime()){
  console.log("开始时间不能大于结束时间！");         
}else{
  console.log("ok")
}
// 发送Ajax请求时获取指定的URL地址
function (){
    var url = window.location.protocol +"//" + window.location.host + "/" + "子域名/";     
    return url;
}

//解决bootstrap时间控件 - 连续点击输入框时不弹出日期控件
$('.datetime_ymd').bind('click.myDatetimepicker',function(){         
     $(this).focus();               
})

jQuery

/* 使用JQ的动画时，需要加上stop(),防止重复和延迟 */
$("el").stop().fadeIn();

/* 让页面回到顶部，使用#相当于重新载入页面，需要平滑滚动时用scrollTo() */
//IE和火狐不支持body的scroll，而支持html的scroll

$("body,html").stop().animate({scrollTop:0},300);

/* JQ绑定多个事件写法，对象的形式 */
$("#box").on({
    click:function(){
        console.log("click");
    },
    mouseleave:function(){
        console.log("mouseleave")
    }
})

// 让页面中的某个输入框获得焦点 
setTimeout( function(){
  try{
    document.getElementById('userName').focus();
  } catch(e){}
}, 200);

//"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)$/

CSS

/* CSS3禁用点击事件属性 */
.disabled { 
    pointer-events: none; 
}

/* honver时改变其它元素样式（sass语法） */
&:hover {
  .introduction_title {
        color: #069DFF;
    }
}
/* 子元素垂直水平居中flex方案1 */
.box{
    width: 60%;
    height: 600px;
    display: flex;
    margin: 0;
    border: 1px  solid #ccc;
}
.subbox{
    width: 300px;
    height: 300px;
    background-color: #ccc;
    margin: auto;
}

/* 子元素垂直水平居中flex方案2 */
.box{
    width: 60%;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;    
}

/* 子元素垂直水平居中transform + absolute方案 */
.box {
    position: relative;
  >.subbox {       
    position: absolute;
    top: 50%;
    left: 50%;
    /* 尽可能的不要让该元素的宽度或者高度出现奇数，否则可能会导致模糊 */
    transform: translate(-50%, -50%);    
  }
}

/* 子元素垂直水平居中margin + absolute方案 */
.box {
    position: relative;
  >.subbox {     
    position: absolute;
    top: 50%;
    left: 50%;
    width:1000px; 
    margin-left: -500px;/* 适用于尺寸固定的元素 */
  }
}

/* 为table设置table-layout属性后，单元格的宽度不再根据其内容进行调整，给th/td标签设置的宽度就起作用了 */
table {
 table-layout: fixed;
 width: 100%;
}

/* 自定义input输入框光标样式  */
input,textarea {
    caret-color: #80D480;
 }

/* 单行溢出省略显示  */
.overflow{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 多行行溢出省略显示  */
.overflow{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* 设定显示的行数 */
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* 设置文本不能被选中 */
.disabled-sel{
  user-select: none; 
}

/*  :required 伪类指定具有required 属性的表单元素
    :valid 伪类指定一个通过匹配正确的所要求的表单元素
    :invalid 伪类指定一个不匹配指定要求的表单元素
 */
textarea:invalid {
    border-color: #D61D1D;
    box-shadow: inset 5px 0 0 #D61D1D;/* 实现单侧边框变宽效果 */
}

/* 改变浏览器文本选中色 */
::selection {
   color: #fff;
     background-color: #6bc30d;
 }

/* ::placeholder修饰input的placeholder属性的样式 */
input::-webkit-input-placeholder{
    color: #f00;
}
input::-moz-placeholder{
     color: #f00;
}
input:-ms-input-placeholder{
     color: #f00;
}

/* 消除inline-block的默认空隙 */
.father{
    font-size:0; /* inline-block容器，例：li标签没有用浮动就可以用这个 */
    .son{
        font-size:16px; /* 内容区域 */
    }
}

/* 改变浏览器默认滚动条 */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-button {
    width: 8px;
    height:5px;
}
::-webkit-scrollbar-track {
    background:#eee;
    border: thin solid lightgray;
    box-shadow: 0px 0px 3px #dfdfdf inset;
    border-radius:10px;
}
::-webkit-scrollbar-thumb {
    background:#999;
    border: thin solid gray;
    border-radius:10px;
}
::-webkit-scrollbar-thumb:hover {
    background:#7d7d7d;
}

/* 块级元素默认宽度继承100%；但是当使用了定位后，宽度不再继承父元素的，所以必须手动设置宽高 */

/* 制作箭头导航 */
.flow-item {
     float: left;
     width: 16.66667%;
     max-width: 180px;
     text-align: center;
     margin-bottom: 9px;
     padding-right: 2px;
 }

 .flow-item>div {
     position: relative;
     padding: 5px 0 5px 12px;
     line-height: 20px;
     background: #90A4AE;
     white-space: nowrap;
     overflow: visible;
     color: #fff;
 }

 .flow-item>div:before,
 .flow-item>div:after {
     content: ' ';
     display: block;
     width: 0;
     height: 0;
     border-style: solid;
     border-width: 15px 0 15px 15px;
     border-color: transparent transparent transparent #90A4AE;
     position: absolute;
     left: 0;
     top: 0
 }      
 .flow-item>div:before {
     border-left-color: #fff;
     z-index: 1
 }

 .flow-item>div:after {
     left: auto;
     right: -14px;
     z-index: 2
 }

 .flow-item-0>div:before {
     display: none
 }

 .flow-item-1>div {
     background: #1976D2
 }

 .flow-item-1>div:after {
     border-left-color: #1976D2
 }

 .flow-item-2>div {
     background: #4CAF50
 }

 .flow-item-2>div:after {
     border-left-color: #4CAF50
 }

 .flow-item-1>div:hover {
     background: #1565C0
 }

 .flow-item-1>div:hover:after {
     border-left-color: #1565C0
 }

 .flow-item-2>div:hover {
     background: #43A047
 }

 .flow-item-2>div:hover:after {
     border-left-color: #43A047
 }

</style>
<div class="flow-item flow-item-0">
     <div>主页</div>
</div>
<div class="flow-item flow-item-1">
     <div>导航一</div>
</div>
<div class="flow-item flow-item-2">
     <div>导航二</div>
</div>

CSS selectors
The :empty selector matches every element that has no children (including text nodes)

li:not(:last-child)::after {
  content: attr(data-msg);/* 可以获取元素的自定义属性*/
}

body{
-webkit-overflow-scrolling: touch; /* 兼容移动端滚动条流畅ios5+ */
}
/* 让最外层的容器高度100% body和html无需设置高度100% */
#container {
  margin: 0 auto;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  min-width: 1280px;
  min-height: 730px;
  background: #2d373c;
}

editor

vscode generates test text Lorem

HTML

JS

jQuery

CSS

editor

Guess you like