Daily Reflections (2019/12/27)

Topic Overview

• Please describe the priority display HTML elements
• Let Chrome supports text smaller than 12px of how to do?
• Write a method to verify identity card number

Subject to answer

Please describe the priority display HTML elements

• Priority display HTML elements
  • Covering the root cause of a form element style element is the default display HTML elements precedence rules. Frame element is always priority over other HTML elements, and therefore always displayed at the top, form elements always has priority over all non-form elements. HTML form elements commonly used include: text area (TEXTAREA), the list box (the SELECT), a text input box, the password input box, radio input boxes, check boxes, and so the input. Common non-form elements include: a link tag (A), DIV tag, SPAN tag, TABLE mark and so on.
  • HTML elements and can be divided into two groups, i.e. there is a window of HTML elements (Windowed Element), windowless HTML elements (Windowless Element) The display requirements. There are window elements include: SELECT element, OBJECT element, plug-ins, IE5.01 IFRAME element to the main earlier. Windowless elements include: Most common HTML elements, such as links and TABLE tags, most of the form elements except SELECT element
• Browser type and display priority
  • Netscape / Mozilla: In previous versions of NS 6.0 browser, form elements always have a higher priority than other HTML elements. However NS 6+ browser, the display order and all forms IFRAME element or elements is determined by the z-index CSS property values, or determined by the order in which they appear in the HTML page, except for the SELECT element.
  • Netscape / Mozilla: In previous versions of NS 6.0 browser, form elements always have a higher priority than other HTML elements. However NS 6+ browser, the display order and all forms IFRAME element or elements is determined by the z-index CSS property values, or determined by the order in which they appear in the HTML page, except for the SELECT element.
  • Opera: In the latest Opera (7.10 *) browser, all the form elements, including SELECT, including the display priority is determined according to z-index property or order in which they appear in the HTML page. However, the latest Opera browser does not IFRAME element as a non-window display, have been seen as IFRAME window elements, all windowless elements in priority than the display order.
• Z-index properties of CSS
  • The z-index CSS property can be used to control the sequence of any cover display HTML elements. When a plurality of HTML elements overlap in the same space, a large z-index value of the element will cover a smaller z-index value of the element
  • However, z-index attribute value is not a panacea. Windowed display element is always in front of window elements without, z-index attribute value only decisive element between the same class. Figuratively speaking, there is no window and window elements like elements painted on two different canvas of the same browser window, two types of elements are self-contained, their z-index property only in relation to other elements on the same canvas kick in

Let Chrome supports text smaller than 12px of how to do?

• -webkit-text-size-adjust: none; this property has been abolished in the high version (after 27) of Chrome.

  #chrome10px{ -webkit-text-size-adjust:none; font-size:10px; }

• Use transform: scale (0.5, 0.5), but using transform to note the following points:

  • transform of the line element is not valid, and therefore use either display: block; either use display: inline-block;
  • Even with the scaling transform the original elements still occupy the position corresponding. Therefore needs to be adjusted, it is best and then wrapped in a layer of the element on the outside, so as not to affect other elements

  .px12 {
     font-size: 12px;
  }
  .px9 {
      font-size: 9px;
      display: inline-block;
      -webkit-transform: scale(0.75);        /* 12*0.75=9 */
  }
  .px6 {
      font-size: 6px;
      display: block;
      -webkit-transform: scale(0.5);        /* 12*0.5=9 */
      float: left;
  }

• The characters do in the picture

Write a method to verify identity card number

//身份证号码的组成：地址码6位+年份码4位+月份码2位+日期码2位+顺序码3位+校验码1位
function check(val){
    var reg=/^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|(10|20|30|31))\d{3}[0-9Xx]$/;
     return reg.test(val);
}
//检测省份码
function checkProvice(val){
    var patten=/^[1-9][0-9]/;
    if(patten.test(val)){
        var prov={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",51:"四川",52:"贵州",53:"云南",54:"西藏",50:"重庆",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",81:"香港",82:"澳门",83:"台湾"};
        if(prov[val]){return true;};
    }
   return false;
}
//检测出生日期
function checkBirthDay(val){
    var patten=/^(19|20)\d{2}((0[1-9])|1[0-2])(([0-2][1-9])|(10|20|30|31))/;
    if(patten.test(val)){
        var year=val.substring(0,4);
        var month=val.substring(4,6);
        var day=val.substring(6,8);
        var date=new Date(year+"-"+month+"-"+day);
        if(date&&date.getMonth()==(parseInt(month)-1)){return true;}
    }
    return false;
}
//检测校验码
function checkVerifyCode(val){
    var patten=/^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|(10|20|30|31))\d{3}[0-9X]$/;
    var ratio=[7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2];
    var codeArr=[1,0,"X",9,8,7,6,5,4,3,2];
    var code=val.substring(17);
    if(patten.test(val)){
        var sum=0;
        for(var i=0;i<17;i++){
            sum+=val[i]*ratio[i];
        }
        console.log(sum)
        var remainder=sum%11;
        if(codeArr[remainder]==code){
            return true;
        }
    }
    return false;
}
function checkIndetityCardNo(val){
    var province=val.substring(0,2);
    if(checkProvice(province)){
         var date=val.substring(6,14);
         if(checkBirthDay(date)){ 
             return checkVerifyCode(val);
         }
    }
    return false;
}