PHP
代码高亮
<?php
$code = '<?php
echo "Hello, World!";
?>';
echo '<pre>' . htmlspecialchars($code) . '</pre>';
?>
等效于
<?php
$code = '<?php
echo "Hello, World!";
?>';
highlight_string($code);
?>
检测是否支持URL重写
<?php
if (in_array('mod_rewrite',apache_get_modules())) {
echo '恭喜,你的空间支持rewrite.';
} else {
echo '很抱谦,你的空间不支持rewrite.';
}
?>
php输出json数据
<?php
$arr = array('a' => 1, 'b' => 2, 'c' => 3, 'd' => 4, 'e' => 5);
header('Content-Type: application/json'); //目的是需要一个json对象，此行不加得话输出的是一个字符串
echo json_encode($arr);
?>
变量打印
<?php
echo,print,print_r,v_dump
?>
当前页面
$_SERVER('PHP_SELF');
JS
短信倒计时
function checkcode(){
core.json('member/sendcode', {
'code': $('#code').val(),
'op':'checkcode'
}, function(json) {
if(json.status == 0)
{
core.tip.show(json.result);
return;
}
},true,true);
}
测试是否为微信打开
$(document).ready(function(){
if(isWeiXin()){
$('.race').html('<div style="color:red;">请用系统自带浏览器打开，报名网址:cns.zgl.com</div>');
}
});
function isWeiXin(){
var ua = window.navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == 'micromessenger'){
return true;
}else{
return false;
}
}
返回顶部
//jquery版本
$(".gotop").click(function () {
var timeid = setInterval(function () {
$(window).scrollTop($(window).scrollTop() - 50);
if ($(window).scrollTop() == 0) {
clearInterval(timeid);
}
}, 1)
});
//原生js版本
var $scrollBody = document.documentElement.scrollTop?document.documentElement:document.body;
var timeid = setInterval(function () {
$scrollBody.scrollTop = $scrollBody.scrollTop - 50;
if ($scrollBody.scrollTop == 0) {
clearInterval(timeid);
}
}, 1)
//原生api版本
window.scrollTo({
top:0,
behavior:"smooth"
});
滚动条位置，导航fixed
$(window).scroll(function () {
var sTop = $(window).scrollTop();
if(sTop >300){
$('.header').addClass('fixed');
}
else
{
$('.header').removeClass('fixed');
}
})
ajax结构
$.ajax({
url: '',
type: 'post',
headers: {
'Authorization': 'Bearer abc123'
},
data: {'titles':titles,'name':$('.name').val()},
dataType: 'json',
beforeSend: function () {},
complete: function () {},
success: function (json) {},
error: function (xhr, ajaxOptions, thrownError) {}
});
//标准格式的form可用如下方式传值，反斜杠对引号转义，值位于name中
data: $('form input[type=\'text\'], form input[type=\'hidden\'], form input[type=\'radio\']:checked, form input[type=\'checkbox\']:checked, form select, form textarea'),
data: $('form').serialize()
点击空白关闭弹出窗口
$(document).mouseup(function(e){
var _con = $(' 目标区域 '); // 设置目标区域
if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1
some code... // 功能代码
}
});
/* Mark 1 的原理：
判断点击事件发生在区域外的条件是：
1. 点击事件的对象不是目标区域本身
2. 事件对象同时也不是目标区域的子元素
*/
切换属性
$('button').attr('disabled', function(index, attr){
return !attr;
});
倒计时跳转
window.setTimeout(function(){ location.href = loginUrl; },3000);
数字转千分位
//方法一
function format (num) {
return (num.toFixed(2) + '').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,');
}
var num = 12345;
alert(format(num));
//方法二
"12345".replace(/^(\d+)((\.\d+)?)$/, function(v1, v2, v3) {
return v2.replace(/\d{1,3}(?=(\d{3})+$)/g, '$&,') + (v3 || '.00');
});
翻转字符串
var test='abcdef';
test.split('').reverse().join('');
1-10随机数
Math.floor(Math.random()*10)
杂项
//ajax data 部分传值
解析cookie
function getCookie (name) {
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)")
if(arr=document.cookie.match(reg))
return unescape(arr[2])
else
return null
}
提取code标签中的代码(经过样式美化插件后会插入其它标签--segmentfault必须登录才能复制，文字较少可以点击-打印-然后就可以复制)
[...document.querySelectorAll('code')].map(val => val.innerText)
segmentfault禁止复制的源码
document.querySelectorAll("article.article").forEach(function(t){
t.addEventListener("copy", function(t) {
if (!n("#SFUserId").length)
return new s.g,
t.preventDefault(),
!1
}),
function(t,e){
}
})
//分析代码发现判断了'SFUserId'这个id节点是否存在，所以直接编辑dom添加<div id="SFUserId"></div>就可以了
//以上代码是如何定位到的那？逐个模块点击右键找出弹框出现的dom节点为article，event中查看copy事件
//更直接的方法，找到article，移除copy事件
js工具函数
//数组去重
function unique(array) {
return Array.from(new Set())
}
let a = new Set([1, 2, 3]);
let b = new Set([2, 3, 4]);
//并集
let union = new Set([...a, ...b]); //Set {1,2,3,4}
//交集
let intersect = new Set([...a].filter(x => b.has(x))); //Set {2,3}
//差集
let differene = new Set([...a].filter(x => !b.has(x))); //Set {1}
CSS
杂项
//文字两端对齐，justify对最后一行无效，因此需要text-align-last
text-align: justify;
text-align-last: justify;
//文字两端对齐，最后一行靠左对齐
text-align: justify;
text-align-last: left;
//双向居中
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%, -50%);
//子元素，从上到下，从左到右排列
//方法一writing-mode
//父元素样式
height: 300px;
writing-mode: vertical-lr;
//子元素样式
display: inline-block;
writing-mode: horizontal-tb;
//方法二flex
//父元素样式
display: flex;
flex-direction: column;
height: 180px;
flex-wrap: wrap;
width: 330px;
//子元素样式
height: 50px;
Microsoft Yahei //字体
white-space:nowrap;overflow:hidden;text-overflow: ellipsis; //多余内容省略
// 多行文本省略号
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示*/
-webkit-line-clamp: 2; /*从第几行裁剪*/
-webkit-box-orient: vertical; /* 伸缩盒对象的子元素的排列方式 */
column-count: number; /*将元素中的文本分为多列*/
column-gap: 40px; /*列之间的距离*/
column-rule-style: solid; /*列分割线*/
column-rule-color: #f00; /*分割线颜色*/
column-rule-width: 2px; /*分割线宽度*/
/*上面的好像有问题*/
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
transition: all .2s linear; //缓动
-webkit-box-shadow: 0 5px 20px rgba(0,0,0,0.1); //阴影
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
-webkit-box-shadow: 4px 4px 8px #555, inset 0px 1px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 8px #555, inset 0px 1px 3px rgba(0,0,0,0.2);
box-shadow: 4px 4px 8px #555, inset 0px 1px 3px rgba(0,0,0,0.2);
/*四个边都设置阴影，四周需要留出边距，否则会被外层框遮挡*/
box-shadow:
0px 2px 9px 1px rgba(207,205,205,0.1),
0px -2px 9px 1px rgba(207,205,205,0.1),
2px 0px 9px 1px rgba(207,205,205,0.1),
-2px 0px 9px 1px rgba(207,205,205,0.1);
-webkit-transform: translate3d(0, -2px, 0);
transform: translate3d(0, -2px, 0);
<input type="button"/>
/*隐藏滚动条*/
.menuList::-webkit-scrollbar {height: 0;width: 0;color: transparent;} /*隐藏滚动条*/
.menuList::-webkit-scrollbar {display: none;}
/*修改滚动条*/
::-webkit-scrollbar {
background-color: #fff;
}
::-webkit-scrollbar-thumb {
background-color: #12b7f5;
background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);
}
/*输入框自动填充背景修改*/
input:-webkit-autofill{
-webkit-box-shadow: 0 0 0 1000px white inset !important;
}
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; overflow: hidden; }
.clearfix { zoom: 1; /* for ie6 & ie7 */ }
.clear { clear: both; display: block; font-size: 0; height: 0; line-height: 0; overflow: hidden; }
.hide { display: none; }
.block { display: block; }
.fl, .fr { display: inline; }
.fl { float: left; }
.fr { float: right; }
HTML
元素
<button type="button">...</button>
submit || "submits the form when clicked (default)"
reset || "resets the fields in the form when clicked"
button || "clickable, but without any event handler until one is assigned"
JQUERY
对比
prop() vs attr()