按钮单击启动jQuery计时器

时间:2017-03-16 12:41:45

标签: javascript jquery timer

我有倒计时器的视图

enter image description here 这是View中的倒数计时器代码

 <div class="timer-div-one"; id="countdown" style="height: 20px; width: 20px;">

    </div>

这是计时器

的js代码
   $("#countdown").countdown360({
        radius: 40.5,
        seconds: 30,
        strokeWidth: 7,
        fillStyle: '#ffffff',
        strokeStyle: '#ffcf00',
        fontSize: 30,
        fontColor: '#000000',
        autostart: false,
        onComplete: function() { alert(); }
    }).start();

当我点击“Запись”按钮

时,我需要启动它

这是视图中的按钮。

 <button id="record" class="btn btn-default" style="background: #ffcf00; color: black; height: 40px;text-shadow: none">Запись</button>

我尝试编写这样的代码。但它不起作用

 $("#record").click(function (){
$("#countdown").countdown360({
    radius: 40.5,
    seconds: 30,
    strokeWidth: 7,
    fillStyle: '#ffffff',
    strokeStyle: '#ffcf00',
    fontSize: 30,
    fontColor: '#000000',
    autostart: false,
    onComplete: function() { alert(); }
}).start();});

我的错在哪里?

更新

  $(function() {

 $("#record").click(function (){
$("#countdown").countdown360({
    radius: 40.5,
    seconds: 30,
    strokeWidth: 7,
    fillStyle: '#ffffff',
    strokeStyle: '#ffcf00',
    fontSize: 30,
    fontColor: '#000000',
    autostart: false,
    onComplete: function() { alert(); }
}).start();});

});

不起作用,反击不可见。

如果我写这样的代码,我会看到计数器,它会起作用并显示警告。

这是代码。

 $("#countdown").countdown360({
    radius: 40.5,
    seconds: 30,
    strokeWidth: 7,
    fillStyle: '#ffffff',
    strokeStyle: '#ffcf00',
    fontSize: 30,
    fontColor: '#000000',
    autostart: false,
    onComplete: function() { alert(); }
}).start();

正如Jeremy Thille写的关于点击,是的我点击了几下“Запись”和“Остановить”按钮。

这是代码:

 record.onclick = function () {

    record.disabled = true;
    navigator.getUserMedia({
        audio: true,
        video: true
    }, function (stream) {
        preview.src = window.URL.createObjectURL(stream);
        preview.play();

        // var legalBufferValues = [256, 512, 1024, 2048, 4096, 8192, 16384];
        // sample-rates in at least the range 22050 to 96000.
        recordAudio = RecordRTC(stream, {
            //bufferSize: 16384,
            //sampleRate: 45000,
            onAudioProcessStarted: function () {
                if (!isFirefox) {
                    recordVideo.startRecording();
                }
            }
        });

        if (isFirefox) {
            recordAudio.startRecording();
        }

        if (!isFirefox) {
            recordVideo = RecordRTC(stream, {
                type: 'video'
            });
            recordAudio.startRecording();
        }

        stop.disabled = false;
    }, function (error) {
        alert(JSON.stringify(error, null, '\t'));
    });
};

var fileName;
stop.onclick = function () {
    record.disabled = false;
    stop.disabled = true;
    window.onbeforeunload = null; //Solve trouble with deleting video
    preview.src = '';

    fileName = Math.round(Math.random() * 99999999) + 99999999;
    console.log(fileName);
    if (!isFirefox) {
        recordAudio.stopRecording(function () {
            PostBlob(recordAudio.getBlob(), 'audio', fileName + '.wav');
        });
    } else {
        recordAudio.stopRecording(function (url) {
            preview.src = url;
            PostBlob(recordAudio.getBlob(), 'video', fileName + '.webm');
        });
    }

    if (!isFirefox) {
        recordVideo.stopRecording(function () {
            PostBlob(recordVideo.getBlob(), 'video', fileName + '.webm');
        });
    }

    deleteFiles.disabled = false;
};

我尝试在记录点击中粘贴计数器,但它不起作用 我的错在哪里?

UPDATE2

  

未捕获的TypeError:无法设置null的属性'onclick'       在录音:250

是的它引用另一个按钮,我将其删除。

但我还是看不到计时器。

1 个答案:

答案 0 :(得分:0)

我解决了我的问题。

以下是需要完成的方法

 var countdown = $("#countdown").countdown360({
    radius: 40.5,
    seconds: 30,
    strokeWidth: 7,
    fillStyle: '#ffffff',
    strokeStyle: '#ffcf00',
    fontSize: 30,
    fontColor: '#000000',
    autostart: false,
    onComplete: function () {
        console.log('done');
    }
});


$('#record').click(function () {
    countdown.start();
});
$('#stop').click(function () {
    countdown.stop();
});