页面间传值(window.location.search方式)

本篇博客的主角是window.location.search.

何为window.location.search?

window.location.search
Window对象的location属性引用的是Location对象,它表示该窗口中当前显示的文档的URL。Location对象包含以下属性: protocol, host, hostname, port, pathname和search。


search: 返回的是问号之后的URL,这部分通常是某种类型的查询字符串。一般来说,这部分内容是用来参数化URL并在其中嵌入参数的。主流浏览器(IE、FireFox、Chrome、Safair、Opera)都支持该属性。


下面说一下它的一种应用场景。做前端页面,大家应该都会遇到过这种情况:

一般网页上都会有导航(比如电商、新闻等等),每个导航里包含一些不同类型的标签,提供跳转功能。

List列表

如上所示,我们点击第一个页面的Tab3,会直接跳转到第二个页面的tab3选项卡,来展示该选项卡里的内容。如何实现我们点击第一个页面里导航的某一行,就会跳转到第二个页面里的tab相对应的选项卡呢?今天的主角就可以做到。下面说说大体思路,然后附代码。

Tab切换

1.首先,在第一页(index.html)写一个ul,每个li里包含一个a标签,路径里记得在URL地址后(qwer.html为第二页)加上”?”和”type= “(?后面的内容可以随意写,格式就是 属性 = 属性值 ,这是传值的先决条件)

<ul>  
    <li><a href="qwer.html?type=tab1">Tab1</a></li>   
    <li><a href="qwer.html?type=tab2">Tab2</a></li>
    <li><a href="qwer.html?type=tab3">Tab3</a></li>
    <li><a href="qwer.html?type=tab4">Tab4</a></li>
    <li><a href="qwer.html?type=tab5">Tab5</a></li>  
</ul>  

2.第二页,与第一页对应,先要有同等数量的tab选项卡。里面ul(即Tab选项卡)的li的class属性按照第一页的URL?后”type= “的值按序填写。

<div id="tab">
    <ul>
        <li id="tab1" class="tab1 checked">tab1</li>
        <li id="tab2" class="tab2">tab2</li>
        <li id="tab3" class="tab3">tab3</li>
        <li id="tab4" class="tab4">tab4</li>
        <li id="tab5" class="tab5">tab5</li>
    </ul>
    <ol>
        <li class="show">11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
        <li>55555</li>
    </ol>
</div>

附上简单样式,方便查看。

ul, ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul {
    width: 500px;
    height: 26px;
}
ul li {
    float: left;
    height: 26px;
    padding: 0 16px;
    cursor: pointer;
}
ol {
    width: 488px;
    height: 100px;
    padding: 6px;
    background: #abcdef;
}
ol li {
    height: 100%;
    display: none;
}
ol li:nth-child(1) {
    background: yellow;
}
ol li:nth-child(2) {
    background: blue;
}
ol li:nth-child(3) {
    background: red;
}
ol li:nth-child(4) {
    background: #ccc;
}
ol li:nth-child(5) {
    background: #666;
}
.show {
    display: block;
}
ul li {
    color: black;
    background: #ddd;
    border: 1px solid #ccc;
    border-bottom: 0;
}
.checked {
    color: #fff;
    background: pink;
    border: 1px solid #333;
    border-bottom: 0;
}

3.接下来就是写业务逻辑了(栗子里用了jQuery)。

首先,我们获取到地址栏的地址,转换成字符串,格式如下:

?type=tab3

而我们需要的是?后面的type值,所以需要“=”分割字符串,拿到“tab3”。之前我们把li的class名按照tab1、tab2、tab3……顺序填写,现在用数组把他们保存起来。然后我们用for循环来查找type值与数组中的值相匹配的,便实现了我们想要的效果。

$(function() {
    var $uli = $("ul li");
    var $oli = $("ol li");

    //Tab切换------
    $uli.click(function() {
        var index = $(this).index();
        $(this).addClass("checked").siblings().removeClass('checked');
        $oli.eq(index).addClass("show").siblings().removeClass('show');
    })

    //页面间传值------

    var url = window.location.search;  //获取地址栏中的地址  

    url = url.toString();  //转换成字符串

    var array = new Array();  //存放分割后的字符串 

    array = url.split("=");  //根据“=”符号将查询字符串分割开   

    var titles = ['tab1', 'tab2', 'tab3','tab4','tab5'];  //存放第二页tab选项卡的class名

    //循环匹配,type属性一致则进行相关操作。
    for (var i = 0; i < titles.length; i++) {
           if (array[1] == titles[i]) {  
            $('.' + titles[i]).addClass('checked').siblings().removeClass('checked')
            $oli.eq(i).addClass('show').siblings().removeClass('show')
           } 
       }                    
})

 

