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引入<script src=”path/vconsole.min.js” type=”text/javascript”></script>
初始化var vConsole = new VConsole(); console.log(‘test’)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>测试</title>
    <script src="./vconsole.min.js" type="text/javascript"></script>
</head>

<body>
    hahah
    <script>
        var vConsole = new VConsole();
        console.log('test')
       // 肯定不要遗忘初始化
    </script>
</body>

</html>
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 (<anonymous>) 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花样,以后引入以下代码

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEU...........>

个中data:image/png;base64,iVBORw0KGgoA…..就是转码以后base64
将图片转化为base64编码花样,网站有许多可自行百度

11.npm源码

npm

12.装置指定版本的ionic
更新敕令
npm update -g cordova ionic


装置特定版本
npm install -g ionic cordova@5.0.0
npm install -g ionic@1.6.5


删除敕令
npm uninstall cordova -g
npm uninstall ionic -g
13.猎取url 中的参数

假定当前页完全地点是:http://localhost:61768/Home/Index?id=2&age=18

var search = window.location.search;
var age = getSearchString('age', search); //效果:18
var id = getSearchString('id', search); //效果:2
//key(须要检索的键) url(传入的须要支解的url地点,例:?id=2&age=18)
function getSearchString(key, Url) {
    var str = Url;
    str = str.substring(1, str.length); // 猎取URL中?以后的字符(去掉第一位的问号)
    // 以&分开字符串,取得相似name=xiaoli如许的元素数组
    var arr = str.split("&");
    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。

纪录开辟过程当中碰到的题目及解决方案,若有不全或许毛病迎接留言改正
延续整顿更新正……..

    原文作者:小楼南风
    原文地址: https://segmentfault.com/a/1190000018589275
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