#628
展开↯#629
作者:广西南宁市
canvasTime.js 炫彩时钟时间彩色
<div style="width:300px;">
<canvas id="canvas" style="width:100%;" height="100" width="700">当前浏览器不支持canvas,请更换浏览器后再试</canvas>
</div>
<script>
(function(){
var digit=
[
[
[0,0,1,1,1,0,0],
[0,1,1,0,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,0,1,1,0],
[0,0,1,1,1,0,0]
],//0
[
[0,0,0,1,1,0,0],
[0,1,1,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[1,1,1,1,1,1,1]
],//1
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,1,1,0,0,0],
[0,1,1,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,0,0,0,1,1],
[1,1,1,1,1,1,1]
],//2
[
[1,1,1,1,1,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,1,1,1,0,0],
[0,0,0,0,1,1,0],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//3
[
[0,0,0,0,1,1,0],
[0,0,0,1,1,1,0],
[0,0,1,1,1,1,0],
[0,1,1,0,1,1,0],
[1,1,0,0,1,1,0],
[1,1,1,1,1,1,1],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,1,1,1,1]
],//4
[
[1,1,1,1,1,1,1],
[1,1,0,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,1,1,1,1,0],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//5
[
[0,0,0,0,1,1,0],
[0,0,1,1,0,0,0],
[0,1,1,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,0,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//6
[
[1,1,1,1,1,1,1],
[1,1,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0]
],//7
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//8
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,1,1,0,0,0,0]
],//9
[
[0,0,0,0,0,0,0],
[0,0,1,1,1,0,0],
[0,0,1,1,1,0,0],
[0,0,1,1,1,0,0],
[0,0,0,0,0,0,0],
[0,0,0,0,0,0,0],
[0,0,1,1,1,0,0],
[0,0,1,1,1,0,0],
[0,0,1,1,1,0,0],
[0,0,0,0,0,0,0]
]//:
];
var canvas = document.getElementById('canvas');
if(canvas.getContext){
var cxt = canvas.getContext('2d');
//声明canvas的宽高
var H = 100,W = 700;
canvas.height = H;
canvas.width = W;
cxt.fillStyle = '#f00';
cxt.fillRect(10,10,50,50);
//存储时间数据
var data = [];
//存储运动的小球
var balls = [];
//设置粒子半径
var R = canvas.height/20-1;
(function(){
var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
//存储时间数字,由十位小时、个位小时、冒号、十位分钟、个位分钟、冒号、十位秒钟、个位秒钟这7个数字组成
data.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);
})();
/*生成点阵数字*/
function renderDigit(index,num){
for(var i = 0; i < digit[num].length; i++){
for(var j = 0; j < digit[num][i].length; j++){
if(digit[num][i][j] == 1){
cxt.beginPath();
cxt.arc(14*(R+2)*index + j*2*(R+1)+(R+1),i*2*(R+1)+(R+1),R,0,2*Math.PI);
cxt.closePath();
cxt.fill();
}
}
}
}
/*更新时钟*/
function updateDigitTime(){
var changeNumArray = [];
var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
var NewData = [];
NewData.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);
for(var i = data.length-1; i >=0 ; i--){
//时间发生变化
if(NewData[i] !== data[i]){
//将变化的数字值和在data数组中的索引存储在changeNumArray数组中
changeNumArray.push(i+'_'+(Number(data[i])+1)%10);
}
}
//增加小球
for(var i = 0; i< changeNumArray.length; i++){
addBalls.apply(this,changeNumArray[i].split('_'));
}
data = NewData.concat();
}
/*更新小球状态*/
function updateBalls(){
for(var i = 0; i < balls.length; i++){
balls[i].stepY += balls[i].disY;
balls[i].x += balls[i].stepX;
balls[i].y += balls[i].stepY;
if(balls[i].x > W + R || balls[i].y > H + R){
balls.splice(i,1);
i--;
}
}
}
/*增加要运动的小球*/
function addBalls(index,num){
var numArray = [1,2,3];
var colorArray = ["#3BE","#09C","#A6C","#93C","#9C0","#690","#FB3","#F80","#F44","#C00"];
for(var i = 0; i < digit[num].length; i++){
for(var j = 0; j < digit[num][i].length; j++){
if(digit[num][i][j] == 1){
var ball = {
x:14*(R+2)*index + j*2*(R+1)+(R+1),
y:i*2*(R+1)+(R+1),
stepX:Math.floor(Math.random() * 4 -2),
stepY:-2*numArray[Math.floor(Math.random()*numArray.length)],
color:colorArray[Math.floor(Math.random()*colorArray.length)],
disY:1
};
balls.push(ball);
}
}
}
}
/*渲染*/
function render(){
//重置画布宽度,达到清空画布的效果
canvas.height = 100;
//渲染时钟
for(var i = 0; i < data.length; i++){
renderDigit(i,data[i]);
}
//渲染小球
for(var i = 0; i < balls.length; i++){
cxt.beginPath();
cxt.arc(balls[i].x,balls[i].y,R,0,2*Math.PI);
cxt.fillStyle = balls[i].color;
cxt.closePath();
cxt.fill();
}
}
clearInterval(oTimer);
var oTimer = setInterval(function(){
//更新时钟
updateDigitTime();
//更新小球状态
updateBalls();
//渲染
render();
},50);
}
})();
</script>
Run code
Cut to clipboard
文章:常用html、demo代码 发表时间:2018-02-06, 14:29:51
#630
作者:河南省郑州市
呃,试了试似乎有点东西不能用
某些元素样式引用了.LESS的样式文件
一样的代码我的就是不引用这个less文件。。
很奇怪。
某些元素样式引用了.LESS的样式文件
一样的代码我的就是不引用这个less文件。。
很奇怪。
文章:WeUI微信小程序前端框架ui简明入门指南 发表时间:2018-02-04, 22:40:25
#632
作者:广西南宁市
LOVE U ,BUT MORE THAN I COULD SAY IT .LET IT BE.
#,广西南宁市,2018-02-01,11:38:57, 自从“野食蛮族”广东,到“险诈诡乡”河南,终于“枯萎之土”东北也加入豪华套餐了~ #,广西南宁市,2018-02-01,11:42:42, 
#,广西南宁市,2018-02-01,11:42:55, 
#,广西南宁市,2018-02-01,11:54:06, 我小学开始看毛片,但是却初中才知道几个洞,大学才开始撸管。。 #,广西南宁市,2018-02-01,11:58:57, 贪晚蓝月,介是你没见过的船新版板。19:48分,不要错过。