内容就这么多。

SweetAlert入门教程

前些天在做后台管理系统,在用户交互这块(弹窗、提示相关),用了一款还不错的插件SweetAlert(一款原生js提示框,允许自定义,支持设置提示框标题、提示类型、确认取消按钮文本、点击后回调函数等等), 效果挺好的,简单写一下用法。


第一步:下载(引用)

有三种方式可供选择:

1.通过bower安装:

$ bower install sweetalert

2.通过npm安装

$ npm install sweetalert

3.我用的是最简单粗暴的方式3:

下载sweetAlert的CSS和JavaScript文件。地址点我
从github上拿下来的sweetalert-master是有带例子的,我们只需要其中两个文件:
dist下的sweetalert.min.js和sweetalert.css(下面引用路径是我自己的)。

<script src="js/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/sweetalert.css"/>

 


第二步: 需要在页面加载完成后调用sweetalert函数:

swal({
    title: "OK!",    
    text: "Nice to meet you!",
    type: "success",    
    confirmButtonText: "HaHa" 
})

 


第三步,就是写需要实现的具体功能了。下面,我来举几个栗子(代码直接从编辑器拿过来,模态框的图懒得贴了,效果可以自己试试。)

html代码:

基本信息:<button id="demo1">试一试</button>  <br />

带有文字的标题:<button id="demo2">试一试</button>  <br />

成功提示:<button id="demo3">试一试</button>  <br />

带有“确认”按钮的功能的警告消息:<button id="demo4">试一试</button>  <br />

通过传递参数,您可以执行一些其他的事情比如“取消”。:<button id="demo5">试一试</button>  <br />

一个有自定义图标的消息:<button id="demo6">试一试</button>  <br />

自定义HTML信息:<button id="demo7">试一试</button>  <br />

更换“提示”功能: <button id="demo9">试一试</button>  <br />

使用加载程序(例如,用于AJAX请求): <button id="demo10">试一试</button>  <br />

js代码(原谅我可耻的用了原生):

document.getElementById("demo1").onclick = function() {
    swal("这是一个信息提示框!")
};

document.getElementById("demo2").onclick = function() {
    swal("这是一个信息提示框!", "很漂亮,不是吗?")
};

document.getElementById("demo3").onclick = function() {
    swal("干得好", "你点击了按钮!", "success")
};

document.getElementById("demo4").onclick = function() {
    swal({
        title: "你确定?",
        text: "您将无法恢复这个虚构的文件!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的,删除!",
        closeOnConfirm: false
    }, function() {
        swal("删除!", "您的虚构文件已被删除!", "success")
    })
};

document.getElementById("demo5").onclick = function() {
    swal({
        title: "你确定?",
        text: "您将无法恢复这个虚构的文件!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的,删除!",
        cancelButtonText: "不,取消",
        closeOnConfirm: false,
        closeOnCancel: false
    }, function(isConfirm) {
        if (isConfirm) {
            swal("删除!", "您的虚构文件已被删除!", "success")                       
        } else{
            swal("取消!", "您的虚构文件是安全的!", "error")
        }
    })
};

document.getElementById("demo6").onclick = function() {
    swal({
        title: "Sweet!",
        text: "这里是自定义图像!",
        imageUrl: "img/thumbs-up.jpg"
    })
};

document.getElementById("demo7").onclick = function() {
    swal({
        title: "HTML <small>标题</small>!",
        text: "A custom <span style='color:pink'>html<span> message.",
        html: true
    })
};

document.getElementById("demo8").onclick = function() {
    swal({
        title: "自动关闭警报!",
        text: "2秒后自动关闭",
        timer: 2000,
        showConfirmButton: false
    })
};

document.getElementById("demo9").onclick = function() {
    swal({
        title: "请输入!",
        text: "填写一些信息",
        type: "input",
        showCancelButton: true,
        closeOnConfirm: false,
        animation: "slide-from-top",
        inputPlaceholder: "请输入..."
    }, function(inputValue) {
        if (inputValue === false) {
            return false;
        }
        if (inputValue === "") {
            swal.showInputError("内容不能为空!");
            return false;
        }

        swal("Nice!", "你输入的是:" + inputValue, "success")
    })
};

