0

ストップ ウォッチを使用して、従業員が x 時間あたりに支払われる金額を表示しようとしています。ユーザーに給与を入力してから、この数値をスクリプトに渡すことができません。結果として NaN を取得し続けます。「プロンプト」機能を使用するのは簡単ですが、ページに何らかの入力をしたいと思います。

<html>

<head>
<style>
body {
    background: #0e415f;
    min-width:800px;
    max-width:2400px;
    font-family: Omnes, Myriad Pro, arial, Helvetica;
    color: #f1a400;}

.header {
    width: 800px;
    margin: 0 auto;}

.clock {
    border: 3px solid #f1a400 double;
    border-radius: 10px;
    border-style: double;
    width: 600px;
    margin: 20 auto;    

    font-size: 10em;
    text-align:center;}

.money {
    border: 3px solid #f1a400 double;
    border-radius: 10px;
    border-style: double;
    width: 600px;
    margin: 20 auto;

    font-size: 10em;
    text-align:center;}

.buttons {
    width: 350px; 
    margin: 20 auto;}   

.button_style{
    height:50px;
    width:100px;
    font-size:20px;
    margin: 0 .3em;
    background: #f1a400;
    border-radius: 10px;
    border: 0;}
</style>



<script type="text/javascript">
function getSalary()
      {
        var salaryAm = document.getElementById("salaries");
        var salary = salaryAm.value;}


var seconds=-1.0; /* To start clock at 0 seconds */
var min=0;
var time;
var secPay = Number(salary)/(52*40*60*60); /* Weeks * Hours * Minutes * Seconds */
var timerPay = 0; 

function timer(){
        seconds++;       

        if(seconds>59){
                min++;
                document.getElementById("mins").innerHTML=padTimer(min);
                seconds=0;}

        document.getElementById("secs").innerHTML=padTimer(seconds);    
        document.getElementById("money").innerHTML=parseFloat(secPay*timerPay++).toFixed(2);
        };

function padTimer(x) {
    if (x<=9) { x = ("0"+x); }
    return x;}

function start(){
    time=setInterval(timer, 1000);
    timer;}


function pause() { 
    clearInterval(time);
    seconds--;
    timerPay--;};

function reset(){
    seconds=-1.0;
    timerPay=0;
    time=0;
    if (min !=0){
        min=0;}};
</script>
</head>

<body>
 <input id="salaries" type="text">

<div class="header"><img src="breakcalc.png"></div>

<div class="clock">
    <span id="mins" >00</span>:<span id="secs">00</span><br>
</div>

<div class="money">
    <span>$ </span><span id="money">0.00</span>
</div>

<div class="buttons">
    <a href="#" id="button" onclick="start()" ondblclick="return false;"><button class="button_style">Start</button></a>
    <a href="#" id="button" onclick="pause()"><button class="button_style">Stop</button></a>
    <a href="#" id="button" onclick="reset()"><button class="button_style">Reset</button></a>
</div>
</body>

</html>
4

3 に答える 3

0 
var secPay = Number(salary)/(52*40*60*60); /* Weeks * Hours * Minutes * Seconds

この var が設定された時点で、グローバルではなく関数内にのみありますsalary。NaNまた、 を呼び出すことはありませんgetSalary()。私は提案しますonclick="getSalary();start()"

作業スクリプトは次のとおりです。

<html>

<head>
<style>
body {
    background: #0e415f;
    min-width:800px;
    max-width:2400px;
    font-family: Omnes, Myriad Pro, arial, Helvetica;
    color: #f1a400;}

.header {
    width: 800px;
    margin: 0 auto;}

.clock {
    border: 3px solid #f1a400 double;
    border-radius: 10px;
    border-style: double;
    width: 600px;
    margin: 20 auto;    

    font-size: 10em;
    text-align:center;}

.money {
    border: 3px solid #f1a400 double;
    border-radius: 10px;
    border-style: double;
    width: 600px;
    margin: 20 auto;

    font-size: 10em;
    text-align:center;}

.buttons {
    width: 350px; 
    margin: 20 auto;}   

.button_style{
    height:50px;
    width:100px;
    font-size:20px;
    margin: 0 .3em;
    background: #f1a400;
    border-radius: 10px;
    border: 0;}
</style>



<script type="text/javascript">
var salary;
var secPay;
function getSalary()
      {
        salary = Number(document.getElementById("salaries").value);
        secPay = salary /(52*40*60*60); /* Weeks * Hours * Minutes * Seconds */

        }


var seconds=-1.0; /* To start clock at 0 seconds */
var min=0;
var time;
var timerPay = 0; 
alert 
function timer(){
        seconds++;       

        if(seconds>59){
                min++;
                document.getElementById("mins").innerHTML=padTimer(min);
                seconds=0;}

        document.getElementById("secs").innerHTML=padTimer(seconds);    
        document.getElementById("money").innerHTML=parseFloat(secPay*timerPay++).toFixed(2);
        };

function padTimer(x) {
    if (x<=9) { x = ("0"+x); }
    return x;}

function start(){
    time=setInterval(timer, 1000);
    timer;}


function pause() { 
    clearInterval(time);
    seconds--;
    timerPay--;};

function reset(){
    seconds=-1.0;
    timerPay=0;
    time=0;
    if (min !=0){
        min=0;}};
</script>
</head>

<body>
 <input id="salaries" type="text">

<div class="header"><img src="breakcalc.png"></div>

<div class="clock">
    <span id="mins" >00</span>:<span id="secs">00</span><br>
</div>

<div class="money">
    <span>$ </span><span id="money">0.00</span>
</div>

<div class="buttons">
    <a href="#" id="button" onclick="getSalary();start()" ondblclick="return false;"><button class="button_style">Start</button></a>
    <a href="#" id="button" onclick="pause()"><button class="button_style">Stop</button></a>
    <a href="#" id="button" onclick="reset()"><button class="button_style">Reset</button></a>
</div>
</body>

</html>
于 2013-09-16T21:18:52.893 に答える