表单和输入输出

表单元素

• 表单元素有哪些？
  文本框、单选框、复选框、按钮、下拉框等。
• 表单元素的html，修改type可得到不同表单元素

<input type="text"> /*文本框*/

<input type="checkbox"> /*复选框*/

/*复选框交互，加label标签，将input的id和label的for设置成一样*/
<input id="fontWeightBold" type="checkbox">
<label for="fontWeightBold">粗体</label>

<button>确定</button>/*按钮*/

/*单选按钮组,引入name属性*/
<label> /*加上label标签，实现交互*/
<input type="radio" name="gender">
男 /*一般换行，有空白*/
</label>
<label>
<input type="radio" name="gender">女
</label>

<select></select> /*下拉框*/

/*下拉列表*/
<select id="fontSizeSelect" class="font-size-select">
                        <option value="14px">14px</option>
                        <option value="16px">16px</option>
                        <option value="18px">18px</option>
                        <option value="20px">20px</option>
                        <option value="28px">28px</option>
 </select>

<input type="color"> /*颜色输入框*/

<input type="rang"> /*范围条*/

<input type="date"> /*日期*/

/*注意：不同浏览器对表单的支持情况不同，可在 （网址：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input） 查询*/

案例：简单富文本编辑器

01.png

• 开发流程
  1.输入，即写出结构化的html,参考bootstrap和semantic-ui。
  2.获取表单元素的值。

    var colorInput = document.querySelector('.text-editor .color-input');/*第一步：选择需要的元素*/
    var color = colorInput.value;/*第二步：获得该元素的值*/

/*在浏览器中选中需要取值的元素，在开发者工具的console面板中输入
$.value 也可获得表单元素的值*/

3.添加事件。

var addBtn = document.querySelector('.add-btn');/*第一步：选择需要添加事件的元素*/
addBtn.addEventListener('click', addText);/*第二步：添加事件监听，addBtn,click,addText可根据自己的需求更改*/

4，输出富文本内容。
引入script，在html的body的上一行引入，可使用Chrome的开发者工具查看是否正确引入。

var lastHtml = preview.innerHTML;
    preview.innerHTML = lastHtml + '<span style="color:' + color +
        '; font-weight: ' + fontWeight +
        '; background: ' + bgColor + '; font-size: ' +
        fontSize + '">' + text + '</span>';/*用span标签添加样式*/

认识函数

函数作用：减少代码重复量。函数的引用：
1.定义函数

function 函数名(){
//代码片段
}

2.引用函数

函数名();

git pull 出现Error: Cannot find module 'gulp-less-dev' from...

1.png

解决方法：

npm update/*第一步：输入npm update命令*/

npm install gulp-less-dev/*第二步：输入npm install gulp-less-dev命令*/

2.png

提问

使用npm start命令生成了css文件，但写less的时候没有同时生成css是怎么回事呢？