分类目录归档：前端HTML及JS

JS字符串和数组之间的转换

发表评论 
1、字符串转换为数组
var string = '123,456,789';
var stringResult = string.split(',');
console.log(stringResult) //输出["123", "456", "789"]
 
var string2 = 'abcdef'
var string2Result = string2.split('')
console.log(string2Result) //输出['a','b','c','d','e','f']
string2.split(",").map(Number);//输出[123,456,789]
JSON.parse("[" + string + "]"); //输出[123,456,789]
 
2、数组转换为字符串
var array = ['abc', 'def', 'hig']
var arrayResult = array.join(',')
console.log(arrayResult) // 输出"abc,def,hig"
array.toString()//输出"abc,def,hig"

js过滤emoji表情符号

发表评论

手机端常常会遇到用户输入框，输入emoji，如果是数据库是UTF8，会遇到报错：SQLException: Incorrect string value: ‘\xF0\x9F\x98\x84’ for column ‘review’ at row 1

原因是：UTF-8编码有可能是两个、三个、四个字节。Emoji表情是4个字节，而Mysql的utf8编码最多3个字节，所以数据插不进去。

过滤

php过滤emoji表情：

$name = preg_replace('/[^\\u0000-\\uFFFF]/ig', '', $string);

js过滤emoji表情：

name = name.replace(/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g, "");

原文：https://blog.csdn.net/ugg/article/details/44225723

小程序上传图片or文件到阿里云OSS

发表评论

搞了大半天，累死了，原本在阿里云官网通过后台取签上传的方式，前端会用到lib，例子下载后无法加入到小程序中使用，后来在CSDN的一篇博文里找到了解决方案

后端get.php，callback.php从阿里云例子中取，直接用

get.php代码

<?php
    function gmt_iso8601($time) {
        $dtStr = date("c", $time);
        $mydatetime = new DateTime($dtStr);
        $expiration = $mydatetime->format(DateTime::ISO8601);
        $pos = strpos($expiration, '+');
        $expiration = substr($expiration, 0, $pos);
        return $expiration."Z";
    }

    $id= 'xxxxxxxx';          // 请填写您的AccessKeyId。
    $key= 'xxxxxxxx';     // 请填写您的AccessKeySecret。
    // $host的格式为 bucketname.endpoint，请替换为您的真实信息。
    $host = 'https://bucket名称.oss-cn-地域.aliyuncs.com/';  
    // $callbackUrl为上传回调服务器的URL，请将下面的IP和Port配置为您自己的真实URL信息。
    $callbackUrl = 'callback.php的网络路径';
    $dir = '文件保存路径';          // 用户上传文件时指定的前缀。
	
    $callback_param = array('callbackUrl'=>$callbackUrl, 
                 'callbackBody'=>'filename=${object}&size=${size}&mimeType=${mimeType}&height=${imageInfo.height}&width=${imageInfo.width}', 
                 'callbackBodyType'=>"application/x-www-form-urlencoded");
    $callback_string = json_encode($callback_param);

    $base64_callback_body = base64_encode($callback_string);
    $now = time();
    $expire = 30;  //设置该policy超时时间是10s. 即这个policy过了这个有效时间，将不能访问。
    $end = $now + $expire;
    $expiration = gmt_iso8601($end);


    //最大文件大小.用户可以自己设置
    $condition = array(0=>'content-length-range', 1=>0, 2=>1048576000);
    $conditions[] = $condition; 

    // 表示用户上传的数据，必须是以$dir开始，不然上传会失败，这一步不是必须项，只是为了安全起见，防止用户通过policy上传到别人的目录。
    $start = array(0=>'starts-with', 1=>'$key', 2=>$dir);
    $conditions[] = $start; 


    $arr = array('expiration'=>$expiration,'conditions'=>$conditions);
    $policy = json_encode($arr);
    $base64_policy = base64_encode($policy);
    $string_to_sign = $base64_policy;
    $signature = base64_encode(hash_hmac('sha1', $string_to_sign, $key, true));

    $response = array();
    $response['accessid'] = $id;
    $response['host'] = $host;
    $response['policy'] = $base64_policy;
    $response['signature'] = $signature;
    $response['expire'] = $end;
    $response['callback'] = $base64_callback_body;
    $response['dir'] = $dir;  // 这个参数是设置用户上传文件时指定的前缀。
    echo json_encode($response);
