个人中心
gpt4 book ai didi

javascript - JavaScript 中加载或单击时动画不播放

转载 作者：行者123 更新时间：2023-12-03 08:09:23 26 4
gpt4 key购买 nike

使用 h1 标签上的动画以及单击 h2 标签时的 SlideDown 和 SlideUp 制作小费计算器。问题是，没有任何动画正在播放，并且单击事件也不起作用。这是 HTML 文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tip Calculator</title>
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="stylesheet" href="midtermcss.css">
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
    <script src="animationJS.js"></script>
</head>

<body>
    <section id="faqs">
        <h1>Tip facts</h1>
        <h2>Things to know before you tip</h2>
        <div>
            <p>Tips Account for 44 Billion dollars of the Food Industry</p>
            
            <p>7 States require servers to be paid minimum wage like everyone else</p>
                <ul>
                    <li>Minnessota</li>
                    <li>Montana</li>
                    <li>Washington</li>
                    <li>Oregon</li>
                    <li>California</li>
                    <li>Nevada</li>
                    <li>Alaska</li>
                </ul>
            <p>Current Federal minimum tipped wage is $2.13 per hour can you live on that?</p>
            <p>Charging with Credit/Debit cards tends to reduce the average tip</p>
        </div>      
    </section>

    <section id="js">
    <h1 id="heading">Tip Calculator</h1>
        <label for="billAmount">Total Amount Of Bill:</label>
        <input type="text" id="billAmount"><br>
        
        <label for="percentTip">Percent To Tip:</label>
        <input type="text" id="percentTip"><br>
        
        <label for="amountPeople">How Many People?:</label>
        <input type="text" id="amountPeople"><br>
        
        <label for="totalTip">Tip Total:</label>
        <input type="text" id="totalTip"><br>
        
        <label>&nbsp;</label>
        <input  type="button" id="calculate" value="Calculate"><br>
    </section>
</body>
</html>

这是 JS 文件:

$(document).ready(function() {
    // runs when an h2 heading is clicked
    $("#faqs h2").toggle(
        function() {
            $(this).toggleClass("minus");
            $(this).next().slideDown(1000, "easeOutBounce");
        },
        function() {
            $(this).toggleClass("minus");
            $(this).next().slideUp(1000, "easeInBounce");
        }
    );

    $("#faqs h1").animate({
        fontSize: "400%",
        opacity: 1,
        left: "+=375"
    }, 1000, "easeInExpo")
        .animate({
        fontSize: "175%",
        left: "-=200"
    }, 1000, "easeOutExpo");

    $("#faqs h1").click(function() {
        $(this).animate({
            fontSize: "400%",
            opacity: 1,
            left: "+=375"
        }, 2000, "easeInExpo")
            .animate({
            fontSize: "175%",
            left: 0
        }, 1000, "easeOutExpo");
    });

});


var $ = function(id) {
    return document.getElementById(id);
}
var calculateClick = function() {
    var billAmount = parseFloat($("billAmount").value);
    var percentTip = parseFloat($("percentTip").value);
    var amountPeople = parseInt($("amountPeople").value);

    if (isNaN(billAmount) || billAmount <= 0) {
        alert("Your bill can't be 0 or less.");
    } else if (isNaN(percentTip) || percentTip <= 0) {
        alert("The percentage should be a whole number.");
    } else if (isNaN(amountPeople) || amountPeople <= 0) {
        alert("You are 1 person never count yourself as less.");
    } else {
        var total = billAmount * (percentTip / 100) / amountPeople;
        $("totalTip").value = total.toFixed(2);
    }
}

window.onload = function() {
    $("calculate").onclick = calculateClick;
    $("billAmount").focus();
}

最后但并非最不重要的 CSS 文件，因为其中列出了 open 类和 minus 类

        * {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: white;
    margin: 0 auto;
    width: 500px;
    border: 3px solid blue;
}
section {
    padding: 0 1em .5em;
}
section.js {
    padding: 0 1em .5em;
}
h1 {
    text-align: center;
    margin: .5em 0;
}
label {
    float: left;
    width: 10em;
    text-align: right;
}
input {
    margin-left: 1em;
    margin-bottom: .5em;
}
#faqs h1 { 
    position: relative;
    left: -168px;
    font-size: 125%;
    color: blue;
}
h2 {
    font-size: 120%;
    padding: .25em 0 .25em 25px;
    cursor: pointer;
    background: url(images/plus.png) no-repeat left center;
}
h2.minus {
    background: url(images/minus.png) no-repeat left center;
}
div.open {
    display: block;
}
ul {
    padding-left: 45px;
}
li {
    padding-bottom: .25em;
}
p {
    padding-bottom: .25em;
    padding-left: 25px;
}

我一生都无法弄清楚为什么动画可以在单独的测试文件中工作，但是当我现在在小费计算器中使用它们时，它们却不起作用。我正在使用Murach's JavaScript and jQuery book但这部分非常难以理解。

最佳答案

您的问题是您包含了 jQuery，但后来在全局范围内重新定义了 $:

var $ = function(id) {
    return document.getElementById(id);
}

fiddle :http://jsfiddle.net/AtheistP3ace/u0von3g7/

我所做的只是更改保存该函数的变量名称，并将其替换为您正在使用它的区域。具体来说:

var getById = function(id) {
    return document.getElementById(id);
}
var calculateClick = function() {
    var billAmount = parseFloat(getById("billAmount").value);
    var percentTip = parseFloat(getById("percentTip").value);
    var amountPeople = parseInt(getById("amountPeople").value);

    if (isNaN(billAmount) || billAmount <= 0) {
        alert("Your bill can't be 0 or less.");
    } else if (isNaN(percentTip) || percentTip <= 0) {
        alert("The percentage should be a whole number.");
    } else if (isNaN(amountPeople) || amountPeople <= 0) {
        alert("You are 1 person never count yourself as less.");
    } else {
        var total = billAmount * (percentTip / 100) / amountPeople;
        getById("totalTip").value = total.toFixed(2);
    }
}

window.onload = function() {
    getById("calculate").onclick = calculateClick;
    getById("billAmount").focus();
}

$ 只是 jQuery 的简写。当您包含 jQuery 时，它会为您创建两个执行相同操作的函数。 jQuery 和 $。如果您将 $ 设置为等于其他内容，您实际上已经覆盖了页面中包含的 jQuery 库，并且它将不再按您的预期运行。所有 jQuery 功能都从使用 $ 或 jQuery 函数开始。一旦返回一个 jQuery 对象，您就可以开始链接和调用这些对象的函数，但要获取 jQuery 对象，您需要使用 jQuery 或 $ 函数。

您在上面的评论中提到，您的老师让您这样做是为了解决某些问题。我想这是因为 jQuery 最初并未包含在内，所以他只是创建了 $ 选择器函数来让您移动，但我希望他解释为什么这样做以及它如何影响以后的事情。

关于javascript - JavaScript 中加载或单击时动画不播放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34210015/

26 4 0
文章推荐： javascript - 使用 localStorage 记住用户是否已经投票
文章推荐： JavaScript 偏移/分页问题
文章推荐： javascript - 如何从 json 字段数组动态创建没有 jquery 的表单？
文章推荐： javascript - 在 Meteor.js 中， stub 的数据库写入是否总是在 stub 完成后立即完成？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com