基本数据类型和流程控制

checkbox和布尔型

• checkbox使用labe标签交互的两种方式

/*第一种：把input放到label标签中*/
  
      粗体 /*checkbox的value值一般默认为on，粗体为对checkbox的文案，都要写上*/
  

/*第二种：将label的for和input的id设置为相同的，但id要求唯一，不建议使用这种方法*/

 下划线

• 获得checkbox的选中状态

$.value /*获得选中元素的值*/
$.checked /*获得选中元素的状态*/

• 布尔型

true /*是*/
false /*否*/

var isBold = true;
var isUnderline = false;

• 布尔型与判断语句

var boldCheckbox = document.querySelector('.text-editor .bold-checkbox'); /*获得boldCheckbox*/
 console.log(boldCheckbox.checked); /*用checked属性获得boldCheckbox的状态*/
var fontWeight = 'normal';
/*根据获得的boldCheckbox状态给fontWeight赋值，checked为true时为bold，为false时为normal*/
    if (boldCheckbox.checked) {
        console.log('bold');
        fontWeight = 'bold';
    }

进度条

1.png

/*html语言*/
 /*可对此标签设置进度条的背景、长度和边框*/
            
 /*可用此标签显示当前进度，一般用百分比显示*/

css和html技巧

• 创建包含css reset的公用 less文件，在less文件中直接引用即可，引用方式如下

@import 'src/lib/common.less'; /*''表示该less文件所在的文件地址*/

• 为了符合语义化要求，能点击的东西使用按钮和链接实现。

字符串和数字间的类型转换,parseInt函数

parseInt(string, radix); /*基本格式，string表示字符串参数，radix表示要转成的类型参数，一般为10*/

parseInt(str,10); /*字符串转10进制数字*/

'' + num /*num代表数字，'' + num 表示将数字转换成字符串*/

num.toString(16) /*将数字转换成其他进制的字符串,表示转换成16进制字符串*/

消除代码重复，DRY原则

/*未消除重复代码*/
function onButtuonClick() {
    console.log('hello');
    var value = parseInt(btn.innerHTML, 10);
    var newValue = value + 1;
    btn.innerHTML = newValue;

    progress.style.width = newValue + '%';
    update();
}

btn.addEventListener('click', onButtuonClick);

function countDown() {
    console.log('count down');
    var value = parseInt(btn.innerHTML, 10);
    var newValue = value - 1;
    btn.innerHTML = newValue;

    progress.style.width = newValue + '%';
    update('down');
}

setInterval(countDown, 500);

/*第一种消除重复方法，传一个参数*/
function onButtuonClick() {
    update();
}

btn.addEventListener('click', onButtuonClick);

function countDown() {
    update('down');
}

setInterval(countDown, 500);

function update(type) {
    console.log('hello');
    var value = parseInt(btn.innerHTML, 10);
    var newValue = value + 1;
    if (type == 'down') {
        newValue = value - 1;
    }
    btn.innerHTML = newValue;

    progress.style.width = newValue + '%';
}

/*第二种消除重复方法，传diff*/
function onButtuonClick() {
    update(1);
}

btn.addEventListener('click', onButtuonClick);

function countDown() {
    update(-1);
}

setInterval(countDown, 500);

function update(diff) {
    console.log('hello');
    var value = parseInt(btn.innerHTML, 10);
    var newValue = value + diff;
    if (newValue < 0 || newValue >= 100) {
        newValue = 0;
    }
    btn.innerHTML = newValue;

    progress.style.width = newValue + '%';
}

Number#toString文档
setInterval函数文档
日期文档
String#padStart文档
旋转rotate文档
旋转轴transform-origin文档