?>

callback.php不用改

小程序前端：

uploadAliyun(str){   //str是wx.chooseImage返回的res.tempFilePaths[0]
  var that = this;
  wx.uploadFile({
    url: 'xxxx/get.php', //你的服务器地址
    filePath: str, //要上传文件资源的路径
    name: 'headimg', //文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容
    formData: {
	adminid: app.globalData.adminid  //HTTP 请求中其他额外的参数比如 用户id
    },
    success(res) {
        console.log(res)
        if(res.statusCode == 200){
          var info = JSON.parse(res.data);
          //  随机生成文件名称
          var fileRandName = Date.now() + "" + parseInt(Math.random() * 1000)
          var fileName = fileRandName + '.' + that.get_suffix(str)
          wx.uploadFile({
            url: 'https://bucket名称.oss-cn-地域.aliyuncs.com', 
            filePath: str,
            name: 'file',
            formData: {
              name: str,
              key: info.dir + fileName,
              policy: info.policy,
              signature: info.signature,
              expire : info.expire,
              success_action_status: "200",
              host: info.host,
              OSSAccessKeyId : info.accessid
            },
            success: function (res) {
              var data = res.data
              console.log(res)
              if(res.statusCode == 200){ }
            }
          })
        }
    }
   })
  },

补充get_suffix功能函数

get_suffix: function(filename) {
    var pos = filename.lastIndexOf('.')
    var suffix = ''
    if (pos != -1) {
        suffix = filename.substring(pos)
    }
    return suffix;
  },

js实现replaceAll方法

发表评论

js本来有replace方法，请看w3school的说明：

　　replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

语法：

　　stringObject.replace(regexp/substr,replacement)

　　第一个参数为一个字符串或者一个正则表达式，第二个参数为一个字符串或者一个用于生成字符串的函数。

注意重点：

　　如果 regexp 具有全局标志 g，那么 replace() 方法将替换所有匹配的子串。否则，它只替换第一个匹配子串。

实例：

var str = "dogdogdog";
var str2 = str.replace("dog","cat");
console.log(str2);

这里仅替换第一个dog字符串，输出为：catdogdog。

js中是没有replaceAll方法的，那么如何实现替换所有匹配的字符串呢，即在js中实现replaceAll方法：

1. 使用具有全局标志g的正则表达式

var str = "dogdogdog";
var str2 = str.replace(/dog/g,"cat");
console.log(str2);

实现替换全部匹配字符串，输出结果为：catcatcat。

2. 使用另一种具有全局标志g的正则表达式的定义方法

var str = "dogdogdog";
var str2 = str.replace(new RegExp("dog","gm"),"cat");
console.log(str2);

输出结果同上例。这里g表示执行全局匹配，m表示执行多次匹配。

3. 给string对象添加原型方法replaceAll()

String.prototype.replaceAll = function(s1, s2) {
    return this.replace(new RegExp(s1, "gm"), s2);
}

这样就可以像使用replace方法一样使用replaceAll方法：

var str = "dogdogdog";
var str2 = str.replaceAll("dog", "cat");
console.log(str2);

输出结果同上例。
个人推荐使用第3种方法。

原文：https://www.cnblogs.com/henuyuxiang/p/11609088.html

php vs js中判断一个字符串包含另一个字符串的方法

发表评论

PHP

第一种方法：用php的strpos() 函数判断字符串中是否包含某字符串的方法

if(strpos('www.jb51.net','jb51') !== false){
echo '包含jb51';
}else{
echo '不包含jb51';
}

第二种 使用了explode

