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

看起来您需要将 salery 设为全局变量，然后通过在getSalery()函数中调用您的函数来设置它start()。还 parseFloat 来自输入的值。

function getSalary()
      {
        var salaryAm = document.getElementById("salaries");
        salary = parseFloat(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; 
var salary = 0.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);
getSalary()
    timer;}


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

function reset(){
    seconds=-1.0;
    timerPay=0;
    time=0;
    if (min !=0){
        min=0;}};
于 2013-09-16T21:16:25.227 回答
0

将您的变量声明为全局变量，以便您可以访问它们，然后您需要调用该getSalary()方法以便将输入字段中的薪水设置到变量中。

isNaN()另外，使用方法检查号码。

<script type="text/javascript">
var salary;
var seconds=-1.0; /* To start clock at 0 seconds */
var min=0;
var time;
var secPay;
var timerPay = 0; 


// This method will set the salary variable and then return true if the salary is a number.
function getSalary() {
        var salaryAm = document.getElementById("salaries");
        salary = salaryAm.value;
        secPay = Number(salary)/(52*40*60*60); /* Weeks * Hours * Minutes * Seconds */

         return !isNaN(secPay);
 }


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(){
    if (getSalary()) {
        time=setInterval(timer, 1000);
        timer;
    } else {
        alert("please check input");
    } 
  }


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

function reset(){
    seconds=-1.0;
    timerPay=0;
    time=0;
    if (min !=0){
        min=0;}
    document.getElementById("salaries").value = "";//reset input
  };
</script>
于 2013-09-16T21:13:01.347 回答
0 
var secPay = Number(salary)/(52*40*60*60); /* Weeks * Hours * Minutes * Seconds

在设置此 var 时，salaryis NaNAND 它仅在您的函数中，而不是全局的。此外，您永远不会调用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 回答