#,广西南宁市,2018-02-01,12:00:57, 
文章:2018年的第一次清零 发表时间:2018-02-01, 10:00:14
#633
作者:广西南宁市
模仿微信相册图片放大
点击图片放大缩放
弹出层
相册
#,广西南宁市,2018-01-31,00:32:46, 附件下载 #,广西南宁市,2018-01-31,00:33:31, 图片缩放大
-webkit-user-drag #,广西南宁市,2018-01-31,00:34:41, jQuery动画出现连续触发、滞后反复执行的解决方法
#,广西南宁市,2018-01-31,10:59:47,
修复uc等浏览器图片max不显示问题
加加载层,会导致点击遮罩层不能关闭bug
#,广西南宁市,2018-01-31,11:52:58,
修复有点击a标签链接图片不放大
点击图片放大缩放
弹出层
相册
<!--zoom img-->
<style>
#newBridge{
z-index: 2147483645!important;
}
#zoomimgggxxxlll{
width: 100%;
height: 100%;
background: #000;
position: fixed;
left: 0px;
top: 0px;
z-index: 2147483646;
display:none;
}
.layui-layer, .layui-layer-shade{
z-index: 2147483647!important;
}
</style>
<div id="zoomimgggxxxlll" onclick="layer.closeAll();$('#zoomimgggxxxlll').hide();"></div>
<script src="/layer/layer.js"></script>
<script type="text/javascript" src="/m/js/pinchzoom.js?1"></script>
<script>
$(function () {
$('.layui-layer-content').each(function () {
new RTP.PinchZoom($(this), {});
});
})
$(document).ready(function(){
$(".cnnn img").click(function(){
layer.closeAll();
$('#zoomimgggxxxlll').show();
var srccc=$(this).attr('src');
srccc='<img onclick="layer.closeAll();$(\'#zoomimgggxxxlll\').hide();" src="'+srccc+'" style="max-width:100%;max-height:100%;"/>'
//alert(srccc);
//页面层
layer.open({
type: 1,scrollbar: false,
title: false,
closeBtn: 0,
shade: 0,
//area: ['100%', '100%'],
content: srccc
});
$('.layui-layer-content').each(function () {
new RTP.PinchZoom($(this), {});
});
});
/*$(".layui-layer-content img").on("click",function(){
//$(".layui-layer-content img").click(function(){
layer.closeAll();
});*/
});
</script>
<!--end-->
Run code
Cut to clipboard
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Pinchzoom.js Demo</title>
<style type="text/css">
div.pinch-zoom,
div.pinch-zoom img{
width: 100%;
-webkit-user-drag: none;
}
</style>
<link rel="stylesheet" href="style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- pinchzoom requires: jquery -->
<script type="text/javascript" src="../dependencies/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../src/pinchzoom.js"></script>
<script type="text/javascript">
$(function () {
$('div.pinch-zoom').each(function () {
new RTP.PinchZoom($(this), {});
});
})
</script>
</head>
<body>
<div class="page">
<div class="pinch-zoom">
<div class="description">
<h1>Pinchzoom.js</h1>
<p>
Multi-touch zoom in Javascript
</p>
</div>
<img src="frog.jpg"/>
</div>
</div>
</body>
</html>
Run code
Cut to clipboard
-webkit-user-drag
//语法结构
$("#div").stop();//停止当前动画,继续下一个动画
$("#div").stop(true);//清除元素的所有动画
$("#div").stop(false, true);//让当前动画直接到达末状态 ,继续下一个动画
$("#div").stop(true, true);//清除元素的所有动画,让当前动画直接到达末状态
Run code
Cut to clipboard
$("#div").stop().animate({width:"100px"},100);
Run code
Cut to clipboard
修复uc等浏览器图片max不显示问题
area: ['100%'],
Run code
Cut to clipboard
加加载层,会导致点击遮罩层不能关闭bug
//layer.load(1);
Run code
Cut to clipboard
修复有点击a标签链接图片不放大
if($(this).parent('a').length) return true;//修复链接图片也放大
Run code
Cut to clipboard
文章:鼠标图片放大插件-JQUERY ZOOM 发表时间:2018-01-31, 00:28:22
#634
作者:广西南宁市
weiphp ueditor 百度编辑器上传图片自动压缩最大宽高度900bug


#,广西南宁市,2017-06-14,16:34:05, UEditor上传图片被压缩得模糊的解决方法
UEditor功能很强大,但是有个很不友好的功能:会在使用UEditor上传图片时,如果你的原始图片尺寸过大,就会先自动对图片大小进行压缩,然后将压缩的文件给servlet。也就是说,使用UEditor 上传图片后会导致图片大小发生改变并使图片变得模糊,而这是在用户毫不知情的情况下进行的操作,非常讨厌。
如果不想让上传的精美照片被UEditor 压缩得面目全非,可以通过以下方法禁止UEditor自动压缩图片:
打开该目录的文件:UEditor\php\ue.config.php, #,广西南宁市,2017-06-14,16:46:37, image.html无效,需修改

#,广西南宁市,2017-06-14,16:47:45,@2 , #,广西南宁市,2018-01-30,10:19:25,@2 ,
修改前
修改后

#,广西南宁市,2018-01-30,19:37:09,
新后台修改