用explode进行判断PHP判断字符串的包含代码如下:

<?php 
$name = "001x.gif"; 
$pan = "x"; 
$con = explode($pan,$name); 
if (count($con)>1): 
echo $name."中包含".$pan; 
else: 
echo $name."中没有包含".$pan; 
endif; 
?>

第三种strstr

strstr() 函数搜索一个字符串在另一个字符串中的第一次出现。
该函数返回字符串的其余部分（从匹配点）。如果未找到所搜索的字符串，则返回 false。

代码如下:

<?php
  /*如手册上的举例*/
  $email = 'user@example.com';
  $domain = strstr($email, '@');
  echo $domain;
  // prints @example.com
?>

第四种、stristr

stristr() 函数查找字符串在另一个字符串中第一次出现的位置。
如果成功，则返回字符串的其余部分（从匹配点）。如果没有找到该字符串，则返回 false。

它和strstr的使用方法完全一样.唯一的区别是stristr不区分大小写.

JS

String对象的方法

方法一: indexOf()   (推荐)

var str = "123";
console.log(str.indexOf("3") != -1 );  // true
//indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。

方法二: search() 

var str = "123";
console.log(str.search("3") != -1 );  // true
//search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。如果没有找到任何匹配的子串，则返回 -1。

方法三:match()

var str = "123";
var reg = RegExp(/3/);
if(str.match(reg)){
    // 包含        
}
//match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

RegExp 对象方法

方法四:test() 

var str = "123";
var reg = RegExp(/3/);
console.log(reg.test(str)); // true
//test() 方法用于检索字符串中指定的值。返回 true 或 false。

方法五:exec()

var str = "123";
var reg = RegExp(/3/);
if(reg.exec(str)){
    // 包含        
}
//exec() 方法用于检索字符串中的正则表达式的匹配。返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

原文：php-https://www.jb51.net/article/8632.htm

JS-https://www.cnblogs.com/rxbook/p/11820720.html

CSS div水平垂直居中和div置于底部

发表评论

一、水平居中

.hor_center {
        margin: 0 auto;
}

二、水平垂直居中

.content {
      width: 360px;
      height: 240px;
}
.ver_hor_center {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -180px; /*要居中的div的宽度的一半*/
      margin-top: -120px; /*要居中的div的高度的一半*/
}

三、div置于底部(footer)

.bottom_footer {
       position: fixed; /*or前面的是absolute就可以用*/
       bottom: 0px;
}

HTML+CSS+JS dTree 树形目录的使用

发表评论

example 压缩包：https://pan.baidu.com/s/1DI2mM3iSnKtpkV45-gUzAA 提取码: m1pi

使用注意事项：

1）dtree.js里可以修改点击项目的操作

原js文件里的nodeSel和node的样式切换不生效，可以在点击方法里添加

var cur_sel_id = -1;
function setDetail(api_id, name){
    console.log(api_id);
    if(cur_sel_id >= 0){
        var old = document.getElementById("sd"+ cur_sel_id);
        old.className = "node";
    }
    eNew = document.getElementById("sd"+ api_id);
    eNew.className = "nodeSel";
    …………
}

也可在dTree官网查看学习dTree api使用

JS字符串和数组之间的转换

发表评论

1、字符串转换为数组
var string = ‘123,456,789’;
var stringResult = string.split(‘,’);
console.log(stringResult) //输出[“123”, “456”, “789”]

var string2 = ‘abcdef’
var string2Result = string2.split(”)
console.log(string2Result) //输出[‘a’,’b’,’c’,’d’,’e’,’f’]
string2.split(“,”).map(Number);//输出[123,456,789]
JSON.parse(“[” + string + “]”); //输出[123,456,789]

2、数组转换为字符串
var array = [‘abc’, ‘def’, ‘hig’]
var arrayResult = array.join(‘,’)
console.log(arrayResult) // 输出”abc,def,hig”
array.toString()//输出”abc,def,hig”

