增加屏幕上显示的数值

发布于 2024-12-10 07:34:11 字数 1437 浏览 0 评论 0原文

我需要在网页上显示一个数字，当按下向上或向下箭头键时，该数字会增加或减少。我找到/按摩了 javascript 文件来执行此操作，但我似乎无法让它与我的 HTML 一起工作。我试图将它链接到 html 文本框，但它不起作用。

如果有人可以帮助我处理 HTML 来使其正常工作，那就太好了。

var setTimeoutId; 
var keyIs = "up"; 

 function myIncrementFunction()
{
        var num = parseFloat(myText.value)+1;
        myText.value = num; 

}

myText.onkeydown = function(e)
{
keyIs = "down";

if(keyIs == "down")
    {
        var e = e || event ;
        if (e.keyCode == 38)
            {    
                for(var s=0; s<1; s++)
                    setTimeoutId = setTimeout('myIncrementFunction()',100); 
            }
    }
}

myText.onkeyup = function(e)
{ 
 keyIs = "up"; 
}

试过了还是不行..>> ？

number.html

<html>
<head>
<script type="text/javascript" src="number.js"></script>
</head>

<body>

<input type="text" id="myText" />

</body>

</html>

number.js

var myText = document.getElementById("myText");

// Capture keyDown events
myText.onkeydown = function(e) {
// "38" is the up arrow key
if (e.keyCode == 38) {
    // increment the value in the text input
    myText.value++;
// "40" is the down arrow key
} else if (e.keyCode == 40) {
    // decrement the value in the text input
    myText.value--;
}
}

我不明白为什么它在发布的示例中起作用，当我保存文件并在浏览器中打开它时，它不起作用！

我在 OSX Lion 上使用 Chrome/Safari

原文

I need to have a number that's displayed on a web page that will increase or decrease when the up or down arrow keys are pressed. I found/massaged together javascript file to do this but I can't seem to get it to work with my HTML. I was trying to link it to a html textbox but it would not work.

if someone could help me with the HTML to get this working that would be great.

var setTimeoutId; 
var keyIs = "up"; 

 function myIncrementFunction()
{
        var num = parseFloat(myText.value)+1;
        myText.value = num; 

}

myText.onkeydown = function(e)
{
keyIs = "down";

if(keyIs == "down")
    {
        var e = e || event ;
        if (e.keyCode == 38)
            {    
                for(var s=0; s<1; s++)
                    setTimeoutId = setTimeout('myIncrementFunction()',100); 
            }
    }
}

myText.onkeyup = function(e)
{ 
 keyIs = "up"; 
}

Tried this and it still is not working.. > ?

number.html

<html>
<head>
<script type="text/javascript" src="number.js"></script>
</head>

<body>

<input type="text" id="myText" />

</body>

</html>

number.js

var myText = document.getElementById("myText");

// Capture keyDown events
myText.onkeydown = function(e) {
// "38" is the up arrow key
if (e.keyCode == 38) {
    // increment the value in the text input
    myText.value++;
// "40" is the down arrow key
} else if (e.keyCode == 40) {
    // decrement the value in the text input
    myText.value--;
}
}

I don't understand why it works in the example posted and when I save my files and open it in the browser it will not work!

I'm on OSX Lion using Chrome/Safari

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

太阳男子 2024-12-17 07:34:11

看起来有几件事正在发生。首先，正如 jayp 在他的评论中指出的那样，您没有定义 myText 是什么。

其次，我认为你把这个问题过于复杂化了。尝试这样的方法怎么样：

给你的文本输入一个 ID，类似

然后使用类似的东西this：

// Assign our text input to a variable
var myText = document.getElementById("myText");

// Capture keyDown events
myText.onkeydown = function(e) {
    // "38" is the up arrow key
    if (e.keyCode == 38) {
        // increment the value in the text input
        myText.value++;
    // "40" is the down arrow key
    } else if (e.keyCode == 40) {
        // decrement the value in the text input
        myText.value--;
    }
}

这是一个非常简单的示例，但应该可以帮助您指明正确的方向。希望有帮助。

查看 JSFiddle 的工作示例

编辑：

它不适用于您的情况，因为脚本正在尝试在页面完全加载之前找到 input 元素。您可以将脚本移至页面底部，如下所示：

<html>
    <head></head>
    <body>
        <input type="text" id="myText" />
        <script type="text/javascript" src="number.js"></script>
    </body>
</html>

It looks like there are a couple of things going on. First, as jayp points out in his comment, you aren't defining what myText is.

Secondly, I think you're over-complicating this a bit. How about trying something like this:

Give your text input an ID, something like <input type="text" id="myText" />

Then use something like this:

// Assign our text input to a variable
var myText = document.getElementById("myText");

// Capture keyDown events
myText.onkeydown = function(e) {
    // "38" is the up arrow key
    if (e.keyCode == 38) {
        // increment the value in the text input
        myText.value++;
    // "40" is the down arrow key
    } else if (e.keyCode == 40) {
        // decrement the value in the text input
        myText.value--;
    }
}

This is a pretty simplified example, but should get you pointed in the right direction. Hope it helps.

See a working example at JSFiddle

Edit:

It's not working in your case because the script is trying to find the input element before the page is fully loaded. You can move your script to the bottom of the page like this:

<html>
    <head></head>
    <body>
        <input type="text" id="myText" />
        <script type="text/javascript" src="number.js"></script>
    </body>
</html>

回复收藏 0 原文

只有一腔孤勇 2024-12-17 07:34:11

在您的 number.js 中，您正在增加文本字段的值，但您最初没有设置任何值，因此无需增加任何内容。

尝试编辑 HTML，以便：

<input type="text" id="myText" value="" />

In your number.js, you are increasing the value of the text field, but you have no value originally set, therefore there is nothing to increase.

Try editing your HTML so that you have:

<input type="text" id="myText" value="" />

回复收藏 0 原文

墨离汐 2024-12-17 07:34:11

有一个小的 jQuery 插件可以做到这一点： https://github.com/nakupanda/number-updown

用法：

$('#textInput').updown();

在此处查看现场演示：http://jsfiddle.net/XCtaH/embedded/result/

支持键盘和鼠标滚轮事件

There's a small jQuery plugin for doing this: https://github.com/nakupanda/number-updown

Usages:

$('#textInput').updown();

View live demo here: http://jsfiddle.net/XCtaH/embedded/result/

Keyboard and mousewheel events supported

回复收藏 0 原文

~没有更多了~

关于作者

空宴

暂无简介

0 文章

0 评论

22 人气

关注发私信

友情链接

文江博客

增加屏幕上显示的数值

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

已经忘了多久

15867725375

LonelySnow

走过海棠暮

轻许诺言

信馬由缰

友情链接

增加屏幕上显示的数值

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

已经忘了多久

15867725375

LonelySnow

走过海棠暮

轻许诺言

信馬由缰

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。