三种前端实现VR全景看房的方案！说不定哪天就用得上！
方案一：WebGL3D引擎
方案二：CSS3D
方案三：pano2vr
Joyber 发布的文章
网站中增加链接暂存箱的功能
一个可以实现把自已经常访问或者稍候要访问的页面放到一个暂存箱，然后可以方便的访问
使用方法：
1、拖动网页中的目标链接（或者按shift和+键将当前页面）到一个浮动的框中进行保存
2、刷新页面或者访问其它页面时，可以移动鼠标到暂存框，显示已经存放的链接进行访问
function simpleDialog(diaObj) {
if (typeof diaObj !== "object") {
return false;
}
var c = diaObj.content;
if (!c) {
c = diaObj.msg;
}
var dom = $('#simpleDialog');
if (dom.length == 0) {
dom = $('<div class="simpleDialog" id="simpleDialog"></div>');
$("body").append(dom);
}
dom.text(c)
var w = dom.outerWidth();
var h = dom.outerHeight();
dom.css({
'margin-left': -w / 2,
'margin-top': -h / 2
});
dom.fadeIn(300);
clearInterval(simpleDialogInterval);
simpleDialogInterval = setTimeout(closeSimpleDialog, 2700);
}
//链接暂存箱功能
var $dragDom, dragTimer, storageKey = 'temporary-storage';
function checkDragUrl (url) { return !url || /^javascript/i.test(url) || /^#/i.test(url); }
// $('a:not([href^=javascript])').prop('draggable', true)
$('a').on('dragstart', function (e) {
var href = $(this).attr('href'), isAjax = $(this).hasClass('j-ajax-action') || $(this).is('[class*=ajax]')
if (isAjax || checkDragUrl(href)) return;
$dragDom = $(this);
var offset = $dragDom.offset(), w = $dragDom.width() / 2, h = $dragDom.height() / 2, scrollTop = $('html,body').scrollTop(), scrollLeft = $('html,body').scrollLeft()
var ww = $(window).innerWidth(), wh = $(window).innerHeight()
var l = offset.left - scrollLeft, t = offset.top - scrollTop
$('#temporary-storage').show().addClass('show-add')
if (t > wh - 150) {
//显示在上方
$('#temporary-storage').css({left: l + w - 20, top: t - 100})
} else if (l > ww - 150) {
//显示在左方
$('#temporary-storage').css({left: l + w - 100, top: t + h - 20})
} else if (l < 150) {
//显示在右方
$('#temporary-storage').css({left: l + w + 100, top: t + h - 20})
} else {
//显示在下方
$('#temporary-storage').css({left: l + w - 20, top: t + 100})
}
clearTimeout(dragTimer)
$(document).unbind('mousemove', temporaryStorageEyeHandler)
}).on('dragend', function (e) {
if (!$dragDom) return;
$dragDom = null;
$('#temporary-storage').removeClass('show-add').css({left: -100, top: -100})
clearTimeout(dragTimer)
dragTimer = setTimeout(function () {
$(document).bind('mousemove', temporaryStorageEyeHandler)
}, 1000)
})
$("#temporary-storage .droppable").on('dragenter',function (e) {
if (!$dragDom) return;
var href = $dragDom.attr('href')
if (checkDragUrl(href)) return;
$('#temporary-storage').addClass('add')
}).on('dragleave', function (e) {
$('#temporary-storage').removeClass('add')
}).on('drop', function (e) {
$("#temporary-storage").hide().removeClass('show-add add').css({left: -100, top: -100})
if (!$dragDom) return;
var title = $dragDom.text() || $dragDom.attr('title') || '',
href = $dragDom.attr('href')
if (checkDragUrl(href)) return;
var newLink = {title, href, ding: false}
var storage = localStorage.getItem(storageKey)
storage = storage && JSON.parse(storage) || []
for (var i=storage.length-1; i>=0; i--) {
if (storage[i].href == href) {
newLink.ding = storage[i].ding || false
storage.splice(i, 1)
}
}
storage.unshift(newLink)
storage.sort(function (v1,v2) {
if (!v2.ding && !v1.ding) return 0;
return v2.ding && !v1.ding ? 1 : -1;
})
localStorage.setItem(storageKey, JSON.stringify(storage))
updateStorageLink()
})
$("#temporary-storage-list").mouseenter(function (e) {
clearTimeout(dragTimer)
$(document).unbind('mousemove',temporaryStorageEyeHandler)
})
.mouseleave(function (e) {
$(this).removeClass('opened')
dragTimer = setTimeout(function () {
$(document).bind('mousemove', temporaryStorageEyeHandler)
}, 500)
})
.on('click', '.li-link', function (e) {
var $li = $(this).parent(), d = $li.data()
if ($li.hasClass('active')) return;
var storage = localStorage.getItem(storageKey)
storage = storage && JSON.parse(storage) || []
storage.splice(d.idx, 1)
localStorage.setItem(storageKey, JSON.stringify(storage))
updateStorageLink()
})
.on('click', '.link-ding', function (e) {
e.stopPropagation()
var $li = $(this).parent(), d = $li.data()
var storage = localStorage.getItem(storageKey)
storage = storage && JSON.parse(storage) || []
storage[d.idx].ding = !storage[d.idx].ding
storage.sort(function (v1,v2) {
if (!v2.ding && !v1.ding) return 0;
return v2.ding && !v1.ding ? 1 : -1;
})
localStorage.setItem(storageKey, JSON.stringify(storage))
updateStorageLink()
})
.on('click', '.storage-clean', function (e) {
var storage = localStorage.getItem(storageKey)
storage = storage && JSON.parse(storage) || []
for(var i=storage.length-1; i>=0; i--) {
if (!storage[i].ding) storage.splice(i,1)
}
localStorage.setItem(storageKey, JSON.stringify(storage))
updateStorageLink()
})
.on('click', '.storage-help', function (e) {
dialog({title: '快捷访问暂存区功能', msg: '<div><p>暂存区数据被保存在浏览器中，并且跳转页面后也不会消失，可以把即将要使用的链接放入暂存区，以达到快捷来回访问的目的。</p><p>如果点击链接后不想让链接消失，可以点击旁边的“<i class="fa fa-gavel"></i>”按钮把链接固定。</p><p>固定的链接会以新窗口的形式打开，并且点击后不会消失。 </p><p>添加链接到暂存区方法：</p><p>1、可以从页面拖动链接，放入暂存区</p><p>2、可以按 <kbd>Shift 和 +(加号键)</kbd> 添加当前页面到暂存区</p><p>清空操作不会清理被固定的链接</p></div>'})
})
//更新链表显示列表
function updateStorageLink() {
var storage = localStorage.getItem(storageKey)
storage = storage && JSON.parse(storage) || []
$("#temporary-storage-list").empty()
for (var i in storage) {
$("#temporary-storage-list").append('<div class="li '+(storage[i].ding?'active':'')+'" data-idx="'+i+'"><a href="'+storage[i].href+'" class="li-link" target="'+(storage[i].ding?'_blank':'_self')+'">'+storage[i].title+'</a><div class="link-ding" title="固定"></div></div>')
}
var $btns = $('<div class="actions text-center"><div class="btn btn-xs btn-text storage-help pull-right" style="margin-top: 4px;"><i class="fa fa-question-circle-o"></i></div></div>')
if (storage.length>0) {
$btns.append('<div class="btn btn-xs btn-text storage-clean" title="固定链接不会被清理"><i class="fa fa-trash-o"></i> 清空</div>')
}
$("#temporary-storage-list").append($btns)
}
function showStorageLinks() {
$("#temporary-storage-list").addClass('opened')
}
function temporaryStorageEyeHandler(e) {
if (e.clientX < 80 && e.clientY<50) {
showStorageLinks()
} else if ($("#temporary-storage-list").hasClass('opened') && (e.clientX > 80 || e.clientY>50)) {
$("#temporary-storage-list").removeClass('opened')
}
}
$(document).mousemove(temporaryStorageEyeHandler)
$('body').keypress(function (e) {
if (e.key != '+' || !e.shiftKey || e.target.tagName != 'BODY') return;
var title = document.title, href = location.href
var newLink = {title, href, ding: false}
var storage = localStorage.getItem(storageKey)
storage = storage && JSON.parse(storage) || []
for (var i=storage.length-1; i>=0; i--) {
if (storage[i].href == href) {
newLink.ding = storage[i].ding || false
storage.splice(i, 1)
}
}
storage.unshift(newLink)
storage.sort(function (v1,v2) {
if (!v2.ding && !v1.ding) return 0;
return v2.ding && !v1.ding ? 1 : -1;
})
localStorage.setItem(storageKey, JSON.stringify(storage))
updateStorageLink()
simpleDialog({msg: '当前页面已添加到快速访问区'})
})
updateStorageLink()
//链接暂存箱功能,END
/** temporary-storage **/
.temporary-storage-box{
position: fixed;
left: -100px;
top: -100px;
z-index: 100;
box-sizing: border-box;
background: rgba(250, 80, 137, 0.5);
border-radius:4px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: scale(1);
transition: transform,background,opacity .3s;
overflow: hidden;
}
.temporary-storage-box.show-add{
left: 0;
top: 0;
opacity: 1;
}
.temporary-storage-box.add{
transform: scale(1.2);
background: rgb(250, 80, 137);
}
.temporary-storage-box:before{
font-family: FontAwesome;
font-size: 24px;
content: "\f196";
display: inline;
color: #fff;
}
.temporary-storage-box.eye:before{
content: "\f06e";
}
.temporary-storage-box .droppable{
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
left: 0;
top: 0;
}
.temporary-storage-box .droppable.debug{
background-color: rgba(255,255,255,.5); opacity: 1
}
.temporary-storage-list {
position: fixed;
left: -100%;
top: 0;
z-index: 100;
box-sizing: border-box;
background: rgb(250, 80, 137);
width: 140px;
overflow: hidden;
transition: all .3s;
line-height: 30px;
}
.temporary-storage-list.opened {
left: 0;
}
.temporary-storage-list .actions {
color: #fff;
border-top: 1px solid #ff84ad;
}
.temporary-storage-list .li{
padding-left: 10px;
text-decoration: none;
color: #fff;
display: flex;
width: 100%;
height: 30px;
overflow: hidden;
}
.temporary-storage-list .li+.li{
border-top: 1px dashed #ff84ad;
}
.temporary-storage-list .li:hover{background-color: #ff709f}
.temporary-storage-list .li .li-link{
width: calc(100% - 30px); color: #fff; display: block; text-decoration: none;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.temporary-storage-list .li .link-ding{
width: 30px;
text-align: center;
color: #fd95b7;
cursor: pointer;
}
.temporary-storage-list .li.active .link-ding{
color: #fff;
}
.temporary-storage-list .li .link-ding:before{
display: inline;
font-family: FontAwesome;
content: "\f0e3";
}
/** temporary-storage end **/
phpstorm自动补全转义符号设置/嵌套引号自动添加斜杠以及内容原样粘贴快捷键
phpstorm工具在使用中，粘贴html代码到双引号中，有时会涉及双引号嵌套双引号，就需要内部引号加斜杠做转义处理。
老版本时默认勾选了要处理，即粘贴就自动补全斜杠做转义处理，但是有个小bug是，如果复制已转义的代码，再次粘贴时，会再加一次转义斜杠，出现双斜杠情况，有快捷键可规避：Shift+Ctrl+Alt+V 指令将粘贴不做任何处理的内容原样粘贴。
2021版本后修正了这个问题，不管复制的原内容是否已经做过转义处理，再次粘贴会自动处理好，正常使用粘贴即可。但是软件默认设置却是没勾选粘贴时要加转义斜杠。
具体位置设置路径：
自动替换单双引号：editor-general-smartKeys-php 【replace unnecessary double quotes on paste】
自动在单双引号前添加反斜线：editor-general-smartKeys-php 【escape symbols on paste in string literals】
php代码片段显示目标时间与当前时间对比后XX天前XX天后
比如要显示：XXX天后过期，XXX小时前已过期
使用时用 diffDate 方法
...
public static function diffDate($timestampNow, $timestamp, $returnTimestamp = false, $level=0, $lang='zh')
{
if (!is_numeric($timestampNow)) $timestampNow = strtotime($timestampNow);
if (!is_numeric($timestamp)) $timestamp = strtotime($timestamp);
if ($timestamp > $timestampNow) $append = '后';
elseif ($timestamp < $timestampNow) $append = '前';
$diffTimestamp = $timestampNow - $timestamp;
if ($returnTimestamp) return $diffTimestamp;
$diffTimestamp = abs($diffTimestamp);
if ($diffTimestamp > 86400) $level = 3;
elseif ($diffTimestamp > 3600) $level = 2;
else $level = 1;
return self::timeLength($diffTimestamp, $lang, $level) . $append;
}
/**
* 时长人性化显示
* @param $second
* @param $lang
* @param int $level 返回的最小单位，0秒，1分，2时，3天
* @return string
*/
public static function timeLength($second, $lang='zh', $level=0)
{
$arr = [
'zh'=>['天'=>'天','小时'=>'小时','分'=>'分',''=>'','秒'=>'秒',],
'en'=>['天'=>'d','小时'=>'h','分'=>'m',''=>'','秒'=>'s',],
];
$second = (int)$second;
if ($second <=0 ) $second=0;
$text = [];
if ($level <= 3 && ($tmp1 = floor($second / 86400)) > 0) $text[] = "{$tmp1}{$arr[$lang]['天']}";
if ($level <= 2 && ($tmp2 = floor(($second - $tmp1 * 86400) / 3600)) > 0) $text[] = "{$tmp2}{$arr[$lang]['小时']}";
if ($level <= 1 && ($tmp3 = floor(($second - $tmp1 * 86400 - $tmp2 * 3600) / 60)) > 0) $text[] = "{$tmp3}{$arr[$lang]['分']}";
if ($level <= 0 && ($tmp4 = $second % 60) > 0) $text[] = "{$tmp4}{$arr[$lang]['秒']}";
return implode('', $text);
}
/**
* 格式化时间戳
* @param type $date
* @return string
*/
public static function formatTime($date) {
$thisyear = intval(zmf::time(NULL, 'Y'));
$dateyear = intval(zmf::time($date, 'Y'));
if (($thisyear - $dateyear) > 0) {
return zmf::time($date, 'Y-m-d H:i');
}
$thismo = intval(zmf::time(NULL, 'm'));
$datemo = intval(zmf::time($date, 'm'));
if ($thisyear == $dateyear && $thismo != $datemo) {
return zmf::time($date, 'm-d H:i');
}
$timer = $date;
$diff = zmf::now() - $timer;
$thisto = intval(zmf::time(NULL, 'd'));
$dateto = intval(zmf::time($date, 'd'));
$day = $thisto - $dateto;
$free = $diff % 86400;
if ($day > 0) {
if ($day > 7) {
return zmf::time($date, 'n-j H:i');
} elseif ($day == 1) {
return "昨天 " . zmf::time($date, 'H:i');
} elseif ($day == 2) {
return "前天 " . zmf::time($date, 'H:i');
} else {
return $day . "天前";
}
} else {
if ($free > 0) {
$hour = floor($free / 3600);
$free = $free % 3600;
if ($hour > 0) {
return $hour . "小时前";
} else {
if ($free > 0) {
$min = floor($free / 60);
$free = $free % 60;
if ($min > 0) {
return $min . "分钟前";
} else {
if ($free > 0) {
return $free . "秒前";
} else {
return '刚刚';
}
}
} else {
return '刚刚';
}
}
} else {
return '刚刚';
}
}
}
...vim编辑器的删除操作技巧
字符删除
x 删除光标所在处字符
X 删除光标所在前字符单词删除
dw 删除到下一个单词开头
de 删除到本单词末尾
dE 删除到本单词末尾包括标点在内
db 删除到前一个单词
dB 删除到前一个单词包括标点在内行删除
dd 删除一整行
3dd 代表删除三行
D 或者 d$ 删除光标位置到本行结尾
d0 删除光标位置到本行开头
d+方向键 删除光标行+上/下行删除一大块好几行内容
shift+v 选择行，用方向键移动选择
ctrl+v 选择一个方形块，用方向键移动选择
dgg 删除光标到文件头所有内容
dG 删除光标到文件尾所有内容按d删除的内容实际上是剪切的，可以按p进行粘贴回来