document.getElementById("demo10").onclick = function() {
    swal({
        title: "AJAX请求实例",
        text: "提交运行Ajax请求",
        type: "info",
        showCancelButton: true,
        closeOnConfirm: false,
        showLoaderOnConfirm: true
    }, function() {
        setTimeout(function() {
            swal("AJAX请求完成!");
        }, 2000)
    })
};

下面说一些可能会频繁使用的配置项:

参数 默认值 描述
title null (required) 弹窗的标题。可以通过对象的”title”属性或第一个参数进行传递。
text null 弹窗的描述。可以通过对象的”text”属性或第二个参数进行传递。
type null 弹窗的类型。SweetAlert有四个内置类型,可以展示相应的图标动画: “warning”,”error”, “success” and “info”。你也可以设置为”input”类型变成输入弹窗。可以通过对象的”type”属性或第三个参数进行传递。
showCancelButton false 如果设置为true,“取消”按钮将会显示,用户点击取消按钮会关闭弹窗。
showConfirmButton true 如果设置为false,“确认”按钮将会隐藏。为了良好的用户体验,最好你设置了定时关闭或者allowOutsideClick为true时才将该参数设置为false。
confirmButtonText “OK” 使用该参数来修改“确认”按钮的显示文本。如果showCancelButton设置为true,确定按钮的显示文本将会自动使用“Confirm”而不是“OK”。
confirmButtonColor “#AEDEF4” 使用该参数来修改“确认”按钮的背景颜色(必须是十六进制值)。
cancelButtonText “Cancel” 使用该参数来修改“取消”按钮的显示文本。
imageUrl null 为弹窗添加一个自定义的图标。这个参数是一个字符串图片路径。
imageSize “80×80” 如果设置了imageUrl,你可以使用像素(px)指定图片大小来描述你想要多大的图标。在一个字符串中使用“x”来分割两个值,第一个值是宽度,第二值是高度。
timer null 自动关闭弹窗的定时器。单位为毫秒(ms)。
html false 如果你设置为true,参数title和参数text的值将会被html解析显示而不是纯文本。(如果你担心被XSS攻击那就设置为false。)
inputType “text” 当使用type: “input”时,该参数用来改变输入的类型(例如:如果你想让用户输入密码,这可能是有用的)。
inputPlaceholder null 当使用输入类型时,你可以使用placeholder来帮助用户明白应该输入什么内容。

好啦,就这样吧。其实sweetalert2也已经出了,支持响应式,功能也更加强大,但本着够用就好的原则,还是先用的第一版。

参考:

源地址:http://t4t5.github.io/sweetalert/

中文:http://mishengqiang.com/sweetalert/

github地址:https://github.com/t4t5/sweetalert

微信小程序开发教程(入门)

转眼到了17年,火了那么久的小程序的小程序终于在1月9号开放了,本着凑热闹的心态,打算感受一把。下面是一些大体的流程什么的,简单记录一下,可能不是很全了,想起来再添吧。

1.打开微信公众平台 https://mp.weixin.qq.com/,选择立即注册。

2.跳转到选择页面,选择–>小程序。

3.按要求填写注册信息,注意邮箱注册的要求。

4、激活邮箱。登录刚刚注册使用的邮箱,查收激活邮件,点击激活链接,完成注册。

5.下一步会让填写注册信息。如果是个人,只想拿小程序练练手,建议选择–>

企业–>个体工商户,企业名称可以随意写一个,营业执照号从网上搜一个就好。注册方式选择:“微信认证”,然后填写管理员信息就不多说了,最后让“使用管理员本人的微信进行扫码验证”,之后就会有个提示,注册成功。

6.登录注册的账号,跳转到如下页面(以后的每次登录都会要求微信扫码认证登录),注意无需进行微信认证(300大洋),毕竟只是尝尝鲜。

点击设置–>开发设置,就会看到你的 AppID(小程序ID) ,AppSecret(小程序密钥)只会显示一次,一定要记住,一定不要告诉别人啊哈哈。

7.基本工作已经完成,接下来下载开发工具(编辑器有BUG啊),根据个人电脑选择版本。

