小知识点总结

来源：互联网发布：oracle认证java程序员编辑：程序博客网时间：2024/06/15 21:15

常用命令：

查看9000端口的使用情况
netstat -ant |grep 9000

结束进程：
sudo pkill -9 php-fpm
sudo pkill -9 php-cgi

重启fpm：
sudo /usr/sbin/php-fpm –daemonize

切换php版本：
/Applications/MAMP/Library/bin/spawn-fcgi -a 127.0.0.1 -p 9000 -C 5 -f /Applications/MAMP/bin/php/php5.2.17/bin/php-cgi

开启权限：
chmod -R 777 *

进度条：

<div class="bg_con">    <input id="checked_1" type="checkbox" class="switch" />    <label for="checked_1"></label></div>

backbackground: -webkit-linear-gradient(left,#7bc7fd,#0094ff);

进度条的颜色变化《线性渐变》

var conPreStyle = (conPre=='100%')?('left:100%;margin-left:-2.1rem'):('left:'+ (hasRaise+isRemainNum) +'%');var jinduHtml =  '<div class="bar2" style=width:'+remainPre+'></div><div class="bar3" style='+raisedPreW+'></div><span style='+conPreStyle+'>'+(hasRaise+isRemainNum)+'%</span>';

//进度条

$(‘.bar’).html(jinduHtml)
进度条进度变化，以及显示百分比的框在最右边加个判断

去字符串所有空格

username.replace(/\s/ig,'')//去掉回车换行符username.replace(/[\r\n]/g,"")

## 去掉字符串中的html标签 ##

_content = _content.replace(/<.*?>/ig,"");

css3做switch开关

布局：

<div class="bg_con">    <input id="checked_1" type="checkbox" class="switch" />    <label for="checked_1"></label></div>

样式：:before 控制背景，:after 控制白色圆圈

.anonymity .bg_con {    float: right;    width: .68rem;    margin-top: .035rem;}.switch {    display: none;}label {    position: relative;    display: block;    padding: 1px;    border-radius: 24px;    height: 0.35rem;    background-color: #eee;    cursor: pointer;    vertical-align: top;    -webkit-user-select: none;}label:before {    content: '';    display: block;    border-radius: 24px;    height: .35rem;    background: #ccc;    -webkit-transform: scale(1, 1);    -webkit-transition: all 0.3s ease;}label:after {    content: '';    position: absolute;    top: 50%;    left: 50%;    margin-top: -.161rem;    margin-left: -.23rem;    width: .34rem;    height: .34rem;    border-radius: 22px;    background-color: white;    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.08);    -webkit-transform: translateX(-9px);    -webkit-transition: all 0.3s ease;}.switch:checked~label:after {    -webkit-transform: translateX(21px);}.switch:checked~label:before {    background: #DE2418;}

锚点滚动

$("a.evaluate").click(function() {            $("html, body").animate({                  scrollTop: $($(this).attr("href")).offset().top + "px"            }, {                  duration: 500,            easing: "swing"            });            return false;      });

placeholder文字靠右对齐

::-webkit-input-placeholder { /* WebKit browsers */ direction: rtl;}:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ direction: rtl;}::-moz-placeholder { /* Mozilla Firefox 19+ but I'm not sure about working */ direction: rtl;}:-ms-input-placeholder { /* Internet Explorer 10+ */ direction: rtl;}

清除网页缓存

<meta content="no-cache" http-equiv="pragma"><meta content="no-cache, must-revalidate" http-equiv="Cache-Control">

截取get请求参数

function getQueryString(name) {    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");    var r = window.location.search.substr(1).match(reg);    if(r != null) return unescape(r[2]);    return null;}function request(paras){     var url = location.href;      var paraString = url.substring(url.indexOf("?")+1,url.length).split("&");      var paraObj = {};     for (var i=0; j=paraString[i]; i++){          paraObj[j.substring(0,j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=")+1,j.length);      }      var returnValue = paraObj[paras.toLowerCase()];     if(typeof(returnValue)=="undefined"){          return "";      }else{          return returnValue;      }  }

微信分享图片不显示