#,广西南宁市,2018-01-30,19:38:29,
UEditor上传图片被压缩得模糊的解决方法
UEditor功能很强大,但是有个很不友好的功能:会在使用UEditor上传图片时,如果你的原始图片尺寸过大,就会先自动对图片大小进行压缩,然后将压缩的文件给servlet。也就是说,使用UEditor 上传图片后会导致图片大小发生改变并使图片变得模糊,而这是在用户毫不知情的情况下进行的操作,非常讨厌。
如果不想让上传的精美照片被UEditor 压缩得面目全非,可以通过以下方法禁止UEditor自动压缩图片:
打开该目录的文件:UEditor\php\ue.config.php,
ueditor.config.js 143行
Run code
Cut to clipboard
修改前
修改后
新后台修改
\app\system\include\public\js\examples\editor\ueditor\third-party\webuploader
Run code
Cut to clipboard
{if(d=c.canvasToDataUrl(b,"image/jpeg",e.quality),e.preserveHeaders&&this._metas&&this._metas.imageHead)return d=c.dataURL2ArrayBuffer(d),d=c.updateImageHead(d,this._metas.imageHead),d=c.arrayBufferToBlob(d,a)}else d=c.canvasToDataUrl(b,a);d=c.dataURL2Blob(d)}return d},getAsDataUrl:function(
Run code
Cut to clipboard
UEditor上传图片被压缩得模糊的解决方法
UEditor功能很强大,但是有个很不友好的功能:会在使用UEditor上传图片时,如果你的原始图片尺寸过大,就会先自动对图片大小进行压缩,然后将压缩的文件给servlet。也就是说,使用UEditor 上传图片后会导致图片大小发生改变并使图片变得模糊,而这是在用户毫不知情的情况下进行的操作,非常讨厌。
如果不想让上传的精美照片被UEditor 压缩得面目全非,可以通过以下方法禁止UEditor自动压缩图片:
打开该目录的文件:UEditor\php\ue.config.php,找到如下代码:
$CONFIG = array(
/* 上传图片配置项 */
"imageActionName" => "uploadimage", /* 执行上传图片的action名称 */
"imageFieldName" => "upfile", /* 提交的图片表单名称 */
"imageMaxSize" => $max_size, /* 上传大小限制,单位B */
"imageAllowFiles" => $upload_allow, /* 上传图片格式显示 */
"imageCompressEnable" => true, /* 是否压缩图片,默认是true */
"imageCompressBorder" => 2940, /* 图片压缩最长边限制 */
"imageInsertAlign" => "none", /* 插入的图片浮动方式 */
"imageUrlPrefix" => "", /* 图片访问路径前缀 */
将上述代码中imageCompressEnable 后的“true”参数改为“false”即可。当然,你也可以调整imageCompressBorder 后的参数,只有边长大于该值的照片才会被UEditor 压缩。
如果你觉得压缩图片的功能还是有点用,将下面这个目录中的文件 “UEditor\dialogs\image\image.js”中 "quality" 值调整为100 (代码瑞安),这样会对图片质量有一些改善,但还是差强人意,所以还是建议禁止UEditor 自动压缩图片。
compress: editor.getOpt('imageCompressEnable') ? {
width: imageCompressBorder,
height: imageCompressBorder,
// 图片质量,只有type为`image/jpeg`的时候才有效。
quality: 90,
// 是否允许放大,如果想要生成小图的时候不失真,此选项应该设置为false.
allowMagnify: false,
// 是否允许裁剪。
crop: false,
// 是否保留头部meta信息。
Run code
Cut to clipboard
quality
Run code
Cut to clipboard
文章:weiphp微信框架耗时卡慢解决办法 发表时间:2017-06-14, 16:32:58
#637
作者:广西南宁市
//js 创建cookie
function xlmsetCookie(c_name,value,expiredays){
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())+";path=/"; //js cookie根目录
}
Run code
Cut to clipboard
//js 获取cookie
function xlmgetCookie(c_name){
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
Run code
Cut to clipboard
<html>
<head>
<script type="text/javascript">
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
{alert('Welcome again '+username+'!')}
else
{
username=prompt('Please enter your name:',"")
if (username!=null && username!="")
{
setCookie('username',username,365)
}
}
}
</script>
</head>
<body onLoad="checkCookie()">
</body>
</html>
Run code
Cut to clipboard
文章:常用html、demo代码 发表时间:2018-01-26, 11:56:13
#638
作者:广西南宁市
<html>中<textarea>在显示时开头的空格
这样显示出来开头就会有很多空格,但是如果给<textarea>放在一行显示出来的数据开头就没有空格。如:
不知道为什么! #,广西南宁市,2018-01-25,10:11:18,
<label class="regboxlabe">
备注:
</label>
<textarea rows="3" cols="25" name="pi.pi_message">
</textarea>
Run code
Cut to clipboard
这样显示出来开头就会有很多空格,但是如果给<textarea>放在一行显示出来的数据开头就没有空格。如:
<textarea rows="3" cols="25" name="pi.pi_message"></textarea>
Run code
Cut to clipboard
<div class="editor">
<script>
var editor = editor('content');
document.write (editor);
</script>
<div class="editor_text">
<textarea name='content' id='content' style="height: 366px;">
<?=$article['content']?>
</textarea>
</div>
</div>
Run code
Cut to clipboard
文章:常用html、demo代码 发表时间:2018-01-22, 14:17:44
#639
作者:广西南宁市
一流的企业,和不入流的企业,区别很大,一个不入流的企业怎么想扣员工的钱,经营理念不一样,
文章:截止2017年底,从腾讯离职的员工有2万多名,创业项目近1000个 发表时间:2018-01-25, 09:43:44
#641
作者:广西南宁市
thinkphp or 复合查询 组合查找 and 条件查询 like
查询条件是
$where['name'] = array('like', '%thinkphp%');
$where['title'] = array('like','%thinkphp%');
$where['_logic'] = 'or';
$map['_complex'] = $where;
$map['id'] = array('gt',1);
Run code
Cut to clipboard
查询条件是
( id > 1) AND ( ( name like '%thinkphp%') OR ( title like '%thinkphp%') )
Run code
Cut to clipboard
//获取文章列表
public function new_list($classname,$cid,$p,$m,$img,$k,$hyid){
$where[$classname]=$cid;
$where['hyfl']=array('like','%,'.$cid.',%');
$where['_logic'] = 'or';
$w['_complex'] = $where;
if($img) $w['imgurl']=array('neq','');
if($k) $w['title']=array('like','%'.$k.'%');
if($hyid) $w['gz_headeryjhhyy']=$hyid;
$w['displaytype']=1;
$p=$p+0;
if($p<0) $p=0;
$n=$p*$m;
if($p>0) $n=($p-1)*$m;
//dump($w);exit;
$l=M('news')->where($w)->order('com_ok desc,no_order asc,id desc')->limit($n,$m)->select();
//print_r($l);exit();
return $l;
}
Run code
Cut to clipboard
文章:常用html、demo代码 发表时间:2018-01-25, 00:35:18
#642
作者:广西南宁市
jquery获取select选中的值
#,广西南宁市,2018-01-25,00:32:11,
JavaScript获得获取input元素value值
$(".select").change(function(){
console.log($(this).val())
});
//操作被选中的元素
Run code
Cut to clipboard
JavaScript获得获取input元素value值
<html>
<head>
<script language="javascript">
function print(){
var a=myform.name.value;
alert(a);
}
</script>
</head>
<body>
<form name="myform">
<input type="text" name="name" id="nn" />
<input type="button" name="button" value="获取" onclick="print()" />
</form>
</body>
</html>
Run code
Cut to clipboard
<html>
<head>
<script language="javascript">
function print(){
var a=document.getElementById("nn").value;
alert(a);
}
</script>
</head>
<body>
<form>
<input type="text" name="name" id="nn" />
<input type="button" name="button" value="获取" onclick="print()" />
</form>
</body>
</html>
Run code
Cut to clipboard
文章:常用html、demo代码 发表时间:2018-01-25, 00:31:22
#643
作者:广西南宁市
最重要的一点就是,你得想明白这项目做好了是谁的功劳,做不好是谁的锅。 #,北京市,2017-05-15,19:42:10, 老歌不敢听,新歌不想听! #,广西南宁市,2017-05-17,16:05:37, 中国庞大的电商发展潜力,足以让京东成为一家市值超过500亿美元的公司,但比起马云和贝索斯放眼全球市场的战略布局,刘强东仿佛总是缺少了点什么? #,广西南宁市,2017-05-17,16:05:52, 电商公司的高获客成本和流量黑洞的属性决定了其很难利用流量优势,在某个成熟赛道上实现高维打低维,因此必须不断地去开辟新的领域,以获取新赛道初期的超额利润,甚至是抢占入口,建立生态。 #,广西南宁市,2017-05-17,16:07:43, 流量黑洞,互联网词汇。指的是搜索入口的事情。 #,广西南宁市,2017-05-17,16:12:19,
洪波:百度框是否会成为只进不出的流量黑洞
去年百度“框计算”发布,我曾写过一篇《框不住的未来》,发表了一些简单的看法。不过,框计算一年来没有太多实际的进展,直到现在。你搜索“豆瓣电台”,现在可以直接在搜索结果页面收听音乐;搜索“植物大战僵尸”,也可以直接在结果页面玩游戏;未来,还会更多。
简单说,通过与特定网站和开发者的合作,百度搜索不仅仅可以读取规定的XML格式的数据,而且可以将产品和服务,封装成一个应用,直接在百度搜索结果页面运行。这样,百度搜索开放平台就不仅是一个数据汇集和流量分发的平台,未来很有可能成为一个面向最终用户的终极应用平台。
前几天跟百度首席产品设计师孙云丰有过一次直接沟通,对于百度应用开放平台将怎样改变产业生态,我表达了我的担忧。
1. 搜索与互联网生态。十多年来,搜索引擎几乎没有发生什么大的形态变化,即使是Google的整合搜索,也只是将图片、视频、新闻、实时内容、博客、论坛、地图等搜索结果,整合到Web搜索中,其最终效果,仍然是将用户导向目标网站,毕竟,搜索只是互联网众多应用形态中的一种,框不能取代其他。而且由于百度框计算太新,对互联网商业生态的影响太大,我们无法提前知道将来会发生什么。在涉及生态环境的问题上,先破坏后治理,基本上是一条不归路。
2. 流量黑洞。随着可以在百度搜索结果页面运行的应用越来越多,百度是否会成为一个只进不出的流量黑洞?用户不再需要通过百度访问目标网站,一旦越来越多的用户形成这样的习惯,百度将成为一个流量终结者。我同意搜索引擎需要与时俱进,需要不断进化,但对搜索引擎的流量分发功能的巨大改变,是否会造成不可逆转的生态灾难,我有疑虑。
3. 马太效应。由于百度的应用审核机制和用户需求匹配机制,以及独特而醒目的应用呈现方式,被百度认可的应用,将获得更高的用户使用率,有可能导致严重的两极分化。比方说,用户搜索佳能数码相机,百度以最好的位置和最佳的呈现方式,给出京东商城的报价和购买链接,对其他电子商务网站来说,就近乎屏蔽。在极端情况下,任何一个细分领域,只有一两家网站能从百度受益,其他的几乎难有出头之日。程苓峰所担心的,中国互联网上出现一个“百度系”,是很有可能的。
4. 技术歧视。有能力按百度要求开发应用的网站,相比那些没有能力的网站,就更“权威”吗?
孙云丰说,应用开放平台最初的,也是惟一的出发点,是用户体验。用户搜索“QQ下载”,大量的假QQ真木马,搜索“海尔售后”,大量的假售后真骗子,搜索“开心网”,大量的假开心真山寨,都是对用户极大的伤害。与其跟恶意SEO长期玩猫捉老鼠的游戏,不如改变规则,突出权威结果。这想法没问题,但“权威”则问题很大。我不知道,一个淘宝卖数码相机的小店,是否就一定不如京东商城权威。
孙云丰还认为,一些互联网商业模式,需要根据用户需求来调整。比如网络小说《斗破苍穹》,每天可以得到百万级别的搜索量,其中九成以上的用户只是搜索免费内容,他们不会选择付费阅读。这时候《斗破苍穹》的广告价值,可能远远超过收费价值。问题是,具有广告价值的网络小说,只占极小的比例,为少数热门产品,改变成型的商业模式,可能性有多大,对盛大文学们来说,是个很大的问题。
孙云丰说,百度应用开放平台,对开发者是完全免费的,跟百度的广告系统无关,但在结果排序上,广告的优先级要高于应用。不过,由于我上面提到的马太效应,未来对应用的争夺将越来越激烈,对很多企业来说,这是个生死问题。这些竞争性应用怎样审核,怎样匹配,怎样排序,也必定会受到越来越多的质疑。(文/洪波) #,北京市,2017-05-20,03:19:39, 黄渤:孙红雷如果不是演员,对这个社会一点好处都没有。 #,广西南宁市,2017-05-25,17:21:13, 也许我们都不是天才的程序员,但至少我们都可以成为一个理想的程序员。 #,北京市,2017-05-28,10:34:17, 他人笑我太疯癫,我笑他人怎么看出来的 #,北京市,2017-05-28,10:36:58, 凡是带有人民两个的,除了人民医院。人民都进不去 #,北京市,2017-05-28,18:39:47, 胜者王侯败者寇,输了就要被编排。 #,广西南宁市,2017-07-27,10:49:14, 回复短信通知,只有别人回复的时候也填写手机号,前面回复填写手机号接收短信通知的才会触发发送短信通知功能呢 #,广西南宁市,2017-07-27,10:55:43,@11 , #,广西南宁市,2017-07-27,10:57:15, #,广西南宁市,2017-07-27,14:15:13, 
F2跳至标签处
Ctrl-F2
收缩展开标签
F2
跳至下一个标签处
Shift-F2
跳至上一个标签处
notepad++ 快捷键大全、notepad常用快捷键
#,广西南宁市,2017-07-27,14:16:30,@14 , Ctrl+Shift+t 重新打开上个关闭标签页 #,广西南宁市,2018-01-24,15:19:49,
tips: 在chrome浏览器中, 可以输入 chrome://dns/ 查看chrome缓存的dns记录
洪波:百度框是否会成为只进不出的流量黑洞
去年百度“框计算”发布,我曾写过一篇《框不住的未来》,发表了一些简单的看法。不过,框计算一年来没有太多实际的进展,直到现在。你搜索“豆瓣电台”,现在可以直接在搜索结果页面收听音乐;搜索“植物大战僵尸”,也可以直接在结果页面玩游戏;未来,还会更多。
简单说,通过与特定网站和开发者的合作,百度搜索不仅仅可以读取规定的XML格式的数据,而且可以将产品和服务,封装成一个应用,直接在百度搜索结果页面运行。这样,百度搜索开放平台就不仅是一个数据汇集和流量分发的平台,未来很有可能成为一个面向最终用户的终极应用平台。
前几天跟百度首席产品设计师孙云丰有过一次直接沟通,对于百度应用开放平台将怎样改变产业生态,我表达了我的担忧。
1. 搜索与互联网生态。十多年来,搜索引擎几乎没有发生什么大的形态变化,即使是Google的整合搜索,也只是将图片、视频、新闻、实时内容、博客、论坛、地图等搜索结果,整合到Web搜索中,其最终效果,仍然是将用户导向目标网站,毕竟,搜索只是互联网众多应用形态中的一种,框不能取代其他。而且由于百度框计算太新,对互联网商业生态的影响太大,我们无法提前知道将来会发生什么。在涉及生态环境的问题上,先破坏后治理,基本上是一条不归路。
2. 流量黑洞。随着可以在百度搜索结果页面运行的应用越来越多,百度是否会成为一个只进不出的流量黑洞?用户不再需要通过百度访问目标网站,一旦越来越多的用户形成这样的习惯,百度将成为一个流量终结者。我同意搜索引擎需要与时俱进,需要不断进化,但对搜索引擎的流量分发功能的巨大改变,是否会造成不可逆转的生态灾难,我有疑虑。
3. 马太效应。由于百度的应用审核机制和用户需求匹配机制,以及独特而醒目的应用呈现方式,被百度认可的应用,将获得更高的用户使用率,有可能导致严重的两极分化。比方说,用户搜索佳能数码相机,百度以最好的位置和最佳的呈现方式,给出京东商城的报价和购买链接,对其他电子商务网站来说,就近乎屏蔽。在极端情况下,任何一个细分领域,只有一两家网站能从百度受益,其他的几乎难有出头之日。程苓峰所担心的,中国互联网上出现一个“百度系”,是很有可能的。
4. 技术歧视。有能力按百度要求开发应用的网站,相比那些没有能力的网站,就更“权威”吗?
孙云丰说,应用开放平台最初的,也是惟一的出发点,是用户体验。用户搜索“QQ下载”,大量的假QQ真木马,搜索“海尔售后”,大量的假售后真骗子,搜索“开心网”,大量的假开心真山寨,都是对用户极大的伤害。与其跟恶意SEO长期玩猫捉老鼠的游戏,不如改变规则,突出权威结果。这想法没问题,但“权威”则问题很大。我不知道,一个淘宝卖数码相机的小店,是否就一定不如京东商城权威。
孙云丰还认为,一些互联网商业模式,需要根据用户需求来调整。比如网络小说《斗破苍穹》,每天可以得到百万级别的搜索量,其中九成以上的用户只是搜索免费内容,他们不会选择付费阅读。这时候《斗破苍穹》的广告价值,可能远远超过收费价值。问题是,具有广告价值的网络小说,只占极小的比例,为少数热门产品,改变成型的商业模式,可能性有多大,对盛大文学们来说,是个很大的问题。
孙云丰说,百度应用开放平台,对开发者是完全免费的,跟百度的广告系统无关,但在结果排序上,广告的优先级要高于应用。不过,由于我上面提到的马太效应,未来对应用的争夺将越来越激烈,对很多企业来说,这是个生死问题。这些竞争性应用怎样审核,怎样匹配,怎样排序,也必定会受到越来越多的质疑。(文/洪波)
F2跳至标签处
Ctrl-F2
收缩展开标签
F2
跳至下一个标签处
Shift-F2
跳至上一个标签处
notepad++ 快捷键大全、notepad常用快捷键
Notepad++绝对是windows下进行程序编辑的神器之一,要更快速的使用以媲美VIM,必须灵活掌握它的快捷键,下面对notepad++默认的快捷键做个整理(其中有颜色的为常用招数):
1. 文件相关
快捷键
动作定义
Ctrl-O
打开文件
Ctrl-N
新建文件
Ctrl-S
保存文件
Ctrl-Alt-S
文件另存为
Ctrl-Shift-S
保存所有打开文件
Ctrl-P
打印
Alt-F4
退出程序
Ctrl-Tab
文件标签跳转,跳至下一个打开文件
Ctrl-Shift-Tab
文件标签跳转,跳至上一个打开文件
Ctrl-W
关闭当前文件
2.编辑相关
快捷键
动作定义
Ctrl-C
复制
Ctrl-Insert
同上,复制
Ctrl-Shift-T
复制当前行至剪贴板
Ctrl-X
剪切
Shift-Delete
同上,剪切
Ctrl-V
粘帖
Shift-Insert
同上,粘帖
Ctrl-Z
撤销上一次操作
Alt-Backspace
同上
Ctrl-Y
重做,注:撤销后,重做刚刚撤销的动作
Ctrl-A
全选
Alt-Shift-方向键 或 Alt + 鼠标左键
列选择模式
Ctrl + 鼠标左键
非连续性的多区域选择
ALT-C
列编辑器
Ctrl-D
复制当前行至下方,或者复制选中区域至其后
Ctrl-T
复制当前行至剪贴板(注:帮助中说是将当前行与上一行交换位置)
Ctrl-Alt-T
与上一行进行交换
Ctrl-Shift-Up
将当前行上移一行
Ctrl-Shift-Down
将当前行下移一行
Ctrl-L
删除当前行
Ctrl-I
-(注:帮助中是分割多行,不过最新版中不起作用)
Ctrl-J
合并多行(注:使用时要选择中需要合并的行)
Ctrl-G
跳转至某行对话框
Ctrl-Q
添加/删除注释
Ctrl-Shift-Q
区块添加/删除注释
Tab (selection of one or more full lines)
插入Tab
Shift-Tab (selection of one or more full lines)
删除位置之前的Tab
Ctrl-BackSpace
删除当前位置至单词开始的内容
Ctrl-Delete
删除当前位置至单词结尾的内容
Ctrl-Shift-BackSpace
删除当前位置至行首的内容
Ctrl-Shift-Delete
删除当前位置至行尾的内容
Ctrl-U
转换为小写
Ctrl-Shift-U
转换为大写
Ctrl-B
跳转至配对的括号
Ctrl-Space
触发函数自动完成列表
Ctrl-Shift-Space
触发函数参数提示
Ctrl-Enter
触发关键字自动完成列表
Ctrl-Alt-R
整个页面文字方向从右到左
Ctrl-Alt-L
整个页面文字方向从左到右(注:在安装了zencoding后,此快捷键可能被覆盖)
Enter
回车
Shift-Enter
同上
建议添加一个快捷键用来复制当前行至下一行:
在设置->快捷键管理中,选择scintilla commands中,找到SCI_LINEDUPLICATE,给它指定一个快捷键,例如Ctrl+M
3.搜索相关
快捷键
动作定义
Ctrl-F
打开搜索对话框
Ctrl-H
打开替换搜索对话框
F3
搜索下一个结果
Shift-F3
搜索上一个结果
Ctrl-Shift-F
文件中搜索
F7
调到寻找结果
Ctrl-Alt-F3
快速查找下一个
Ctrl-Alt-Shift-F3
快速查找上一个
Ctrl-F3
选定并寻找下一个
Ctrl-Shift-F3
选定并寻找上一个
F4
下一次寻找结果
Shift-F4
上一次寻找结果
Ctrl-Shift-I
增量查找
Ctrl-n
跳至下一个结果,用第n个风格标识(n为1~5,0是默认风格)
Ctrl-Shift-n
跳至上一个结果,用第n个风格标识(n为1~5,0是默认风格)
Ctrl-F2
收缩展开标签
F2
跳至下一个标签处
Shift-F2
跳至上一个标签处
4.显示相关
快捷键
定义内容
Ctrl-(Keypad-/Keypad+)或者Ctrl+鼠标滚轮
放大/缩小页面
Ctrl-Keypad/
回复到原始页面大小
F11
开关全屏显示(显示标签页)
F12
开关全屏显示(不显示标签页)
Ctrl-Alt-F
收缩当前折叠
Ctrl-Alt-Shift-F
展开当前折叠
Alt-0
收缩所有折叠
Alt-(1~8)
展开相应层折叠
Alt-Shift-0
展开所有折叠
Alt-Shift-(1~8)
展开所有层次折叠
5.运行相关
快捷键
定义内容
F5
打开运行窗口
Alt-F1
获得PHP帮助
Alt-F2
用Google搜索
Alt-F3
用Wiki搜索哦
Alt-F5
在本标签页中打开当前目录中,与光标位置文本同名的文件
Alt-F6
在新标签页中打开当前目录中,与光标位置文本同名的文件
Ctrl-Alt-Shift-R
在Chrome中打开
Ctrl-Alt-Shift-X
在Firefox中打开
Ctrl-Alt-Shift-I
在IE中打开
Ctrl-Alt-Shift-F
在Safari中打开
Ctrl-Alt-Shift-O
通过Outlook发送当前文件
Ctrl+C 复制
Ctrl+X 剪切
Ctrl+V 粘贴
Ctrl+Z 撤消
Ctrl+Y 恢复
Ctrl+A 全选
Ctrl+F 键查找对话框启动
Ctrl+H 查找/替换对话框
Ctrl+D 复制并粘贴当行
Ctrl+L 删除当前行
Ctrl+T 当行向上移动一行
F3 查找下一个
Shift+F3 查找上一个
Ctrl+Shift+F 组合在文件中查找
Ctrl+F3 查找(volatil)下一页
Ctrl+Shift+F3 查找(volatil)上一页
Ctrl+Shift+I 组合增量搜索
Ctrl+S 保存文件
Ctrl+Alt+S 另存为
Ctrl+Shift+S 保存所有文件
Ctrl+O 打开文件
Ctrl+N 新建立文件
Ctrl+F2 切换书签
F2 转到下一个书签
Shift+F2 转到上一个书签
CTRL+G 定位换行,偏移量
Ctrl+W 关闭当前文档
Alt+Shift+Arrow 键移箭头键或
ALT+鼠标左键 单击列选择
F5 启动运行对话框
Ctrl+空格 输入法切换
Alt+空格 程序单击右键
Tab 插入缩进
Shift+Tab 删除缩进
Alt-Shift-Arrow 或
Ctrl +鼠标滚轮钮 放大缩小
Ctrl +Keypad/恢复原来的大小
F11 全屏模式
Ctrl+Tab 下一个文档
Ctrl+Shift+Tab 上一个文档
Ctrl+Shift+Up 当前线向上移
Ctrl-Shift-Down 当前线向下移
Ctrl+Alt+F 折叠当前层次
Ctrl+Alt+Shift+F展开当前层次
Alt+0 折叠全部
Alt+Shift+0 展开全部
Alt+(1~8) 折叠级别(1~8)
Alt+Shift+(1~8) 展开级别(1~8)
Ctrl+BackSpace 删除开始词
Ctrl+Delete 删除结束词
Ctrl+Shift+BackSpace 删除至行
Ctrl+Shift+Delete 删除至行尾
CTRL+U 转换为小写
Ctrl+Shift+U 转换为大写
Ctrl+B 转至匹配的括号
Ctrl+Shift+R 的开始录制/停止录制宏
Ctrl+Shift+P 播放录制的宏
CTRL+Q 注释/取消注释
Ctrl+Shift+Q 值流评论
Ctrl+Shift+T 当前行复制到剪贴板
Ctrl+P 打印
Alt+F4 退出
Ctrl+I 分割线
Ctrl+J 连接行
Ctrl+Alt+R 从右边阅读
Ctrl+Alt+L 从左边阅读
Ctrl+H 打开Find / Replace 对话框
Ctrl+D 复制当前行
Ctrl+L 删除当前行
Ctrl+T 上下行交换
F3 找下一个
Shift+F3 找上一个
Ctrl+Shift-F 在文件中找
Ctrl+F2 触发书签
F2 到前一个书签
Shift+F2 到下一个书签
F5 打开run对话框
Ctrl+Space 打开CallTip列表框
Tab (selection of several lines) 加入Space
Shift+Tab (selection of several lines) 移除Space
F11 全屏
Alt+0 折叠全部
Alt+Shift+0 展开全部
Ctrl+U 变为小写
Ctrl+Shift+U 变为大写
Ctrl+Q 块注释/消除注释
还有就是Notepad的字体比较小,以前总找不到能放大字体的地方,后来发现Ctrl+鼠标滑轮可以放大视图,字体风格也可以设置,notepad的字体很丰富。
快捷键设置:notepad++ 设置快捷键里面是所有快捷键,可以更加自己的喜欢设置快捷键,ep:设置编码转化的快捷键!
主要添加或调整的光标操作按键:
向前(Ctrl+F),向后(Ctrl+B),上一行(Ctrl+P),下一行(Ctrl+N)
行最前(Ctrl+A), 行最后(Ctrl+E)
方法
菜单<设置>-<管理快捷键>
在"Main menu"及“Scintilla commands"中修改。
修改旧的快捷键,避免冲突:
新建 -> Ctrl+Alt+N
定位匹配括号 ->Ctrl+Alt+B
查找 -> Ctrl+Alt+F
选择所有 -> Ctrl+Alt+A
Run code
Cut to clipboard
tips: 在chrome浏览器中, 可以输入 chrome://dns/ 查看chrome缓存的dns记录
文章:@意见反馈/技术支持/伊网/安企网 发表时间:2017-05-15, 17:33:00
#644
作者:广西南宁市
通过A标签唤醒QQ或微信
相关代码:
唤醒QQ:<a href="http://wpa.qq.com/msgrd?v=3&uin=&site=1234567890&menu=yes">
唤醒微信:<a href="weixin://" onclick="PIWI_SUBMIT.Weixin_Open()" >
注:唤醒QQ链接中的1234567890换成对应的QQ号即可,如换了后不能正常使用需要步骤:
1、搜索QQ推广进入官网
2、进入推广工具界面
3、开通免费推广,获取下方的代码,替换上对应的QQ即可。
相关代码:
唤醒QQ:<a href="http://wpa.qq.com/msgrd?v=3&uin=&site=1234567890&menu=yes">
唤醒微信:<a href="weixin://" onclick="PIWI_SUBMIT.Weixin_Open()" >
注:唤醒QQ链接中的1234567890换成对应的QQ号即可,如换了后不能正常使用需要步骤:
1、搜索QQ推广进入官网
2、进入推广工具界面
3、开通免费推广,获取下方的代码,替换上对应的QQ即可。
文章:安卓苹果手机不同qq客服在线代码 发表时间:2018-01-24, 15:07:00
#645
作者:广西南宁市
Load加载页面
加载页面等待界面 css3
加载页面等待界面 css3
<style>body {
display:flex;
font-size:2rem;
overflow:hidden;
}
.Box {
position:absolute;
width:100vw;
height:100vh;
background-color:#fff;
filter:blur(4vmin) contrast(100);
}
.BigCircle,.SmallCircle {
position:absolute;
top:50%;
left:50%;
background-color:#000;
}
.BigCircle {
width:30vmin;
height:30vmin;
margin:-15vmin;
border-radius:50%;
}
.SmallCircle {
width:15vmin;
height:15vmin;
margin:-7.5vmin;
background-color:#000;
border-radius:50%;
animation:move 1.5s infinite alternate cubic-bezier(0.18,0,0.26,1);
}
.SmallCircle:nth-child(1) {
--degree:0deg;
animation-delay:0s;
background-color:red;
}
.SmallCircle:nth-child(2) {
--degree:45deg;
animation-delay:-0.375s;
background-color:#ffbf00;
}
.SmallCircle:nth-child(3) {
--degree:90deg;
animation-delay:-0.75s;
background-color:#80ff00;
}
.SmallCircle:nth-child(4) {
--degree:135deg;
animation-delay:-1.125s;
background-color:#00ff40;
}
.SmallCircle:nth-child(5) {
--degree:180deg;
animation-delay:-1.5s;
background-color:cyan;
}
.SmallCircle:nth-child(6) {
--degree:225deg;
animation-delay:-1.875s;
background-color:#0040ff;
}
.SmallCircle:nth-child(7) {
--degree:270deg;
animation-delay:-2.25s;
background-color:#8000ff;
}
.SmallCircle:nth-child(8) {
--degree:315deg;
animation-delay:-2.625s;
background-color:#ff00bf;
}
.SmallCircle:nth-child(9) {
--degree:360deg;
animation-delay:-3s;
background-color:red;
}
@keyframes move {
0% {
transform:rotate(var(--degree)) translateY(0);
}
70%,100% {
transform:rotate(var(--degree)) translateY(-30vmin);
}
}</style><div class="Box">
<div class="BigCircle"></div>
<div class="SmallCircle"></div>
<div class="SmallCircle"></div>
<div class="SmallCircle"></div>
<div class="SmallCircle"></div>
<div class="SmallCircle"></div>
<div class="SmallCircle"></div>
<div class="SmallCircle"></div>
<div class="SmallCircle"></div>
</div>
Run code
Cut to clipboard
文章:常用html、demo代码 发表时间:2018-01-24, 14:43:43
#646
作者:广西南宁市
简单的拖拽示例
<span id="span1"></span>
<br><span id="span2"></span><br>
<div id="div1" style="background-color: Green; border: 1px solid red; height: 100px;
top: 100px; left: 100px; width: 100px; position: absolute;" onmousedown="mouseDown(this,event)" onmousemove="mouseMove(event)" onmouseup="mouseUp(event)">
</div>
<script>
var mouseX, mouseY;
var objX, objY;
var isDowm = false; //是否按下鼠标
function mouseDown(obj, e) {
obj.style.cursor = "move";
objX = div1.style.left;
objY = div1.style.top;
mouseX = e.clientX;
mouseY = e.clientY;
isDowm = true;
}
function mouseMove(e) {
var div = document.getElementById("div1");
var x = e.clientX;
var y = e.clientY;
if (isDowm) {
div.style.left = parseInt(objX) + parseInt(x) - parseInt(mouseX) + "px";
div.style.top = parseInt(objY) + parseInt(y) - parseInt(mouseY) + "px";
document.getElementById("span1").innerHTML = "x:" + div.style.top + " " + "y:" + div.style.left;
}
}
function mouseUp(e) {
if (isDowm) {
var x = e.clientX;
var y = e.clientY;
var div = document.getElementById("div1");
div.style.left = (parseInt(x) - parseInt(mouseX) + parseInt(objX)) + "px";
div.style.top = (parseInt(y) - parseInt(mouseY) + parseInt(objY)) + "px";
document.getElementById("span2").innerHTML = "x:" + div.style.top + " " + "y:" + div.style.left;
mouseX = x;
rewmouseY = y;
div1.style.cursor = "default";
isDowm = false;
}
}</script>
Run code
Cut to clipboard
文章:常用html、demo代码 发表时间:2018-01-24, 14:42:41
<body> <script>//requestAnimationFrame兼容写法 if(!window.requestAnimationFrame){ var lastTime = 0; window.requestAnimationFrame = function(callback){ var currTime = new Date().getTime(); var timeToCall = Math.max(0,16.7-(currTime - lastTime)); var id = window.setTimeout(function(){ callback(currTime + timeToCall); },timeToCall); lastTime = currTime + timeToCall; return id; } } if (!window.cancelAnimationFrame) { window.cancelAnimationFrame = function(id) { clearTimeout(id); }; } //事件处理程序兼容写法 function addEvent(target,type,handler){ if(target.addEventListener){ target.addEventListener(type,handler,false); }else{ target.attachEvent('on'+type,function(event){ return handler.call(target,event); }); } } /*******生成元素*******/ var list = document.createElement('ul'); list.id = 'list'; list.innerHTML = '<li id="menuTop">回到顶部</li>\ <li id="menuFavour">点赞(<span id="favourNum">0</span>赞)</li>\ <li id="menuCommand">评论</li>'; document.body.appendChild(list); /*******添加样式**********/ function loadStyles(str){ var style = document.createElement("style"); style.type = "text/css"; try{ style.innerHTML = str; }catch(ex){ style.styleSheet.cssText = str; } var head = document.getElementsByTagName('head')[0]; head.appendChild(style); } loadStyles("#list{margin: 0!important;\ padding: 0!important;\ width: 120px;\ text-align: center;\ cursor: pointer;\ font:20px/40px '宋体';\ background-color: #eee;\ position:fixed;\ display:none;}\ #list li{list-style:none!important;}\ #list li:hover{background-color: lightblue;color: white;font-weight:bold;}"); //DOM结构稳定后,再操作 addEvent(window,'load', contextMenuLoad); function contextMenuLoad(){ /********显示和隐藏菜单***********/ addEvent(document,'click',function(){ list.style.display = 'none'; }) //右键点击时,菜单显示 document.oncontextmenu = function(e){ e = e || event; //通常情况下,菜单的位置就是鼠标的位置 list.style.left = e.clientX + 'px'; list.style.top = e.clientY + 'px'; //当鼠标的位置到视口底部的位置小于菜单的高度,则鼠标的位置为菜单的底部位置 if(document.documentElement.clientHeight - e.clientY < list.offsetHeight){ list.style.top = e.clientY - list.offsetHeight + 'px'; } //当鼠标的位置到视口右侧的位置小于菜单的宽度,则视口的右侧为菜单的右侧 if(document.documentElement.clientWidth - e.clientX < list.offsetWidth){ list.style.left = document.documentElement.clientWidth - list.offsetHeight + 'px'; } list.style.display = 'block'; //点击右键的同时按下ctrl键,那么将显示默认右键菜单 if(e.ctrlKey){ list.style.display = 'none'; //如果只是点击右键,则显示自定义菜单 }else{ return false; } } /*********回到顶部功能*********/ var timer = null; menuTop.onclick = function(){ cancelAnimationFrame(timer); //获取当前毫秒数 var startTime = +new Date(); //获取当前页面的滚动高度 var b = document.body.scrollTop || document.documentElement.scrollTop; var d = 500; var c = b; timer = requestAnimationFrame(function func(){ var t = d - Math.max(0,startTime - (+new Date()) + d); document.documentElement.scrollTop = document.body.scrollTop = t * (-c) / d + b; timer = requestAnimationFrame(func); if(t == d){ cancelAnimationFrame(timer); } }); }; /*********点赞功能**********/ //模拟原始点赞按钮的点击事件 var digg = document.getElementById('div_digg'); if(digg){ menuFavour.onclick = digg.children[0].onclick; } //获取赞成数的函数 function getfavourNum(){ if(digg){ favourNum.innerHTML = digg.children[0].children[0].innerHTML; } } //页面载入时获取赞成数 getfavourNum(); if(menuFavour.addEventListener){ menuFavour.addEventListener('click',function(){ setTimeout(function(){ getfavourNum(); },2000); }) }else{ menuFavour.attachEvent('onclick',function(){ setTimeout(function(){ getfavourNum(); },2000); }) } /*********评论功能*********/ menuCommand.onclick = function(){ document.getElementById('comment_form_container').scrollIntoView(); } } </script></body>