数字和日期便捷格式化、模仿placeholder、防止重复提交、解决DOM取值无效

1.在选项表单控件中模仿placeholder属性

目标效果如下：

在选项表单中通过设置 disabled selected hidden 三个属性可以达到模拟placeholder属性的效果，默认显示，选择时消失并不可回选。 <a href="https://htmlpreview.github.io/?https://github.com/lbwa/WebDev/blob/master/dev/form.html" target="_blank">实际应用：form.html

<select class="gender" name="gender">
      <option value="Your Gender" disabled selected hidden>Your Gender</option>
      <option value="Male">Male</option>
      <option value="Female">Female</option>
      <option value="Secret">Secret</option>
</select>

2.防止重复提交

如何防止用户操作的不必要的多次函数运行，或者多次不必要的表单提交。个人的做法是在触发监听程序之后，移除监听器，待监听程序执行完毕之后，再添加之前删除的监听程序。

3.非number类型处理为number类型

因为Number()方法处理整数的规则过于复杂，且'1a'这类值无法转换为number类型。一般处理整数的方法是parseInt()，但是空字符串使用parseInt()方法返回NaN(当两种方法都无法按自己的规则返回数值时，都返回NaN)，此时再使用Number()方法，会返回0。

补充：数字格式化

Number.prototype.toLocaleString( [ locales [, options ] ] ) 可将数字格式化为特定格式字符串，如补0。控制位数，是否有逗号（分隔符），添加货币符号等等。

注：该方法最终返回的结果是字符串。使用补0时，第一个参数 locales 要设置（如：'zh'）。

const num = 2333333;
num.toLocaleString('zh', { style: 'decimal' }); // 2,333,333
num.toLocaleString('zh', { style: 'percent' }); // 233,333,300%
num.toLocaleString('zh', { style: 'currency' });    //报错
num.toLocaleString('zh', { style: 'currency', currency: 'CNY' }); // ￥2,333,333.00
num.toLocaleString('zh', { style: 'currency', currency: 'cny', currencyDisplay: 'code' }); // CNY2,333,333.00
num.toLocaleString('zh', { style: 'currency', currency: 'cny', currencyDisplay: 'name' }); // 2,333,333.00人民币
num.toLocaleString('zh', { minimumIntegerDigits: 5 }); // 02,333.3
//如果不想有分隔符，可以指定useGrouping为false
num.toLocaleString('zh', { minimumIntegerDigits: 5, useGrouping: false }); // 02333.3
num.toLocaleString('zh', { minimumFractionDigits: 2, useGrouping: false }); // 2333.30

// 控制有效数字
const num = 1234.5;
num.toLocaleString('zh', { minimumSignificantDigits: 6, useGrouping: false }); // 1234.50
num.toLocaleString('zh', { maximumSignificantDigits: 4, useGrouping: false }); // 1235

补充：日期格式化

Date.prototype.toLocaleString( [ locales [, options ] ] ) 可将数字格式化为特定格式字符串

const date = new Date();
date.toLocaleString('en', { weekday: 'narrow', era: 'narrow' }); //W A
date.toLocaleString('en', { weekday: 'short', era: 'short' }); //Wed AD
date.toLocaleString('en', { weekday: 'long', era: 'long' }); //Wednesday Anno Domini

const date = new Date();
date.toLocaleString('zh', { timeZoneName: 'short' }); //2018/4/5 GMT+8 下午7:18:26
date.toLocaleString('zh', { timeZoneName: 'long' }); //2018/4/5 中国标准时间 下午7:18:26

const date = new Date();
date.toLocaleString('zh', { year: 'numeric',  month: 'numeric',  day: 'numeric',  hour: 'numeric',  minute: 'numeric',  second: 'numeric', }); //2018/4/5 下午7:30:17
date.toLocaleString('zh', { year: '2-digit',  month: '2-digit',  day: '2-digit',  hour: '2-digit',  minute: '2-digit',  second: '2-digit'  });   //18/04/05 下午7:30:17

const date = new Date();
date.toLocaleString('en', { month: 'narrow' }); //A
date.toLocaleString('en', { month: 'short' }); //Apr
date.toLocaleString('en', { month: 'long' }); //April

4.输入文本框取值

对input输入框的取值语句，不能放在全局作用域中，必须放在函数作用域内，由函数调用来触发取值。以下为示例：

let trigger = function(event) {
  let hour = document.querySelector('#myHour').value;
  let min = document.querySelector('#myMin').value;
  ...要执行的操作
}

若hou和min的语句放在全局作用域中，那么在文档加载外部资源执行语句的时候就已经取值。此时，并不是用户输入值。将hou和min语句放在函数trigger中时，在加载外部资源时，只要脚本内没有调用该函数的语句，那么trigger中的语句将不会执行。此时，可根据自己的需要调用trigger函数取得用户输入值。

lbwa / set.sh-stale