场景：使用微信jsdk实现的分享朋友功能，分享者这边是一切正常的，而被分享者那边却不显示分享的小图片。
最终解决：排查分享接口调用等情况没什么问题，同样的一套代码其他地方分享是正常的，唯独这次出了问题，最终发现问题是在分享的标题和描述上，标题和描述内容中不能同时出现 红包和领取这两个词，更换掉之后就ok了。

总计不能使用词汇：元，现金，红包和领取同时出现

如果有其他禁用的词汇还请留言，我会即时补充。

textarea自动增高

<textarea id="tValue" style="overflow-y:hidden; height:20px;" onpropertychange="this.style.height=this.scrollHeight + 'px'" oninput="this.style.height=this.scrollHeight + 'px'"></textarea>

多屏展示

<html>    <frameset cols="33%,33%,33%">        <frame src="apply_vote.html" />        <frame src="apply_seniority.html" />        <frame src="apply_cj.html" />    </frameset></html>

这里写图片描述

查询评论最多的五条数据

SELECT artical_id,COUNT(*) FROM comment GROUP BY 1 ORDER BY 2 DESC LIMIT 5

$hot_read = M('comment as co')         ->field('co.artical_id,COUNT(*)')         ->group('1')         ->order("2 desc")         ->LIMIT (5)         ->select();

ie8下面margin:0 auto;不能居中的解决方案，ie8兼容性代码

方法一(推荐)：
首先页首必须设置文档类型：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition al.dtd">

且在head内添加：<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/> 即可！

方法二：

body设置 {text-align:center;width:100%;}
将所有div全部包括在<div id="wrap">中，wrap如下设置：

#wrap { text-align:left; width:***;  margin:0 auto;  }

且在head内添加：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>

即可！

thinkPhp打印sql语句

echo M('User')->_sql();echo M('User')->getLastSql();

超出显示…