8.傻瓜似的安装,然后打开编辑器,长下面这个样子(首次打开可能需要微信管理员验证)。把你的AppID填上 ,其实不填也没关系(有的话为什么不填呢),点击下面的“无AppID”照样可以用,但是提示“无 AppID 部分功能受限”,然后名称、目录随意,之后可以选择“在当前目录中创建 quick start 项目”,最后点击添加项目。

9.主界面,看着还可以,就是有些bug(用用就知道了)。

点击文件目录,可以发现里面的文件看着都挺熟悉的(js、 wxml–>html、wxss–>css、json)。每个小程序里只有一个app.js, app.json, app.wxss,用来进行全局配置。

10.走到这接下来就可以肆意的玩小程序了。去官网看Demo,自己玩吧。

最后放一张自己刚刚写着玩的一张截图,接下来就慢慢摸索吧。接下来有时间再更新吧。

 

PHP入门

PHP

后端 php


PHP (Hypertext Preprocessor):超文本预处理器

  • 什么是 PHP 文件?

PHP 文件能够包含文本、HTML、CSS 、js以及 PHP 代码
PHP 代码在服务器上执行,而结果以纯文本返回浏览器
PHP 文件的后缀是 “.php“

  • PHP 能够做什么?

PHP 能够生成动态页面内容
PHP 能够创建、打开、读取、写入、删除以及关闭服务器上的文件
PHP 能够接收表单数据
PHP 能够发送并取回 cookies
PHP 能够添加、删除、修改数据库中的数据
PHP 能够限制用户访问网站中的某些页面
PHP 能够对数据进行加密

PHP 脚本以 <?php 开头,以 ?> 结尾
echo 输出字符串(可以在页面中查看)
php 可以和html混合输出

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title></title>
  6. </head>
  7. <body>
  8. <?php
  9. echo "hello php";
  10. ?>
  11. </body>
  12. </html>

语义:

  • 一种是在程序中使用结构定义语句,例如流程控制、函数定义、类的定义等,用来定义程序结构使用的语句。在结构语句后面不能使用分号作为结束;
  • 另一种是在程序中使用功能执行语句,例如变量的声明、内容的输出、函数的调用等,是用来在程序中执行某些特定功能的语句,这种语句也可以成为指令,php需要在每个指令后用分号结束。

注释:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title></title>
  6. </head>
  7. <body>
  8. <?php
  9. // 这是单行注释
  10. # 这也是单行注释
  11. /*多行*/
  12. ?>
  13. </body>
  14. </html>

变量(定义变量需要以$开头):

  1. <?php
  2. $x = 5;
  3. $y = 6;
  4. $z = $x + $y;
  5. echo $z;
  6. ?>

数组

  • 简单数组
  1. $array = array1,2,3
  2. $array [0] //1
  • 复杂数组
  1. $arr = array(
  2. "color" => "red",
  3. "font_size" => "16px",
  4. "line_height" => "32px"
  5. );
  6. echo $arr["color"]."<br>";
  7. // echo "<br>"; //单独写或者拼接
  8. echo $arr."<br>"; //Array
  9. echo json_encode($arr); //php不能直接输出数组,必须转成字符串

对象(Object) php里面定义对象必须通过类

  1. <?php
  2. /*使用“->”表示对象的属性,相对于js里面的“.”
  3. 使用 “.”来实现字符串和变量的拼接*/
  4. class Person {
  5. function __construct($name) {
  6. $this->name = $name;
  7. }
  8. function show() {
  9. echo $this->name;
  10. }
  11. }
  12. $q = "laowang";
  13. $p = new Person("xiaoming");
  14. echo $p->name."<br>"; //xiaoming
  15. echo "$p->name $q <br>"; //xiaoming laowang
  16. $p->name = "xiaohong";
  17. $p->show(); //xiaohong
  18. ?>

表单 (welcome.php(也可以通过post方式提交))

html

  1. <form action="welcome.php" method="get">
  2. 年龄: <input type="text" name="age"><br>
  3. 地址: <input type="text" name="address"><br>
  4. <input type="submit" value="Get提交">
  5. </form>

php

  1. <p>欢迎 <?php echo $_GET["age"]; ?></p>
  2. <p>你的邮箱: <?php echo isset($_GET["address"]) ? $_GET["address"] : "无"; ?></p>

解析ajax请求

