实时计算脚本不起作用

时间:2017-02-05 12:36:37

标签: javascript jquery

所以首先我有点新的javascript和我不能让我的脚本工作当我把它放在我的网站上,但它工作在小提琴(因为onload)我有脚本在单独的文件所以这里是我现在如何拥有它

的script.js

var start = $('#calcstart'),
end = $('#calcend'),
brk = $('#calcbreak'),
total = $('#calcadded'),
timespan;

$('input').keyup(function () {
    var e = toMins(end.val()),
    s = toMins(start.val()),
    b = toMins(brk.val());
    if (!s || !e)
        return;
    var output = (e - s - b) / 60;
    total.html(Math.floor(output) + ':' + toDouble(Math.round((output % 1) * 60)));
});

function toMins(val) {
    if (!val)
        return 0;
    val = val.split(':');
    return (Number(val[0]) * 60) + Number(val[1] || 0);
}

function toDouble(n) {
    return n < 10 ? ('0' + n) : n;
}

livecalc.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td>Start:</td>
        <td><input id="calcstart" placeholder="hh:mm"></td>
    </tr>
    <tr>
        <td>end:</td>
        <td><input id="calcend" placeholder="hh:mm"></td>
    </tr>
    <tr>
        <td>break:</td>
        <td><input id="calcbreak" placeholder="hh:mm"></td>
    </tr>
    <tr>
        <td>Total:</td>
        <td><span id="calcadded"></span></td>
    </tr>
</table>

https://jsfiddle.net/frilleee/3brha920/1/

所以问题是如何使这个脚本工作?我怎么把它装上去?或者我该怎么办?

Edit1 Okey我不知道怎么开始工作现在dident改变任何东西:我已经用相同的代码测试了2天并且没有工作:S

2 个答案:

答案 0 :(得分:0)

像这样使用script标签

<script src="script.js"></script>

在您的HTML中。将脚本另存为&#39; script.js&#39;并将脚本标记放在body标记内的末尾。

喜欢这个。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table>
<tr><td>Start:</td><td><input id="calcstart" placeholder="hh:mm"></td></tr>
<tr><td>slut:</td><td><input id="calcend" placeholder="hh:mm"></td></tr>
<tr><td>rast:</td><td><input id="calcbreak" placeholder="hh:mm"></td></tr>
<tr><td>Total:</td><td><span id="calcadded"></span></td></tr>
</table>
<script src="script.js"></script>

或者

将整个脚本代码放在script标记内。

<script>
   // Your script here.
</script>

答案 1 :(得分:0)

对于jQuery,您需要将代码包装在

$(document).ready(function(){
   // js and jquery codes in here
});

阅读:https://learn.jquery.com/using-jquery-core/document-ready/

另外,您是否在HTML中包含了script.js文件? 查看开发人员工具&gt;控制台以查找与javascript相关的任何其他错误。