0

我不是那么好，js慢慢开始掌握它：我有一个小型（工作）网络摄像头应用程序，它拍摄照片并将 base64 插入（隐藏）#formfield b4 发布表单 - >

button code:
<input type="image" src="images/takepic.jpg"  id="btn1" onclick="base64_tofield()">


function base64_tofield() {

                $('#formfield').val($.scriptcam.getFrameAsBase64());
};

我需要一个 div 在按钮实际提交之前显示倒计时 3.. 2.. 1（秒） - 有没有办法将此功能延迟 3 秒并设置计时器？ - 这样人们就可以准备好图片..

我试过这个

setTimeout(function() { base64_tofield() },5000);

在不同的地方但不工作 - 它仍然需要立即。倒计时 div 必须添加并且除了倒计时之外没有其他功能，因此用户有时间准备。

该按钮将base64数据抓取到表单字段并提交表单..我认为延迟函数可能会延迟表单但它不会，我认为我需要将表单延迟3.5秒 - 并将函数延迟3..因此，当用户单击“拍照”时，计时器启动，3 秒后 - 函数 base64_tofield() 触发（拍照），然后 1/2 秒后表单提交..

它只是让用户有时间在提交之前为噱头镜头做准备

4

3 回答 3

0

您需要在 onclick 函数中返回 false，否则表单将立即发布。或者，您可以使用 jQuery 绑定到提交事件，并使用 event.preventDefault();

<form id="form1" method="post" action="">
    <div id="countdown"></div>
    <input type="hidden" name="encryptedImage" id="formfield" />
    <input id="submitform" type="submit" name="capture" value="capture"></input>
</form>
<script>
$(function() {
    $('#form1').submit(function(e) {
        base64_tofield();
        e.preventDefault();
    });


    function base64_tofield() {
        var interval;
        var countdown = 4;

        interval = setInterval(function() {
            $('#countdown').html(--countdown);
            if(countdown === 0){
                $('#formfield').val($.scriptcam.getFrameAsBase64());
                $('#form1')[0].submit();
            };
        }, 1000);
    };
});
</script>

如果我对你的理解正确，上面的代码会做你想做的事，在提交表单之前等待 3 秒。

于 2013-10-17T13:02:53.267 回答
0 
<input type="text" id="countdown" value="3" />
<input type="button" id="begincountdown" value="Start Countdown" />

<script>
    function base64_tofield() {
       console.log( 'Encode!' );   
    }

    $('#begincountdown').on( 'click', function() {
        var secondscounter = 3,
            countdown = setInterval(function(){ 
                $('#countdown').val( secondscounter-- );
                if ( !secondscounter ) {
                  clearInterval( countdown ); 
                  base64_tofield();
                }
        }, 3000 );
    });
</script>

小提琴：http: //jsfiddle.net/XytRt/27/

于 2013-10-17T13:09:02.667 回答
0

只需将所有内容包装到setTimeoutJS 计时器中...

setTimeout(base64_tofield(), 2000);

...或者您可以delay()在提交时使用功能。

于 2013-10-17T12:55:56.553 回答