jQuery通过点击按钮从网站上删除所有js

jQuery remove all js from website by clicking on button

本文关键字:删除 js 网站 按钮 jQuery      更新时间:2023-09-26

我的网站concept studio在那个页面上遇到了一些问题,我在表单上键入了动画,我需要在页面中添加一些跳过动画的按钮,但我不知道该怎么做。

function doTypeAnimation() {
    if ($(".hello-form").length === 0) return false;
    function condition(functionName) {
        if (functionName === 0) {
            return false;
        } else if (functionName == 1) {
            finish();
        } else if (functionName == 2) {
            runSecond();
        } else if (functionName == 2.1) {
            runSecondOther();
        } else if (functionName == 3) {
            runThird();
        } else if (functionName == 4) {
            runFourth();
        } else if (functionName == 5) {
            runFifth();
        } else if (functionName == 6) {
            runSixth();
        } else if (functionName == 7) {
            runSeventh();
        } else if (functionName == 8) {
            runEighth();
        } else if (functionName == 8.1) {
            runEighthOne();
        } else if (functionName == 8.2) {
            runEighthTwo();
        } else if (functionName == 9) {
            runNinth();
        } else if (functionName == 10) {
            runTenth();
        }
    }
    var anim = {
        label: function(name, dataSelector, datAttribute, selector, functionName) {
            var lname = $(dataSelector).attr(datAttribute);
            $.each(lname.split(''), function(i, letter) {
                setTimeout(function() {
                    $(selector).html($(selector).html() + letter);
                    if (++i === lname.length) {
                        condition(functionName);
                    }
                }, 500 * i);
            });
        },
        input: function(name, dataSelector, datAttribute, selector, functionName) {
            var iname = $(dataSelector).attr(datAttribute);
            $(selector).show();
            $(selector).attr('placeholder', '');
            $.each(iname.split(''), function(i, letter) {
                setTimeout(function() {
                    var item = $(selector).attr("placeholder");
                    $(selector).attr("placeholder", item + letter);
                    if (++i === iname.length) {
                        condition(functionName);
                    }
                }, 80 * i);
            });
        }
    };
    if ($(".start-project").length > 0) {
        anim.label("title", ".form-title", "data-title", ".form-title", 2.1);
    } else {
        anim.label("title", ".form-title", "data-title", ".form-title", 2);
    }
    function runSecondOther() {
        $(".form-title").after("<br>");
        anim.label("title1", ".form-title1", "data-title", ".form-title1", 2);
    }
    function runSecond() {
        if ($(".start-project").length > 0) {
            $(".form-title1").after("<br>");
        } else {
            $(".form-title").after("<br>");
        }
        $(".form-name").css("display", "inline-block");
        anim.label("fname", ".form-name", "data-name", ".form-name .nname", 3);
    }
    function runThird() {
        anim.label("finame", ".form-name", "data-iname", ".form-name .name", 4);
    }
    function runFourth() {
        $(".form-name .name").addClass("placeholder");
        anim.label("fcname", ".form-name", "data-company", ".form-name .cname", 5);
    }
    function runFifth() {
        if ($(".start-project").length > 0) {
            anim.label("fciname", ".form-name", "data-cmpany-name", ".form-name .company", 8);
        } else {
            anim.label("fciname", ".form-name", "data-cmpany-name", ".form-name .company", 6);
        }
    }
    function runSixth() {
        if ($(".start-project").length > 0) {
            $(".form-mail span").addClass("placeholder");
            $(".form-mail .dot").show();
            $(".form-mail").after("<p style='display: block'><br></p>");
            $(".form-textarea").css("display", "inline-block");
            anim.label("ftname", ".form-textarea", "data-text", ".form-textarea label", 7);
        } else {
            $(".form-name .company").addClass("placeholder");
            $(".form-name .dot").show();
            $(".form-name").after("<br>");
            $(".form-textarea").css("display", "inline-block");
            anim.label("ftname", ".form-textarea", "data-text", ".form-textarea label", 7);
        }
    }
    function runSeventh() {
        if ($(".start-project").length > 0) {
            anim.label("fTextareaName", ".form-textarea", "data-name", ".form-textarea .span", 10);
        } else {
            anim.label("fTextareaName", ".form-textarea", "data-name", ".form-textarea .span", 8);
        }
    }
    function runEighth() {
        if ($(".start-project").length > 0) {
            $(".form-name .company").addClass("placeholder");
            $(".form-name .dot").show();
            $(".form-name").after("<br>");
            $(".form-mail").css("display", "inline-block");
            anim.label("formMailN", ".form-mail", "data-text", ".form-mail .text", 8.1);
        } else {
            $(".form-textarea span").addClass("placeholder");
            $(".form-textarea .dot").show();
            $(".form-textarea").after("<p style='display: block'><br></p>");
            $(".form-mail").css("display", "inline-block");
            anim.label("formMailN", ".form-mail", "data-text", ".form-mail label", 9);
        }
    }
    function runEighthOne() {
        anim.label("formPhoneI", ".form-mail", "data-phone", ".form-mail .phone", 8.2);
    }
    function runEighthTwo() {
        $(".form-mail .phone").addClass("placeholder");
        anim.label("formOr", ".form-mail", "data-or", ".form-mail .or", 9);
    }
    function runNinth() {
        if ($(".start-project").length > 0) {
            anim.label("formMailI", ".form-mail", "data-name", ".form-mail .span", 6);
        } else {
            anim.label("formMailI", ".form-mail", "data-name", ".form-mail .span", 10);
        }
    }
    function runTenth() {
        if ($(".start-project").length > 0) {
            $(".form-textarea span").addClass("placeholder");
            $(".form-textarea .dot").show();
            $(".form-textarea").after("<p style='display: block'><br></p>");
            $(".thanks").css("display", "inline-block");
            anim.label("thanks", ".thanks", "data-text", ".thanks", 1);
        } else {
            $(".form-mail .span").addClass("placeholder");
            $(".form-mail .dot").show();
            $(".form-mail").after("<p style='display: block'><br></p>");
            $(".thanks").css("display", "inline-block");
            anim.label("thanks", ".thanks", "data-text", ".thanks", 1);
        }
    }
    function finish() {
        $(".typed-cursor").hide();
        $(".overlay").hide();
        $(".form-group input, .form-group textarea").val("");
    }
    $(".hello-form form span").focusout(function() {
        var text = $(this).text();
        $(this).next("span").find("input, textarea").val(text);
    });
    $(".hello-form form span").click(function() {
        var text = $(this).text();
        var placeholder = $(this).attr("data-placeholder");
        if (text == placeholder) {
            $(this).text('');
        }
        $("html, body").stop(true, true).animate({
            scrollTop: $(this).position().top - 10
        });
    });
    $(".hello-form").on('keyup', 'span', function(e) {
        var keyCode = e.keyCode || e.which;
        if (keyCode == 9) {
            var text = $(this).text();
            var placeholder = $(this).attr("data-placeholder");
            if (text == placeholder) {
                $(this).text('');
            }
        }
    });
}

这个函数完成了页面上的所有动画,你可以在给定的url上看到动画示例。

我认为使用制表符或逗号是最好的输入,因为用户可能会期望他们跳过动画。该输入的关键代码如下:

$("#textinput").keydown(function(e) {
    e.keyCode; // this value 9 for tab 188 for comma
});

希望这能有所帮助。

SetTimout函数返回一个对象。您可以存储它,并在按下按钮时使用它来取消超时。

一般示例:

function myFunction() {
  myVar = setTimeout(function() { alert("Hello"); }, 3000);
}
function myStopFunction() {
  clearTimeout(myVar);
}

var myVar;
function myFunction() {
  myVar = setTimeout(function() { alert("Hello"); }, 3000);
}
function myStopFunction() {
  clearTimeout(myVar);
}
<html>
<body>
  <input type="button" onClick="myFunction()" value="start"/>
  <input type="button" onClick="myStopFunction()" value="stop"/>
</body>
</html>