I want to start my video at certain times of the day. This is 'script.js':
var player;
function createPlayer() {
player=new YT.Player('main-block',{
height:'400',
width:'400',
playerVars:{
'rel':0,
'controls':0,
'showinfo':0,
'disablekb':1,
'modestbranding':1,
'enablejsapi':1
},
videoId:'tgbNymZ7vqY',
events:{
'onReady':onPlayerReady
}
});
}
function onPlayerReady(event) {
document.getElementById("timer").style.display='none';
event.target.playVideo();
}
function clockPlayer(){
var now = new Date();
if (now.getHours()==20 && now.getMinutes()==18){
createPlayer();
}else if(now.getHours()<20){
var time_hours = 19 - now.getHours();
var time_min = 59 - now.getMinutes();
var time_sec = 59 - now.getSeconds();
var hours=((time_hours<10) ? "0":"") + time_hours;
var min=((time_min<10)? "0":"") + time_min;
var sec=((time_sec<10)? "0":"") + time_sec
var time = hours + ':' + min + ':' + sec;
document.getElementById("timer").innerHTML=time;
}
}
setInterval(clockPlayer, 1000);
When I try to call this function my browser ignores 'playerVars', I can't understand why.
This is index.html:
<body>
<script language="javascript" src="https://www.youtube.com/iframe_api"></script>
<div id="timer"></div>
<div id="main-block"></div>
<script language="javascript" src="script.js"></script>
</body>
The clock function has random date now, I will change it later. When I try to use createPlayer() without clock function, I have the same result.
You have a typo in your code.
Change widht to width.
If the the problem is still present, please provide more info.
PS. Install a linter to avoid typos ;)
Maybe the problem is in the else if section in of your code.
I changed like this and it works as expected:
if (now.getHours() == 1 && now.getMinutes() == 12) {
createPlayer();
} else {
var time_hours = 19 - now.getHours();
var time_min = 59 - now.getMinutes();
var time_sec = 59 - now.getSeconds();
var hours = ((time_hours < 10) ? "0" : "") + time_hours;
var min = ((time_min < 10) ? "0" : "") + time_min;
var sec = ((time_sec < 10) ? "0" : "") + time_sec
var time = hours + ':' + min + ':' + sec;
document.getElementById("timer").innerHTML = time;
}
This is the working jsfiddle with the following modifications:
I changed the if condition for create the player once the time is 12:49 - for testing purposes.
Remove the else if and set the else only.
Related
I'm using the YouTube iframe API to get the current time of a video. The problem is getCurrentTime() gives a decimal number and not the time as you would see it on the iframe player.
<html>
<body>
<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'PkZNo7MFNFg',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
function onPlayerStateChange(event) {
console.log(player.getCurrentTime());
}
</script>
</body>
</html>
Is there a way to get the time as is displayed on the video player?
You could use this script to convert decimal time to normal:
function minTommss(minutes){
var sign = minutes < 0 ? "-" : "";
var min = Math.floor(Math.abs(minutes));
var sec = Math.floor((Math.abs(minutes) * 60) % 60);
return sign + (min < 10 ? "0" : "") + min + ":" + (sec < 10 ? "0" : "") + sec;
}
Or using moment.js:
function formatMinutes(mins){
return moment().startOf('day').add(mins, 'minutes').format('m:ss');
}
According to the API getCurrentTime()
Returns the elapsed time in seconds since the video started playing.
I figured it out. Here for anyone else who might one day need to do this. Remember that time is in seconds.
function convertTime(time){
let hours = time/3600;
let minutes = (hours - Math.floor(hours)) * 60;
let seconds = time % 60;
hours = Math.floor(hours);
minutes = Math.floor(minutes);
seconds = Math.floor(seconds);
if ((minutes + "").length == 1){
minutes = "0" + minutes;
}
if ((seconds + "").length == 1){
seconds = "0" + seconds;
}
return hours + ":" + minutes + ":" + seconds;
}
we created an oracle apex application about meeting room by using javascript and css. when the room is full screen must be red hovewer it shows green if I dont refresh the page . How can I fix it? ı couldnt copy the all code but generally this code is for to put hours,day and put a color for the screen as green and red
(document).ready(function(){
var toggle = true;
function displayTime(){
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
var meridiem = " ";
if(hours>11){
hours = hours;
meridiem = "";
}
if(hours === 0){
hours = 12;
}
if (hours<10){
hours = "0" + hours;
}
if (minutes<10){
minutes = "0" + minutes;
}
if (seconds<10){
seconds = "0" + seconds;
}
('#hours').text(hours);
('#minutes').text(minutes);
("#colon").css({ visibility: toggle?"visible":"hidden"});
}
function color(){
if(apex.item("P2_D_DUZENLEYEN").node.innerHTML != undefined){
document.body.style.background = "url(#WORKSPACE_IMAGES#red.jpg)";
}
else{
document.body.style.background = "url(#WORKSPACE_IMAGES#green-2.jpg)";
}
}
color();
displayTime();
setInterval(displayTime, 1000);
displayDay();
displayDate();
});
You have to share other functions to understand what is going on, but for this code you should set interval for "color" function.
setInterval(color, 1000);
please check my code, I've created a simple date in JS but it's not working, I'm following a tutorial and I have the exact code.
<html>
<head>
<title>Clock</title>
<script>
function time() {
var time = new Date();
var hours = time.getHours();
var mins = time.getMinutes();
var secs = time.getSeconds();
if (secs<10) {
secs = "0" + secs;
}
if (mins<10) {
secs = "0" + mins;
}
document.getElementById("thetime").innerHTML=hours+":"+mins+":"+secs;
var timer = setTimeout(function(){time()},500);
}
</script>
</head>
<body onload="time()">
<div id="thetime"></div>
</body>
</html>
You have function time() {...} and var time = new Date();. The local variable shadows the function, meaning that inside setTimeout(function(){time()},500);, time refers to the Date object, not the function.
Solution: Rename either of them.
Also,
replace this part of the code:
if (mins<10) {
secs = "0" + mins;
}
with this:
if (mins<10) {
mins= "0" + mins;
}
Try using setInterval() instead of timeout
function time() {
//Your stuff here...
}
var timer = setInterval(function(){time()},500);
Fiddle
Avoid using the same variable name as function name. It tried to call the variable as a function. Naming it currentTime makes it work.
function time() {
var currentTime = new Date();
var hours = currentTime.getHours();
var mins = currentTime.getMinutes();
var secs = currentTime.getSeconds();
if (secs<10) {
secs = "0" + secs;
}
if (mins<10) {
secs = "0" + mins;
}
document.getElementById("thetime").innerHTML=hours+":"+mins+":"+secs;
var timer = setTimeout(function(){time()},500);
}
You are naming a var var time the same your function time(). You should rename one of them.
For example name your function customTimer. You call this function from the setTimeout and from your onload in the html
<html>
<head>
<title>Clock</title>
<script>
function customTimer() {
var time = new Date();
var hours = time.getHours();
var mins = time.getMinutes();
var secs = time.getSeconds();
if (secs < 10) {
secs = "0" + secs;
}
if (mins < 10) {
mins = "0" + mins;
}
document.getElementById("thetime").innerHTML = hours + ":" + mins + ":" + secs;
var timer = setTimeout(function () { customTimer() }, 500);
}
</script>
</head>
<body onload="customTimer()">
<div id="thetime"></div>
</body>
</html>
I want to add a count up timer to my webpage, as in, a label that contains 0:00:00 should start displaying 0:00:01 and so on until the stop button is clicked.
Is there a simple javascript/jquery solution to this?
<html>
<head>
<title>Home</title>
<script src="jquery-1.11.1.js">
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
//psst. psst.
});
});
</script>
</head>
<body>
<form>
<table>
<tr>
<td><input type="text" id="project" placeholder="project"></td>
<td><p id="timer">0:00:00<p></td>
</tr>
</table>
</form>
</body>
</html>
I tried something in Vanilla JS HERE
var seconds=0, minutes=0, hours=0;
var counter;
var stop,start;
var counting = false;
window.onload = function () {
counter = document.getElementById('counter');
stop = document.getElementById('stop');
stop.onclick = function () {
counting = false;
}
start = document.getElementById('start');
start.onclick = function() {
counting = true;
timer();
}
counting = true;
timer();
}
function timer() {
if (seconds >= 60) {
minutes++;
seconds = 0;
}
if (minutes >= 60) {
hours++;
minutes = 0;
}
counter.innerHTML = hours + ":" + minutes + ":" + seconds;
if (counting) {
seconds++;
setTimeout(timer, 1000);
}
}
If you need more info leave a comment..
time.js
function time(id)
{
date = new Date;
h = date.getHours();
if(h<10)
{
h = "0"+h;
}
m = date.getMinutes();
if(m<10)
{
m = "0"+m;
}
s = date.getSeconds();
if(s<10)
{
s = "0"+s;
}
result = h+':'+m+':'+s;
document.getElementById(id).innerHTML = result;
// "setTimeout" call function "time" every 1 second (1000 milliseconds)
setTimeout('time("'+id+'");','1000');
return true;
}
HTML
<html>
<head>
<title>Time in Javascript</title>
<script type="text/javascript" src="time.js"></script>
</head>
<body>
<span id="time"></span>
<script type="text/javascript">window.onload = time('time');</script>
</body>
</html>
Try this way
Use https://github.com/jchavannes/jquery-timer
Include this files in head
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript">
<script src="http://jchavannes.com/include/scripts/3p/jquery.timer.js" type="text/javascript">
Script
var Example1 = new (function() {
var $stopwatch, // Stopwatch element on the page
incrementTime = 70, // Timer speed in milliseconds
currentTime = 0, // Current time in hundredths of a second
updateTimer = function() {
$stopwatch.html(formatTime(currentTime));
currentTime += incrementTime / 10;
},
init = function() {
$stopwatch = $('#stopwatch');
Example1.Timer = $.timer(updateTimer, incrementTime, true);
};
this.resetStopwatch = function() {
currentTime = 0;
this.Timer.stop().once();
};
$(init);
});
function formatTime(time) {
var min = parseInt(time / 6000),
sec = parseInt(time / 100) - (min * 60),
hundredths = pad(time - (sec * 100) - (min * 6000), 2);
return (min > 0 ? pad(min, 2) : "00") + ":" + pad(sec, 2) + ":" + hundredths;
}
function pad(number, length) {
var str = '' + number;
while (str.length < length) {str = '0' + str;}
return str;
}
Example1();
DEMO
By using setInterval and Date
You can use button to stop and start timer.
var d = new Date();
d.setHours(0,0,0,0);
setInterval((function(){
return function(){
d.setSeconds(d.getSeconds()+1);
var t = d.toLocaleTimeString("en-US", {hour12: false});
document.getElementById("demo").innerHTML = t;
}
})(), 1000);
Fiddle Demo
Please try this fiddle for your solution.
JS.
var hour = 0;
var min = 0;
var second = 0;
var i=setInterval(function(){
second++;
if(second > 59){
second = 0;
min++;
if(min>59){
hour++;
min = 0;
}
}
var timer_time = (hour > 9 ? hour : '0'+hour)+':'+(min > 9 ? min : '0'+min)+':'+(second > 9 ? second : '0'+second);
$('#timer').html(timer_time);
}, 1000);
$('#stop_timer').click(function(){
clearInterval(i);
});
HTML
<p id='timer'>00:00:00</p>
<button id='stop_timer'>Stop Timer</button>
Thanks
Use timing events like documented at http://www.w3schools.com/js/js_timing.asp.
I have created a drag and drop game. Is there a possible way to stop all the mouseEvents when the time is out?
Below are my codes for the timer.
var canvas = document.getElementById("canvas");
var canvas_context = canvas.getContext("2d");
var text = "you have: 10 : 00 left"
function showFillText() {
canvas_context.clearRect(500, 350, 80, 100);
canvas_context.fillStyle = '#36F'; //text color
canvas_context.font = ' bold 20px sans-serif';
canvas_context.textBaseline = 'bottom';
canvas_context.fillText(text, 500, 450); //('text', x, y)
}
var mins = .1; //Set the number of minutes you need
var secs = mins * 60;
var currentSeconds = 0;
var currentMinutes = 0;
setTimeout('Decrement()',1000);
function Decrement() {
currentMinutes = Math.floor(secs / 60);
currentSeconds = secs % 60;
if(currentSeconds <= 9) currentSeconds = "0" + currentSeconds;
secs--;
text = currentMinutes + ":" + currentSeconds; //Set the element id you need the time put into.
if(secs !== -1) setTimeout('Decrement()',1000);
//document.getElementById("timerText").innerHTML = currentMinutes + ":" + currentSeconds;
if (currentMinutes == 0 && currentSeconds ==0) {
text = "TIMES UP"
//document.location.href = "http://www.google.com";
}
showFillText()
}
Keep a list of all your event handlers and delete them when your timer expires.
So instead of:
document.getElementById("some element").addEventListener("onX", function () {});
you do:
registerEvent(document.getElementById("some element"), "onX", function () {});
registerEvent keeps a list of all your event listeners. You can remove event listeners with removeEventListener.
It is possible using pointer-events. Use it against a div or class you are interested in. http://caniuse.com/pointer-events
Add a flag called (eg) 'lock', initially set to 0.
When the time is up, set it to 1.
add an if within the function
function myFunction(){
if( lock == 0 ){
... function ...
}
}
There might be a more sophisticated way of doing it but that should work . . .