jQuery不适用于按钮事件

时间:2016-08-20 17:31:04

标签: javascript jquery html css css3

var myVar;
        function colorChanger() {
                myVar = setInterval(function() { 
                var r,g,b,shadow,bottom,top;
                r = Math.floor((Math.random() * 253 ) + 1);
                g = Math.floor((Math.random() * 253 ) + 1);
                b = Math.floor((Math.random() * 253 ) + 1);
                shadow = Math.floor((Math.random() * 20 ) + 5);
                bottom = Math.floor((Math.random() * 80 ) + 1);
                    bbottom = Math.floor((Math.random() * 80 ) + 7);
                    ttop = Math.floor((Math.random() * 180 ) + 6);
                top = Math.floor((Math.random() * 200 ) + 9);
                size = (Math.random() * 100 ) + 10;
                   /* $("*").css("box-shadow",""+top+"px 0 "+shadow+"px rgb("+r+","+g+","+b+"), "+(-top)+"px 0 "+shadow+"px rgb("+r+","+g+","+b+"),0 "+(-bottom)+"px "+shadow+"px rgb("+r+","+g+","+b+"),0 "+(bottom)+"px "+shadow+"px rgb("+r+","+g+","+b+")"); */
                    $("#startinterval").css("bottom","50%");
                    $("#startinterval").css("top",ttop+"px");
                document.getElementById("123").style.color = "rgba("+r+","+g+","+b+",0.3)";   
                document.getElementById("123").style.textShadow = top+"px "+(bottom)+"px "+shadow+"px rgb("+r+","+g+","+b+"), "+(-top)+"px "+bottom+"px "+shadow+"px rgb("+r+","+g+","+b+"),"+top+"px "+(-bottom)+"px "+shadow+"px rgb("+r+","+g+","+b+"),"+(-top)+"px "+(-bottom)+"px "+shadow+"px rgb("+r+","+g+","+b+")";
                    document.getElementById("123").style.textShadow = top+"px 0 "+shadow+"px rgb("+r+","+g+","+b+"), "+(-top)+"px 0 "+shadow+"px rgb("+r+","+g+","+g+"),0 "+(-bottom)+"px "+shadow+"px rgb("+b+","+g+","+b+"),0 "+(bottom)+"px "+shadow+"px rgb("+r+","+g+","+b+")",top+"px "+(bottom)+"px "+shadow+"px rgb("+r+","+g+","+b+"), "+(-top)+"px "+bottom+"px "+shadow+"px rgb("+g+","+r+","+b+"),"+top+"px "+(-bottom)+"px "+shadow+"px rgb("+r+","+g+","+b+"),"+(-top)+"px "+(-bottom)+"px "+shadow+"px rgb("+r+","+g+","+b+")";
                document.getElementById("13").style.backgroundColor = "rgba("+b+","+r+","+g+",0.2)";
                document.getElementById("13").style.bottom = bottom+"%";
                document.getElementById("13").style.top = top+"%";
                document.getElementById("choosen").innerHTML = "rgb("+r+","+g+","+b+")";
                $("button").click(function() {
                    $("button").css({"border-radius":bottom+"px"});
                });
            }, 20);
        }

HTML code:

    <div align="center">
      <h2 style="font-weight: 900;font-size: 40px, -webkit-animation-delay: 5s;"><p id="123">Random Text</p></h2>
<button class="btn btn-info" onclick="colorChanger()" id="startinterval">start Animation</button>
<button onclick="stopColor()">stop Animation</button> 
      </div>

我最近开始使用jQuery,如果这是一个蹩脚的问题,我真的很抱歉。在上面的代码中单击按钮,它应该将按钮的半径更改为“变量”值,但它不起作用。我尝试使用className,element-id但没有运气。任何帮助将不胜感激。谢谢。

3 个答案:

答案 0 :(得分:1)

对于按钮上的触发点击事件,您必须添加以下行

    $("button").trigger( "click" );
    $("button").click(function() {
                    $("button").css({"border-radius":bottom+"px"});
                });

这将触发按钮上的click事件。

答案 1 :(得分:0)

你不能只为该函数添加另一个声明......

document.getElementById("[the buttons id]").style.borderRadius = '8px';

没有必要将jQuery抛入非jQuery函数。 (不是说这是一个问题,只是没必要)。

答案 2 :(得分:-1)

您的代码有语法错误。 border-radius和pixels应该用&#39;,&#39;

分隔

correct syntax: $("button").css("border-radius",variable+"px");