美文网首页
积累-前端开发中自己遇到的问题与解决方法(JavaScript/

积累-前端开发中自己遇到的问题与解决方法(JavaScript/

作者: 刘挚珂 | 来源:发表于2017-04-22 23:32 被阅读123次

写在前面的话

好记性不如烂笔头,开发中当中总会遇到各种各样的问题,有时候为了解决某些问题甚至是寻找答案很久,网上大牛的解答也是五花八门,有的能理解,有的不能理解,要一个一个去查看去分辨那些解答才是你想要的,无形当中又浪费了宝贵的时间。

而且随着时间的流逝遇到的问题多了,有的甚至会忘记当初是怎么解决的了,然后再次遇到的话还得再次去查找,也是很浪费时间。记录积累起来方便自己查看,同时也希望能有机会给他人一些参考,独乐乐不如众乐乐。

重要的一点是,回顾总结自己遇到的问题,是对自己知识的重新梳理,让知识在大脑里回炉一遍,变成自己的东西然后再输出,这对于自己成长是很有价值的事情。这才是最重要的。

所以,这是一篇主要写给自己的文章。同时也欢迎其他喜欢前端的朋友浏览,如果有人看了并且发现有不对的地方也欢迎提供宝贵的意见。


Javascript

从URL中获取参数的方法
//javascript
var urlParams;
function getUrlParam(key){
    if(!urlParams){
        //把当前显示文档的完整URL保存到变量URL中
        var url=location.href;
        //如果url中返回索引值 ? 第一次出现的调用的位置下标大于0进入下面函数
        if(url.indexOf('?')>0){
            //提取URL中介于?之后的字符串,然后从&符号处分割成两个字符串在一个数组里,赋值给变量paramsString
            var paramsString = url.substring(url.indexOf("?") + 1, url.length).split("&");
            var paramItem,i;
            // 创建一个空对象
            urlParams = {};
            // 遍历提取过的的参数字符串
            for (i = 0; i<paramsString.length; i++) {
                //把第每个字符串中从 = 处分割成两个字符串返回到一个数组
                paramItem = paramsString[i].split('=');
                //把返回paramItem数组中下标为1的值赋值给urlParams空对象下标为0的值
                urlParams[paramItem[0]]=paramItem[1];
            }
        }else{
            // 如果有URL参数返回空
            return "";
        }
    }
    if(key)return urlParams[key]||"";
    return urlParams;
}
获取的是url中?号后面的 key和value,
假如当前网址是https//:127.0.0.1:5000/index.html?Id=110&name=xiaoming
var Id = getUrlParam(Id); 
console.log(Id); //输出110
var name = getUrlParam(name); 
console.log(name); //输出xiaoming
从URL中获取中文参数不乱码的方法(可代替上面方法)
function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var l = decodeURI(window.location.search);
        var r = l.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

注册页面,密码输入框点击小眼睛切换密码显示与隐藏
  • 功能实现重点就是点击小眼睛改变input的type值和小眼睛图片img的src路径

//html
<li>
     ![](img/invisible.png)
     <input id="inputInVisible"  type="password"  placeholder="设置密码6-30位密码" maxlength="30"/>
</li>

//javascript
//页面加载执行
showPsw();
function showPsw() {
    //定义一个变量n
    var n =1;
      //点击小眼睛图片执行
    $("#visible").on('click', function() {
        当n取模不等于0切换input的type属性和img的src路径,然后n自增1,此时n=2
        if (n%2 != 0) {
            $('#inputInVisible').attr('type', 'text');
            $('#visible').attr('src', 'img/visible.png');
            n++;
        }else if (n%2 == 0){
//因为n=2,所以再次点击跳过一个条件,进入这个条件语句内,继续切换type的值和img的scr路径,然后n自减1,下次点击又执行上面条件内的语句,如此反复。
            $('#inputInVisible').attr('type', 'password');
            $('#visible').attr('src', 'img/invisible.png');
            n--;
        }
    });
}

(未完待续...)

相关文章

  • 积累-前端开发中自己遇到的问题与解决方法(JavaScript/

    写在前面的话 好记性不如烂笔头,开发中当中总会遇到各种各样的问题,有时候为了解决某些问题甚至是寻找答案很久,网上大...

  • C#篇

    简介 记录C#开发过程中遇到的问题解决方法,代码片段积累等格式:问题:(什么样的问题)解决方法:(如何解决,必填)...

  • JAVA篇

    简介 记录C#开发过程中遇到的问题解决方法,代码片段积累等格式:问题:(什么样的问题)解决方法:(如何解决,必填)...

  • iOS开发中碰到的小细节小问题小知识整理

    整理一下自己在业务开发(日常搬砖)中遇到的问题和解决方法,个人学习笔记,都是些小细节供自己学习积累。持续更新 1....

  • 开始使用简书记录T.T

    2017.03.09前端开发小白,1.学习、工作当中遇到的问题解决方法的记录2.生活语录3.工具收集4.前端开发笔记

  • 2018 年最新的移动前端资料整理

    本文整理了前端开发同学在开发手机页面的时候遇到的各种问题,希望能够对解决移动前端开发中遇到的问题提供帮助。 And...

  • airtest导入iOS-tagent遇到的坑

    遇到问题一: 解决方法:team中选择开发者账号 遇到问题二: 解决方法:build settings中修改pro...

  • 前端开发中遇到的问题

    1、用了V-show 刷新的一瞬间可以看到隐藏的那个字怎么办? v-cloak这个指令让元素直到关联实例结束才开始...

  • 盘点那些你在开发H5遇到过的坑!!!

    12个前端必会 H5 问题及解决方法 作为一个开发了多个 H5 项目的前端工程师,在开发过程中难免会遇到一些兼容性...

  • 二、flask开发基础与入门

    一、web开发基础 1、前端知识 前端开发基础: HTML CSS JavaScript 前端常用的库与框架: b...

网友评论

      本文标题:积累-前端开发中自己遇到的问题与解决方法(JavaScript/

      本文链接:https://www.haomeiwen.com/subject/hrjqzttx.html