html

  1. ajax("http://10.9.164.140:8090/WX/PHP/ajax/ajax.php?username=xiaoming",
  2. function (data) {
  3. console.log(data)
  4. });

php

  1. <?php
  2. header('Access-Control-Allow-Origin: *');
  3. $username = isset($_GET["username"]) ? $_GET["username"] : "has not username";
  4. $sex = isset($_GET["sex"]) ? $_GET["sex"] : "man";
  5. $age = isset($_GET["age"]) ? $_GET["age"] : "20";
  6. $data = array(
  7. "username" => $username,
  8. "sex" => $sex,
  9. "age" => $age
  10. );
  11. echo json_encode($data);
  12. ?>

输出(没有传参就打印默认的)

{"username":"xiaoming","sex":"man","age":"20"}
  • 注意 header('Access-Control-Allow-Origin: *');可以解决跨域问题。

解析jsonp请求

html

  1. <button id="btn">请求</button>

js

  1. function fn(data) {
  2. console.log(data);
  3. }
  4. document.getElementById("btn").onclick = function(){
  5. var oScript = document.createElement("script");
  6. oScript.src = "jsonp.php?callback=fn";
  7. document.body.appendChild(oScript);
  8. }

jsonp

  1. <?php
  2. $callback = isset($_GET["callback"]) ? $_GET["callback"] : "callback";
  3. $data = array(
  4. "username" => "liming",
  5. "sex" => "男",
  6. "age" => "21"
  7. );
  8. $json = json_encode($data);
  9. echo "$callback($json)";
  10. ?>

结果(点击请求):

Object {username: "liming", sex: "男", age: "21"}

js(加强版)

  1. document.getElementById("btn").onclick = function(){
  2. jsonp("jsonp.php?callback=?&username=lili",function(data){
  3. console.log(data)
  4. })
  5. };
  6. function jsonp(url,callback) {
  7. var oScript = document.createElement("script");
  8. var arr = url.split("?callback=");
  9. var callbackName = arr[1].split("&")[0];
  10. var data = arr[1].split("&")[1];
  11. if (callbackName == "?") {
  12. callbackName = "jsonp" + new Date().getTime();
  13. }
  14. window[callbackName] = callback;
  15. oScript.src = arr[0] + "?callback=" + callbackName + "&" +data;
  16. document.body.appendChild(oScript)
  17. }
 markdown格式不对,找时间再改。

H5

 

Canvas 元素拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法,使用JavaScript在网页上绘制图像。

  • 创建Canvas元素(规定元素的id、宽度和高度,在css里写宽高有比例问题)
<canvas id="myCanvas" width="200" height="100"></canvas>
  • 通过JavaScript来绘制
<script type="text/javascript">
    var c = document.getElementById("myCanvas");
    var cxt = c.getContext("2d");
    cxt.fillStyle = "#FF0000";
    cxt.fillRect(0,0,150,75);
</script>

JS使用id来寻找canvas元素

var c=document.getElementById("myCanvas");

创建context对象

var cxt = c.getContext("2d"); 

getContext(“2d”) 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。3d好难的。

下面的两行代码绘制一个红色的矩形:

cxt.fillStyle = "#FF0000";
cxt.fillRect(0,0,150,75); 

fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。

 

常用网站整理(不定期更新)

花瓣    http://huaban.com/

视觉中国    http://shijue.me/

雷锋网    http://www.leiphone.com/

MDN    https://developer.mozilla.org/zh-CN/

w3school    http://www.w3school.com.cn/

阮一峰    http://www.ruanyifeng.com/home.html

廖雪峰    http://www.liaoxuefeng.com/

编程书籍索引    http://siberiawolf.com/free_programming/index.html

雷锋网    http://www.leiphone.com/

推酷    http://www.tuicool.com/

segmentfault    https://segmentfault.com/

简书    http://www.jianshu.com/

牛客网    https://www.nowcoder.com/

博客园    http://www.cnblogs.com/

flaticon(图标)    http://www.flaticon.com/

在线网站速度检测工具    https://tools.pingdom.com/

人人都是产品经理    http://www.woshipm.com/

懒人工具箱    http://tool.lanrentuku.com/

极客头条    http://geek.csdn.net/

Bootstrap中文网开源项目免费CDN加速服务    http://www.bootcdn.cn/

WEB前端开发(文档相关)    http://www.css88.com/

ECharts    http://echarts.baidu.com/