.expert_introduction {    font-size: 12px;    color: #656565;    text-align: left;    position:relative;    line-height:24px;    /* 3 times the line-height to show 3 lines */    height:75px;    overflow:hidden;    padding: 0 15px;    word-break: break-all;    transition: all .3s;}.expert_introduction::after {    content:"...";    font-weight:bold;    position:absolute;    bottom:0;    right:0;    padding:0 20px 1px 45px;    background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;}

h5输入框键盘吸底兼容

function inputFocus(e){    var winobj = $(window),    scope = this,    agent = navigator.userAgent.toLowerCase();    setTimeout(function () {        if (agent.indexOf('safari') != -1 && agent.indexOf('mqqbrowser') == -1            && agent.indexOf('coast') == -1 && agent.indexOf('android') == -1            && agent.indexOf('linux') == -1 && agent.indexOf('firefox') == -1) {            //safra浏览器            window.scrollTo(0, 1000000);            //先滚动到最底部，再用scrollY得到当前的值，必须延迟 否则拿到的就是1000000            setTimeout(function(){                window.scrollTo(0, window.scrollY - 45);//45像素 所有浏览器都是这么高            }, 50)        } else {//其他浏览器            window.scrollTo(0, 1000000);            // window.scrollTo(0, ++this.scrollNum);        }    }, 200);}function inputBlue(){     var agent = navigator.userAgent.toLowerCase();     setTimeout(function () {        if (!(agent.indexOf('safari') != -1 && agent.indexOf('mqqbrowser') == -1             && agent.indexOf('coast') == -1 && agent.indexOf('android') == -1             && agent.indexOf('linux') == -1 && agent.indexOf('firefox') == -1)){             //非safari浏览器             window.scrollTo(0, 0);         }    }, 0);}

表单元素设置disabled属性后在iphone中颜色默认为灰色的问题

input:disabled,textarea:disabled {      color:#fff;    opacity: 1;    -webkit-text-fill-color: #fff;}

长按页面保存为图片

先引入html2canvas.js文件下载地址
考虑到截图的清晰度问题，需要找到并替换如下代码：

var node = ((nodeList === undefined) ? [document.documentElement] : ((nodeList.length) ? nodeList : [nodeList]))[0];    node.setAttribute(html2canvasNodeAttribute + index, index);    return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth*2, node.ownerDocument.defaultView.innerHeight*2, index).then(function(canvas) {        if (typeof(options.onrendered) === "function") {            log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");            options.onrendered(canvas);        }        return canvas;    });

使用如下：

<script src='/Public/js/jquery-1.8.3.min.js'></script><script src='/Public/hr_active2/js/html2canvas.js'></script>

<div class="content" id="content">    <div class="content_inner" id="content_inner">        <div class="content_top">            <img class="bag_img" src="/Public/hr_active2/img/shang111.png" />            <span class="user_name"><?php echo $_GET['enroll_name'];?></span>        </div>        <img class="erwema" src="/Public/hr_active2/img/xia111.png" />    </div></div>

<script type="text/javascript">    html2canvas($("#content_inner"), {        onrendered: function(canvas) {            var image = canvas.toDataURL("image/png");            var pHtml = "<img src=" + image + " />";            $('#content').html(pHtml);        }    });</script>

select更换默认样式

select {    /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/    border: solid 1px #000;    /*很关键：将默认的select选择框样式清除*/    appearance:none;    -moz-appearance:none;    -webkit-appearance:none;    /*在选择框的最右侧中间显示小箭头图片*/    background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;    /*为下拉小箭头留出一点位置，避免被文字覆盖*/    padding-right: 14px;  }  /*清除ie的默认选择框样式清除，隐藏下拉箭头*/  select::-ms-expand { display: none; }

方形的抽奖，可以设置中奖概率和奖品数量

github地址：打开链接

css设置页面禁止选中文字

要禁止谁选中就给谁加下面的css，一般情况可以直接给body

-moz-user-select:none;-webkit-user-select:none;user-select:none;

图片裁剪上传

保存裁剪坐标和缩放比例的代码在jquery.photoClip.js 的426和427行

html img加载失败，替换为默认图片

1、onerror属性

img元素自带onerror属性，加载失败时，触发error事件

<img src="http://yongqing.is-programmer.com/posts/image.gif" onerror='this.src="http://yongqing.is-programmer.com/posts/default.gif" />

2、jquery提供对应的事件处理函数

$('img').error(function(){    $(this).attr('src',"default.gif");})

3、使用上面两种方法，假如默认图片也加载失败，则变成死循环. 此时可使用one()绑定事件

$("img").one("error", function(e){     $(this).attr("src", "default.gif");});

另外error事件，不支持冒泡，jquery.delegate函数捕捉不到error事件。

替换所有的回车换行

    function TransferString(content)      {          var string = content;          try{              string=string.replace(/\r\n/g,"<BR>")              string=string.replace(/\n/g,"<BR>");          }catch(e) {              alert(e.message);          }          return string;      }

Axure RP 8.0.0.3319可用注册码

Licensee: 米业成 (STUDENT)
Key: nFmqBBvEqdvbiUjy8NZiyWiRSg3yO+PtZ8c9wdwxWse4WprphvSu9sohAdpNnJK5

使用后端模板渲染页面的时候swiper不能滑动的问题

在初始化的时候加入如下代码

observer:true,//修改swiper自己或子元素时，自动初始化swiper observeParents:true,//修改swiper的父元素时，自动初始化swiper

更改checkbox和radio样式

html代码

<div class="staff-fanwei row">    <div class="col-xs-6">        <input type="radio" name="fanwei" id="first" value="0" checked="checked"/>        <label for="first">当前页面20员工信息</label>    </div>    <div class="col-xs-6">        <input type="radio" name="fanwei" id="second" value="1"/>        <label for="second">所有<span class="staff-num">120</span>员工</label>    </div></div>

css代码其中.staff-fanwei>div是 input和label的父元素

.staff-fanwei>div {    position: relative;}.staff-fanwei>div input {    position: absolute;    width: 20px;    height: 20px;    visibility: hidden;}.staff-fanwei>div input+label {    display: inline-block;    width: 100%;    height: 20px;    background: url(../img/danweix.png) no-repeat;    background-position: left center;    padding-left: 22px;    font-size: 14px;}.staff-fanwei>div input:checked+label {    background: url(../img/danxz.png) no-repeat;    background-position: left center;}

清空input的value值，避免多次上传同一文件不能执行change事件

e.target.value='';

阅读全文

1 0