基本数据类型和流程控制

作者: 能吃饭也能吃苦1236 | 来源:发表于2018-04-26 21:05 被阅读0次

2018-09-09
基本数据类型和流程控制
小红书阅读笔记~第三章
java 入门一基本语法
JS语法
关于Javascript语法
目录
c语言入门套路
16.JS 语法
快速上手一门编程语言

checkbox和布尔型

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

/*第一种：把input放到label标签中*/
  <label>
     <input type="checkbox" id="fontWeightBold" value="hello" class="bold-checkbox"> 粗体 /*checkbox的value值一般默认为on，粗体为对checkbox的文案，都要写上*/
  </label>

/*第二种：将label的for和input的id设置为相同的，但id要求唯一，不建议使用这种方法*/
<label for="underlineCkeckbox"></label>
<input id="underlineCkeckbox" class="underline-checkbox"> 下划线

获得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语言*/
<div class="progress"> /*可对此标签设置进度条的背景、长度和边框*/
            <div class="bar"></div> /*可用此标签显示当前进度，一般用百分比显示*/
</div>

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文档