P酱的动态 - SegmentFault 思否

P酱查看完整档案

3183声望

www.perichr.org 编辑

编辑

诶嘿~~~
(<ゝω·)☆~Kira

加关注发私信

关注了11 人

粉丝53 人

个人动态

P酱回答了问题 · 3月3日

css动画，如何实现点击/长按时背景色切换的动画效果（背景从中间向两边延展）

animation + keyframes

简易样例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>背景渐变动画</title>
<style type="text/css">
div {
    width:300px;
    height:48px;
    background:#eee;
    text-align:center;
}
div:active{
    /*执行动画*/
    animation:show 0.5s 1;
    /*停止在最后一帧*/
    animation-fill-mode:forwards;
}
@keyframes show{
    10%{
        background:radial-gradient(Circle,#999 40%,  #999 40%,  #eee 40%); 
    }
    20%{
        background:radial-gradient(Circle,#999 60%,  #999 60%, #eee 60%); 
    }
    40%{
        background:radial-gradient(Circle,#999 80%,  #999 80%, #eee 80%);
    }
    60%{
        background:radial-gradient(Circle,#999 90%, #999 90%,, #eee 90%);
    }
    80%{
        background:radial-gradient(Circle,#999 95%, #999 95%, #eee 95%);
    }
    100%{
        background:radial-gradient(Circle,#999 100%, #999 100%, #eee 100%);
    }
}
</style>
</head>
<body>
<div>内容</div>    
</body>
</html>

animation + keyframes简易样例如下： {代码...}

关注 3 回答 2

P酱回答了问题 · 2016-06-28

切换链接页面新增css

你是单页应用？拆成多页应用第一页也用上jQueryMobile 重构第一页的页面结构避免受jQueryMobile影响

关注 2 回答 1

P酱赞了回答 · 2016-06-26

解决JavaScript动态创建div问题怎么保证它的唯一

使用惰性函数（这个方法很巧妙哦~）

function createDiv(){
  var div = document.createElement("div");
  div.innerHTML = "测试";
  document.body.appendChild(div);
  createDiv = function(){
     return div;
  }
  return div
 }

使用单例模式（不赘述了，答案里有）

使用惰性函数（这个方法很巧妙哦~） {代码...} 使用单例模式（不赘述了，答案里有）

关注 10 回答 7

P酱回答了问题 · 2016-06-26

解决求大神们看看这段编的问题出在哪里？

你的iBut是一个HTMLCollection，使用for对其循环的的话，除了以数字标注的子项以外，还有item、namedItem、length三个属性会被取出来。

关注 7 回答 8

P酱回答了问题 · 2016-06-26

解决jQuery hide/show方法同时使用时的问题

先给来源： .show()
代码不明查api

With no parameters, ...... The matched elements will be revealed immediately, with no animation.
When a duration, a plain object, or a "complete" function is provided, .show() becomes an animation method.

简而言之，无参数的.show()就是直接设置display而非动画，有参数时则是动画。.hide()同。

动画与非动画是两个完全不同的过程，动画会在show/hide命令执行时向当前动画序列写入指令而后由动画序列管理并依次执行，非动画则在show/hide命令执行时直接执行display设置。

题主所提slide和'fade`系列命令都是动画命令。

With no parameters, ...... The matched elements will be revealed immediately, with no animation. When a duration, a plain object, or a "complete" function is provided, .show() becomes an animation method.显示全部

关注 4 回答 3

P酱赞了回答 · 2016-06-26

循环json时为什么会多出一个undefined

有几点建议：

出现undefinedHello主要是因为，t没有初始化，又使用了+=， undefined +"Hello world" 就成了现在的结果。
2.最好不要使用evel，这是非常危险以及不推荐的.

3.这段代码，改成这样可能好点。

var text='[{"id":"1","title":"Hello world!","created":"1457222400","content":"Hello world"}]',
     t = "";
var json = JSON.parse(text);
for(var i=0;i < json.length; i++){
    t+=json[i].title + "</br>"
}
box.innerHTML = t ;

出现undefinedHello主要是因为，t没有初始化，又使用了+=， undefined +"Hello world" 就成了现在的结果。2.最好不要使用evel，这是非常危险以及不推荐的.

关注 4 回答 3

P酱赞了回答 · 2016-06-26

循环json时为什么会多出一个undefined

你用的 +=，目测变量 t 没有初始化： t = ''。

关注 4 回答 3

P酱回答了问题 · 2016-06-26

解决JavaScript 有名/匿名函数声明的竞争

简单的说，变量声明与函数声明会提升至作用域代码执行前。
其中，变量声明是指var f部分，函数声明是指function f(){ ... }的整个部分。
最后，f=...部分是赋值而不是声明。

提升的结果就是同 @tryzf 提供的答案（这里就不再重复了），两个声明部分被提升至代码作用域的最前端，代码中就只剩下赋值的那一段了。

简单的说，变量声明与函数声明会提升至作用域代码执行前。其中，变量声明是指var f部分，函数声明是指function f(){ ... }的整个部分。最后，f=...部分是赋值而不是声明。

关注 3 回答 2

P酱赞了回答 · 2016-06-26

解决JavaScript 有名/匿名函数声明的竞争

  var f;
  function f(){
    console.log('2');
  }      
  f= function(){
    console.log(1);
  }
  f()

这样写应该就比较好解释为什么是1了，变量和函数声明都提升了。

{代码...} 这样写应该就比较好解释为什么是1了，变量和函数声明都提升了。

关注 3 回答 2

P酱回答了问题 · 2016-06-26

解决github pages 域名过期了，但是解析还在

由于github会对域名进行缓存，取消域名的官方做法是，清空CNAME文件，提交一次。
如果直接删除项目，无法触发后台的域名更新操作。你现在只能通过github的邮件支持请求帮助了。

另外，脑补了一个“删除项目后，新建同名项目并提交空CNAME文件”的方法，但未经尝试，不确定是否有效。
你可以试一下。万一能行呢……

由于github会对域名进行缓存，取消域名的官方做法是，清空CNAME文件，提交一次。如果直接删除项目，无法触发后台的域名更新操作。你现在只能通过github的邮件支持请求帮助了。

关注 3 回答 2

P酱赞了回答 · 2016-06-26

为什么ie打开的网页对话框总是那么小？？

HTML DOM open() 方法

window.open('http://www.baidu.com','','width=800,height=600')

HTML DOM open() 方法 {代码...}

关注 4 回答 3

P酱赞了文章 · 2016-03-04

最大子序列和O(N)算法简单分析『神兽必读』

对于一个全为负数的序列，最长公共子序列的和值应该是0，理由在于，由0个整数所组成的空子序列也是一个子序列——最大子序列和问题从O（N^3）到线性的算法

其他情况大家也能理解了。
先看算法，算法来自《数据结构与算法分析——C语言描述》

int
MaxSubsequenceSum(const int A[], int N)
{
    int ThisSum, MaxSum, j;
    for(j = 0; j < N; j++) /*1*/
    {
        ThisSum += A[j];   /*2*/
        
        if(ThisSum > MaxSum) /*3*/
            MaxSum = ThisSum; /*4*/
        else if(ThisSum < 0) /*5*/
            ThisSum = 0;   /*6*/
    }
    
    return MaxSum;
}

可以看到算法中重要的位置都标注出来了。
显然这个算法有一个for循环，整体时间复杂度可以看作O(N)。
就算法正确性来分析，首先假设这样的输入：-2, -3, 5, 6, -1, 8, 9

扫描到-2或-3的时候，执行/*2*/，/*5*/条件成立，所以执行/*6*/，此时ThisSum依然是0，MaxSum也是0

为什么不把开头的负数也加和到最大子序列的和中去呢，显然我们做一个假设就很明显了，如-1, 1, 2, 3, 4, 5，没有开头的-1结果更大。

继续扫描5, 6，执行/*2*/，/*3*/条件成立，所以执行/*4*/，此时ThisSum是11，MaxSum也是11
继续扫描到-1，执行/*2*/，ThisSum变成了10，此时条件/*3*/和/*5*/都不成立，所以MaxSum仍然是11，只不过ThisSum变小了
继续扫描到8，执行/*2*/，ThisSum变成18，此时条件/*3*/成立，执行/*4*/，MaxSum从上一次结果的11变成18。
依此类推

我想这个分析就到此结束了。

UPDATE
或许你会想到了，有时候最大子序列和是某一小段的话，比如是后半段，但是这个算法明显给人的感觉就是一路加和过来呀，好像是认为越长的子序列和越大呀？！这里继续做一个假设：5, 6,-2, -3,-1, -7,8, 9
明显最大的子序列是8,9，中间跨度的那些负数都不应该加起来，这样的想法的确是对的，但是这个算法也做到了啊。
加和5,6后前面得到的最大的MaxSum一直都是11，而ThisSum才会减少，加上-7时ThisSum会变成-2，此时ThisSum会被修正为0，MaxSum没有改变还是11；接下来ThisSum加上8,9得到的ThisSum是17，要比之前的MaxSum大，所以MaxSum也被替换成17了。

这些说明都比较粗糙，见谅！

查看原文

可以看到算法中重要的位置都标注出来了。显然这个算法有一个for循环，整体时间复杂度可以看作O(N)。就算法正确性来分析，首先假设这样的输入：-2, -3, 5, 6, -1, 8, 9

赞 1 收藏 0 评论 3

P酱赞了回答 · 2016-03-03

解决正则表达式急求

JS的，用/ck/i即可。

/ck/i.test('abcdef'); // false
/ck/i.test('abckmm'); // true
/ck/i.test('abCkmm'); // true
/ck/i.test('abCKmm'); // true

Java的：

Pattern reg = Pattern.compile("ck", Pattern.CASE_INSENSITIVE);
System.out.println(reg.matcher("abcdef").find()); // false
System.out.println(reg.matcher("abckmm").find()); // true
System.out.println(reg.matcher("abCkmm").find()); // true
System.out.println(reg.matcher("abCKmm").find()); // true

JS的，用/ck/i即可。 {代码...} Java的： {代码...}

关注 4 回答 3

P酱回答了问题 · 2016-03-03

在页面刚好平铺的情况下，触发window.onscroll.

不能scroll怎么触发scroll……换鼠标滚轮事件吧。firefox的DOMMouseScroll和其他的mousewheel

关注 3 回答 2

P酱回答了问题 · 2016-03-02

解决想系统的学习JS，可是发现有些名词都理解不了，是不是没有天赋？

不是没天赋，是看得不够多、练得不够多。

关注 10 回答 8

P酱赞了回答 · 2016-03-02

解决如何获取id_of_setinterval？

你给个变量不就得了。

   window.addEventListener('load', fn1, false);
    function fn1() {
        //计时函数
        var timer = null;
        var eleClock = function(a){
            timer = setInterval(
                function() {
                    //do something
                },
                50
            );         
        };
        //点击strCount按钮，开始计时
         strCount.onclick = function() {
            //do something
            eleClock(b);
        }
        
        //点击停止计时按钮，停止计时，问题是如何获取之前的id_of_setinterva
           stopCount.addEventListener('click', function(){
             //do something
            window.clearInterval(timer);
       },false);
    }

你给个变量不就得了。 {代码...}

关注 2 回答 1

P酱赞了回答 · 2016-03-02

解决为什么添加后的行，删除和增加按钮点击都没有反应

$(".glyphicon-trash").click(function () { });
$(".glyphicon-plus").click(function() { });

这两句话发生作用的时候你新增加的按钮都还没得，所以 $(selector) 并没有选中后来添加的节点。
这种情况可以使用父结节代理事件的方式解决

$("table.business_setboxc_01").on("click", ".glyphicon-trash", function() { });
$("table.business_setboxc_01").on("click", ".glyphicon-plus", function() { });

这两句话发生作用的时候你新增加的按钮都还没得，所以 $(selector) 并没有选中后来添加的节点。这种情况可以使用父结节代理事件的方式解决

关注 7 回答 6

P酱回答了问题 · 2016-03-02

解决jquery如何插入值与控制加载？

1、

$('<img>').attr('src', value.img)
$('<a>').text(value.a)

2、

...
var need = true
windows.onscroll = function() {
    $.each(dataelement.data, function(index, value) {
        ...
        if(need) {
            need = false
            var atwo....
            var span...
        }
    })
}
...

1、 {代码...} 2、 {代码...}

关注 4 回答 3

P酱赞了回答 · 2016-03-02

解决怎么防止每次输入都去调ajax？

大体的思路是，本来是立即去做doAjax()的，现在把它放到一个setTimeout()的延时任务。然后，每次触发keyup的时候用clearTimeout()取消上一个延时任务。这样，当键盘事件连续、快速地触发的时候，是没有用的，只有当键盘输入停下，并过了至少一点时间之后，才会真正去执行ajax任务。

比如原本是：

function doAjax() {
    // ajax
}

function handleKeyUp(event) {
    doAjax();
}

修改为：

var timeFlag = null;

function doAjax() {
    // ajax
}

function handleKeyup(event) {
    clearTimeout(timeFlag);
    timeFlag = setTimeout(doAjax, 1000);
}

大体的思路是，本来是立即去做doAjax()的，现在把它放到一个setTimeout()的延时任务。然后，每次触发keyup的时候用clearTimeout()取消上一个延时任务。这样，当键盘事件连续、快速地触发的时候，是没有用的，只有当键盘输入停下，并过了至少一点时间之后，才会真正...显示全部

关注 9 回答 5