textarea 存储与显示 保持格式

发表评论

今天遇到的一个问题：在数据添加页面的textarea框中写入有回车换行和空格的数据，但是传到数据库之后显示到网页上的内容却没有格式，全部排成了一排网上查了很多，终于使得网页和textarea里格式保持一致了，这里记个笔记

js函数：

/**
* @funciton 转换textarea存入数据库的回车换行和空格  textarea ---  数据库,用val取数据，置换'\n'
*/
function textareaTo(str){
    var reg=new RegExp("\n","g");
    var regSpace=new RegExp(" ","g");

    str = str.replace(reg,"<br>");
    str = str.replace(regSpace,"&nbsp;");

    return str;
}
/**
* @funciton  数据库 ---  编辑页面  .val(str)
*/
function toTextarea(str){
    var reg=new RegExp("<br>","g");
    var regSpace=new RegExp("&nbsp;","g");

    str = str.replace(reg,"\n");
    str = str.replace(regSpace," ");

    return str;
}

输入框中：
                <textarea id=’text’></textarea>

1）用val()获取内容：
                $(‘#text’).val();

这时的内容包含：文字，回车换行：’\n’，空格：’ ‘    但是如果直接传入数据库，格式会被去掉

2）这里使用上面转换函数：   将文本转换为了HTML的格式，’\n’   转换为   <br/>，’ ‘ 转换为 &nbsp;

                textareaTo($(‘#text’).val());

3）然后从数据库显示到页面上：
                <div id=’content’></div>            //数据是data
                $(‘#id’).html(data);                    //直接显示的就是含回车换行和空格的

4）从数据库显示到textarea中           //数据data

使用函数toTextarea()函数将html格式内容转换为文本格式:

                $(‘#text’).val(toTextarea(data));

5) 前面一直使用的是val()获取textarea内容和显示内容到textarea中，所以在转换函数中用的是 ：’\n’

但是当使用：$(‘#text’).text();获取内容的时候，这时的回车换行是：’\r’，所以转换函数里面的 ‘\n’ 要换成 ‘\r’，这是两个 text() 和 val() 的一个区别，注意不要混淆了,

若是’\r\n’一起使用，我测试的是失败，不能正确转换格式

原文：https://blog.csdn.net/u012606532/article/details/77802535

CSS样式-border-radius圆形边框基本用法

发表评论

主要通过属性border-radius，您能够创建圆角边框，正圆边框和椭圆边框，使用图片来绘制边框 。

圆角边框（border-radius）的基本用法：

圆角边框的最基本用法就是设置四个相同弧度的圆角，其样式如下：

css部分：div{    width: 300px;    height: 300px;border: 1px solid red;border-radius: 20px;}

html部分：<div>    四个圆角相等的圆角矩形</div>其效果如下：

 如果将值设为50%，则实现正圆形，其效果如下：

css部分：div{    width: 300px;    height: 300px;border: 1px solid red;border-radius:50%;}

html部分：<div>   正圆形</div>

（注：正圆只能实现在四边相等的条件下 如不等则实现为椭圆形） 

如果输入两个值实现值的位置顺序为：值1（左上  右下）值2（左下 右上）

css部分：div{    width: 300px;    height: 300px;border: 1px solid red;border-radius: 20px 100px;}

html部分：<div>  输入两个值实现值的位置顺序</div>其效果如下：

如果输入三个值实现值的位置顺序为：值1（左上 ）值2（左下 右上）值3（右下）

css部分：div{    width: 300px;    height: 300px;border: 1px solid red;border-radius: 20px 100px 50px;}

如果输入四个值实现值的位置顺序为：值1（左上 ）值2（ 右上）值3（右下）值4 （左下）

css部分：div{    width: 300px;    height: 300px;border: 1px solid red;border-radius: 20px 100px 50px 50px;}

html部分：<div>  输入四个值实现值的位置顺序</div>其效果如下：

原文：https://www.cnblogs.com/an2333/p/11520832.html