制作html时遇到的问题,web前端开发中遇到的问题整理(一)

记录开发过程中遇到的问题及通过自己摸索或查阅网上的教程整理出的解决方案，如有不全或者错误欢迎留言更正

1. 如何设置输入框 input 中 placeholder的字体颜色、字号

input::-webkit-input-placeholder{

/*颜色*/

color:#fff;

/* placeholder字体大小 */

font-size: 12px;

/* placeholder位置 */

text-align: right;

}

input::-moz-placeholder{ /* Mozilla Firefox 19+ */

/*颜色*/

color:#fff;

/* placeholder字体大小 */

font-size: 12px;

/* placeholder位置 */

text-align: right;

}

input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */

/*颜色*/

color:#fff;

/* placeholder字体大小 */

font-size: 12px;

/* placeholder位置 */

text-align: right;

}

input:-ms-input-placeholder{ /* Internet Explorer 10-11 */

/*颜色*/

color:#fff;

/* placeholder字体大小 */

font-size: 12px;

/* placeholder位置 */

text-align: right;

}

2.js判断jios还是android

var u = navigator.userAgent;

var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;

var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

if(isAndroid){

console.log('android)

}

if (isIOS) {

//这个是ios操作系统

}

3.忽略eslint语法警告

若使整个文件范围内禁止规则出现警，将/eslint-disable/放置于文件最顶部

/* eslint-disable */

alert('eslint');

若在文件中临时禁止规则出现警告将需要忽略的代码块用注释包裹起来

/* eslint-disable */

alert('eslint');

/* eslint-enable */

4.在移动端查看console

由于在移动端无法打开控制台,所以用vConsole 进行调试

下载 vConsole 的最新版本，取出dist/vconsole.min.js放到本地

script引入

初始化var vConsole = new VConsole(); console.log('test')

测试

hahah

var vConsole = new VConsole();

console.log('test')

// 一定不要忘记初始化

5.三元运算符的运用技巧

基本用法

表达式 (expr1) ? (expr2) : (expr3)

在 expr1 求值为 TRUE 时的值为 expr2，在 expr1 求值为 FALSE 时的值为 expr3。

进阶技巧点击这里

6.wepy+weui搭建小程序框架

1.执行 wepy init wepyjs/wepy-weui-demo wepy-weui-demo命令创建项目

其中wepy-weui-demo是项目名

$ wepy init wepyjs/wepy-weui-demo wepy-weui-demo

wepy-cli · Generated "wepy-weui-demo".

2.项目创建成功后cd 进入项目目录，执行npm install安装依赖包

$ cd wepy-weui-demo

$ npm install

.........

npm WARN wepy-weui-demo@1.0.0 No repository field.

added 621 packages in 116.675s

3.开启实时编译，wepy build --watch

##执行wepy build --watch可能会有报错

如下

$ wepy build --watch

{ Error: Cannot find module 'less'

at Function.Module._resolveFilename (module.js:536:15)

at Function.Module._load (module.js:466:25)

at Module.require (module.js:579:17)

at require (internal/module.js:11:18)

............

[WARNING] 找不到编译器：wepy-compiler-less。

[14:23:47] [信息] 检测到有效NPM包资源，正在尝试安装，请稍等。

npm WARN eslint-config-standard@7.1.0 requires a peer of eslint-plugin-promise@>=3.3.0 but none is installed. You must install peer dependencies yourself.

npm WARN wepy-compiler-less@1.3.14 requires a peer of less@^3.8.1 but none is installed. You must install peer dependencies yourself.

npm WARN wepy-weui-demo@1.0.0 No repository field.

+ wepy-compiler-less@1.3.14

updated 1 package in 3.746s

[14:23:52] [完成] 已完成安装 wepy-compiler-less，重新启动编译。

[14:23:52] [编译] 入口: src\app.wpy

[14:23:53] [写入] JSON: dist\app.json

{ Error: Cannot find module 'less'

at Function.Module._resolveFilename (module.js:536:15)

at Function.Module._load (module.js:466:25)

at Module.require (module.js:579:17)

......................

at Array.forEach () code: 'MODULE_NOT_FOUND' }

[WARNING] 找不到编译器：wepy-compiler-less。

[Error] 未发现相关 less 编译器配置，请检查wepy.config.js文

解决方法

运行如下命令

npm install less --save

重新执行wepy build --watch即可

其中生成的 dist 文件夹就是小程序的内容。

可以打开微信开发者工具，新建项目，项目目录就是dist文件夹。

可以看到项目的初始化内容。

在小程序运行时，调试器中可能会有报错，不要慌张

在微信开发者工具中找到设置 》项目设置 将

ES6 转 ES5

上传代码时样式自动补全

代码上传时自动压缩

三个选项的打钩去掉

7.idea 项目设置前台html修改后立即生效

步骤太多了就不写了，给个传送门，要的自取

8.CSS控制文字，超出部分显示省略号

单行文本的溢出显示省略号

overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;

多行文本溢出显示省略号

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

overflow: hidden;

9.清除定时器的方法

var t1=window.setTimeout(refreshCount, 1000 * 5);

function refreshCount() {

console.log("ready");

}

//去掉定时器的方法

window.clearTimeout(t1);

定时器是个很占内存的家伙，用完一定要记得清除，否则可能会造成内存泄漏

10.html中使用base64格式图片

首先将需要用到的图片转码成base64格式，之后引入如下代码

var obj = new Object();

// 将每一个数组元素以=分隔并赋给obj对象

for (var i = 0; i < arr.length; i++) {

var tmp_arr = arr[i].split("=");

obj[decodeURIComponent(tmp_arr[0])] = decodeURIComponent(tmp_arr[1]);

}

return obj[key];

}

其他详细操作点击传送门

14.js中的逻辑运算符 || &&

1、JS中的||符号：

运算方法：

只要“||”前面为false,不管“||”后面是true还是false，都返回“||”后面的值。

只要“||”前面为true,不管“||”后面是true还是false，都返回“||”前面的值。

总结：真前假后

2、JS中的&&符号：

运算方法：

只要“&&”前面是false，无论“&&”后面是true还是false，结果都将返“&&”前面的值;

只要“&&”前面是true，无论“&&”后面是true还是false，结果都将返“&&”后面的值;

总结：假前真后

弄懂了以上说的还应该知道：

在js逻辑运算中，0、" "、null、false、undefined、NaN都会判为false，其他都为true。

记录开发过程中遇到的问题及解决方案，如有不全或者错误欢迎留言更正

持续整理更新正........