I have a time range slider implemented using Jquery and JqueryUI.
$("#slider-range").slider({
range: true,
min: 0,
max: 1440,
step: 15,
values: [600, 720],
slide: function (e, ui) {
var hours1 = Math.floor(ui.values[0] / 60);
var minutes1 = ui.values[0] - (hours1 * 60);
if (hours1.length == 1) hours1 = '0' + hours1;
if (minutes1.length == 1) minutes1 = '0' + minutes1;
if (minutes1 == 0) minutes1 = '00';
if (hours1 >= 12) {
if (hours1 == 12) {
hours1 = hours1;
minutes1 = minutes1 + " PM";
} else {
hours1 = hours1 - 12;
minutes1 = minutes1 + " PM";
}
} else {
hours1 = hours1;
minutes1 = minutes1 + " AM";
}
if (hours1 == 0) {
hours1 = 12;
minutes1 = minutes1;
}
$('.slider-time').html(hours1 + ':' + minutes1);
var hours2 = Math.floor(ui.values[1] / 60);
var minutes2 = ui.values[1] - (hours2 * 60);
if (hours2.length == 1) hours2 = '0' + hours2;
if (minutes2.length == 1) minutes2 = '0' + minutes2;
if (minutes2 == 0) minutes2 = '00';
if (hours2 >= 12) {
if (hours2 == 12) {
hours2 = hours2;
minutes2 = minutes2 + " PM";
} else if (hours2 == 24) {
hours2 = 11;
minutes2 = "59 PM";
} else {
hours2 = hours2 - 12;
minutes2 = minutes2 + " PM";
}
} else {
hours2 = hours2;
minutes2 = minutes2 + " AM";
}
$('.slider-time2').html(hours2 + ':' + minutes2);
}
});
Here is the fiddle for the current time slider : http://jsfiddle.net/jrweinb/MQ6VT/
I want to achieve the exact same result using AngularJS since i am
working in an angular project.
Any idea if such a thing is available in angularJS or is it possible to convert
this into angular ?
You can use angular-range slider
http://danielcrisp.github.io/angular-rangeslider/
http://danielcrisp.github.io/angular-rangeslider/demo
<!doctype html>
<html ng-app="myApp">
<head>
<title>Angular rangeSlider Demo</title>
<!-- Bootstrap CSS from CDN -->
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<!-- Angular rangeSlider CSS -->
<link href="../angular.rangeSlider.css" rel="stylesheet">
</head>
<body style="padding-bottom: 50px;">
<div class="container" ng-controller="DemoController">
<div class="row">
<div class="span12">
<pre>
$scope.demo1 = {
min: 20,
max: 80
};</pre>
</div>
<div class="span5">
<h4>Default slider</h4>
<div range-slider min="0" max="100" model-min="demo1.min" model-max="demo1.max"></div>
</div>
<div class="span2"></div>
<div class="span5">
<h4>Vertical slider</h4>
<div range-slider orientation="vertical" min="0" max="100" model-min="demo1.min" model-max="demo1.max"></div>
</div>
<hr />
<hr />
</div>
<!-- we need jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<!-- and Angular, of course -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"></script>
<!-- and out directive code -->
<script src="../angular.rangeSlider.js"></script>
<!-- a basic app and controller -->
<script>
// basic angular app setup
var app = angular.module('myApp', ['ui-rangeSlider']);
app.controller('DemoController',
function DemoController($scope) {
// just some values for the sliders
$scope.demo1 = {
min: 20,
max: 80
};
}
);
</script>
</body>
</html>
Related
I'm making a calculator where a user can enter in a date, and it will display the time elapsed since. I've got it so that after the user clicks the submit button I've coded in, the page refreshes and displays a query string as follows:
file:///H:/dateselection/public_html/Document8.html?
Note the question mark at the end.
My question is, how do I take this and pass it into a value so that I can display it on my page? Here is my code:
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<Title>Elapsed Time Calculator</Title>
<body>
<!-- Navigation -->
<nav>
<ul class="w3-navbar w3-black">
<li>Home</li> <!--Link to Home Page-->
<li>NHL Teams</li><!--Link to Page of NHL Teams-->
<li>AHL Teams</li><!--Link to Page of AHL Teams-->
<li>WHL Teams</li><!--Link to Page of WHL Teams-->
<li>G.A.A. Calculator</li><!--Link to Page of WHL Teams-->
<li>Fan Survey</li><!--Link to Fan Survey Page-->
<li>Web Safety</li><!--Link to Page about Web Safety-->
<li>Elapsed Time</li><!--Link to Page That Calculates Elapsed Time Between Two Dates-->
</ul>
</nav>
<header>
<h1 style="text-align:center;">Elapsed Time Calculator</h1>
</header>
<article>
<form id="frmdate" onsubmit="myfunction()">
<fieldset>
<label for="dateSelected">
Select a date
</label>
<input type="date" id="dateSelected" />
</fieldset>
<fieldset class="button">
<button type="submit" id="determineDay">Calculate</button>
</fieldset>
</form>
</article>
<div id="output"></div>
<script src="tools.js"></script>
</body>
</html>
Here is my script file:
function myfunction()
{
var enteredDate = document.getElementById('dateSelected').valueAsDate;
var a= new Date();
var elapsed_time = a- enteredDate;
var result=elapsed_time.toString('days-hours-minutes-seconds');
//var result = "Day: " + elapsed_time.getDate() + "<br/>" +
// "Month: " + elapsed_time.getMonth() + "<br/>" +
// "Year: " + elapsed_time.getFullYear();
//document.getElementById('output').innerHTML = "Result is:<br/>" + result;
}
function secondsToString(result)
{
var numyears = Math.floor(result / 31536000);
var numdays = Math.floor(( result % 31536000) / 86400);
var numhours = Math.floor(((result % 31536000) % 86400) / 3600);
var numminutes = Math.floor((((result % 31536000) % 86400) % 3600) / 60);
var numseconds = (((result % 31536000) % 86400) % 3600) % 60;
return numyears + " years " + numdays + " days " + numhours + " hours " + numminutes + " minutes " + numseconds + " seconds";
}
In fact because you are using js and isn't really submitting anything, you can just disable form onsubmit and work with the "submit button" onclick event.
function myfunction() {
var enteredDate = document.getElementById('dateSelected').valueAsDate;
var a = new Date();
var elapsed_time = a - enteredDate;
var result = new Date(elapsed_time);
var result = "Day: " + result.getDate() + "<br/>" +
"Month: " + result.getMonth() + "<br/>" +
"Year: " + result.getFullYear();
document.getElementById('output').innerHTML = "Result is:<br/>" + result;
}
function secondsToString(result) {
var numyears = Math.floor(result / 31536000);
var numdays = Math.floor(( result % 31536000) / 86400);
var numhours = Math.floor(((result % 31536000) % 86400) / 3600);
var numminutes = Math.floor((((result % 31536000) % 86400) % 3600) / 60);
var numseconds = (((result % 31536000) % 86400) % 3600) % 60;
return numyears + " years " + numdays + " days " + numhours + " hours " + numminutes + " minutes " + numseconds + " seconds";
}
var calculateButton = document.getElementById('determineDay');
calculateButton.onclick = myfunction;
<form id="frmdate" onsubmit="return false;">
<fieldset>
<label for="dateSelected">
Select a date
</label>
<input type="date" id="dateSelected" />
</fieldset>
<fieldset class="button">
<button id="determineDay">Calculate</button>
</fieldset>
</form>
<div id="output"></div>
I've been making a slider in JS using JQuery to use as a time picker and trying to display it in my PHP script. I have been following these instructions and the first part worked perfectly fine. Now when I go to add the next stage, it does not show up anymore. Any ideas?
Link to instructions:
http://marcneuwirth.com/blog/2010/02/21/using-a-jquery-ui-slider-to-select-a-time-range/
Here is my code:
<script>
$(function() {
$( '#slider-range' ).slider({
range: true,
min: 0,
max: 839,
values: [ 60, 210 ],
slide: slideTime
});
function slideTime(event, ui){
var val0 = $('#slider-range').slider('values', 0),
val1 = $('#slider-range').slider('values'', 1),
minutes0 = parseInt(val0 % 60, 10),
hours0 = parseInt(val0 / 60 % 24, 10),
minutes1 = parseInt(val1 % 60, 10),
hours1 = parseInt(val1 / 60 % 24, 10);
startTime = getTime(hours0, minutes0);
endTime = getTime(hours1, minutes1);
$('#time').text(startTime + ' - ' + endTime);
}
function getTime(hours, minutes) {
var time = null;
minutes = minutes + "";
if (hours < 12) {
time = 'AM';
}
else {
time = 'PM';
}
if (hours == 0) {
hours = 12;
}
if (hours > 12) {
hours = hours - 12;
}
if (minutes.length == 1) {
minutes = '0' + minutes;
}
return hours + ':' + minutes + ' ' + time;
}
slideTime();
});
</script>
<script>
$(function() {
$( '#datepicker' ).datepicker({ dateFormat: 'yy-mm-dd' });
});
</script>
<?php
//settings
echo "<hr style='border: 1px solid #800000'><h3>Settings</h3>";
echo "<table style='width:100%;text-align:center;'>";
echo "<tr><td><h4>Date Selector</td><td><h4>Group Selector</td></tr>";
echo "<tr><td><input type='text' id='datepicker' name='date' value='Select a date...' onchange='this.form.submit()'></form></td>";
echo "</select></form></td></tr>";
echo "</table>";
if (isset($_GET['date'])) {
$date = $_GET['date'];
}
else {
$date = date("Y-m-d");
}
//boat booking
echo "<hr style='border: 1px solid #800000'><h3>Book Boats - ".$date."</h3>";
echo "<table style='width:100%;text-align:center;'>";
echo "<tr><td><h4>Time Selector<h4></td></tr>";
echo "</table>";
echo "<div class='slider' id='slider-range'></div>";
//logging
echo "<hr style='border: 1px solid #800000'><h3>Boat Usage</h3>";
Thanks in advance!
You should remove the extra quote ' in the following line :
val1 = $('#slider-range').slider('values'', 1);
Should be :
val1 = $('#slider-range').slider('values', 1);
And better if you can use change instead of slider to adjust the time.
$( '#slider-range' ).slider({
range: true,
min: 0,
max: 839,
values: [ 60, 210 ],
step: 30,
change: slideTime
});
function slideTime( event, ui){
var val0 = $('#slider-range').slider('values', 0),
val1 = $('#slider-range').slider('values', 1),
minutes0 = parseInt(val0 % 60, 10),
hours0 = parseInt(val0 / 60 % 24, 10),
minutes1 = parseInt(val1 % 60, 10),
hours1 = parseInt(val1 / 60 % 24, 10);
startTime = getTime(hours0, minutes0);
endTime = getTime(hours1, minutes1);
$('#stime').text(startTime);
$('#etime').text(endTime);
}
function getTime(hours, minutes) {
var time = null;
minutes = minutes + "";
if (minutes.length == 1) {
minutes = '0' + minutes;
}
hours = hours +8;
return hours + ':' + minutes;
}
slideTime();
#slider-range{
width:300px;
margin-top:10px;
}
body {
margin: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet"/>
<h1>HTML Slider Test</h1>
<div id="slider-range"></div>
<div id="stime"></div>
<div id="etime"></div>
<p>Your slider has a value of <span id="slider-value"></span></p>
Hope this helps.
I would like a line that says:
Your download will begin in (10, 9, 8, etc. Beginning on page load) seconds.
I already have the 10 second download text set up, and I have looked at other stackoverflow posts. They all include CSS, and Jquery. I would like just a Javascript/HTML timer.
No other requests have been made for a simple line stating "You're download will begin in x seconds". How would I do this?
JavaScript has built in to it a function called setInterval, which takes two arguments - a function, callback and an integer, timeout. When called, setInterval will call the function you give it every timeout milliseconds.
For example, if you wanted to make an alert window every 500 milliseconds, you could do something like this.
function makeAlert(){
alert("Popup window!");
};
setInterval(makeAlert, 500);
However, you don't have to name your function or declare it separately. Instead, you could define your function inline, like this.
setInterval(function(){ alert("Popup window!"); }, 500);
Once setInterval is called, it will run until you call clearInterval on the return value. This means that the previous example would just run infinitely. We can put all of this information together to make a progress bar that will update every second and after 10 seconds, stop updating.
var timeleft = 10;
var downloadTimer = setInterval(function(){
if(timeleft <= 0){
clearInterval(downloadTimer);
}
document.getElementById("progressBar").value = 10 - timeleft;
timeleft -= 1;
}, 1000);
<progress value="0" max="10" id="progressBar"></progress>
Alternatively, this will create a text countdown.
var timeleft = 10;
var downloadTimer = setInterval(function(){
if(timeleft <= 0){
clearInterval(downloadTimer);
document.getElementById("countdown").innerHTML = "Finished";
} else {
document.getElementById("countdown").innerHTML = timeleft + " seconds remaining";
}
timeleft -= 1;
}, 1000);
<div id="countdown"></div>
This does it in text.
<p> The download will begin in <span id="countdowntimer">10 </span> Seconds</p>
<script type="text/javascript">
var timeleft = 10;
var downloadTimer = setInterval(function(){
timeleft--;
document.getElementById("countdowntimer").textContent = timeleft;
if(timeleft <= 0)
clearInterval(downloadTimer);
},1000);
</script>
A solution using Promises, includes both progress bar & text countdown.
ProgressCountdown(10, 'pageBeginCountdown', 'pageBeginCountdownText').then(value => alert(`Page has started: ${value}.`));
function ProgressCountdown(timeleft, bar, text) {
return new Promise((resolve, reject) => {
var countdownTimer = setInterval(() => {
timeleft--;
document.getElementById(bar).value = timeleft;
document.getElementById(text).textContent = timeleft;
if (timeleft <= 0) {
clearInterval(countdownTimer);
resolve(true);
}
}, 1000);
});
}
<div class="row begin-countdown">
<div class="col-md-12 text-center">
<progress value="10" max="10" id="pageBeginCountdown"></progress>
<p> Begining in <span id="pageBeginCountdownText">10 </span> seconds</p>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
ProgressCountdown(10, "pageBeginCountdownText");
function ProgressCountdown(timeleft, text) {
return new Promise((resolve, reject) => {
var countdownTimer = setInterval(() => {
timeleft--;
document.getElementById(text).textContent = timeleft;
if (timeleft <= 0) {
clearInterval(countdownTimer);
resolve(true);
}
}, 1000);
});
}
</script>
<style>
.dot {
height: 100px;
width: 100px;
border-style: solid;
border-width: 2px;
border-radius: 50%;
display: inline-block;
text-align: center;
}
.clock {
text-align: center;
}
.pp {
text-align: center;
}
</style>
<div class="row begin-countdown">
<div class="col-md-12 text-center">
<div class="dot" style="position: center">
<h3 id="pageBeginCountdownText" class="clock">10</h3>
<p class="pp">Seonds</p>
</div>
</div>
</div>
</body>
</html>
var seconds_inputs = document.getElementsByClassName('deal_left_seconds');
var total_timers = seconds_inputs.length;
for ( var i = 0; i < total_timers; i++){
var str_seconds = 'seconds_'; var str_seconds_prod_id = 'seconds_prod_id_';
var seconds_prod_id = seconds_inputs[i].getAttribute('data-value');
var cal_seconds = seconds_inputs[i].getAttribute('value');
eval('var ' + str_seconds + seconds_prod_id + '= ' + cal_seconds + ';');
eval('var ' + str_seconds_prod_id + seconds_prod_id + '= ' + seconds_prod_id + ';');
}
function timer() {
for ( var i = 0; i < total_timers; i++) {
var seconds_prod_id = seconds_inputs[i].getAttribute('data-value');
var days = Math.floor(eval('seconds_'+seconds_prod_id) / 24 / 60 / 60);
var hoursLeft = Math.floor((eval('seconds_'+seconds_prod_id)) - (days * 86400));
var hours = Math.floor(hoursLeft / 3600);
var minutesLeft = Math.floor((hoursLeft) - (hours * 3600));
var minutes = Math.floor(minutesLeft / 60);
var remainingSeconds = eval('seconds_'+seconds_prod_id) % 60;
function pad(n) {
return (n < 10 ? "0" + n : n);
}
document.getElementById('deal_days_' + seconds_prod_id).innerHTML = pad(days);
document.getElementById('deal_hrs_' + seconds_prod_id).innerHTML = pad(hours);
document.getElementById('deal_min_' + seconds_prod_id).innerHTML = pad(minutes);
document.getElementById('deal_sec_' + seconds_prod_id).innerHTML = pad(remainingSeconds);
if (eval('seconds_'+ seconds_prod_id) == 0) {
clearInterval(countdownTimer);
document.getElementById('deal_days_' + seconds_prod_id).innerHTML = document.getElementById('deal_hrs_' + seconds_prod_id).innerHTML = document.getElementById('deal_min_' + seconds_prod_id).innerHTML = document.getElementById('deal_sec_' + seconds_prod_id).innerHTML = pad(0);
} else {
var value = eval('seconds_'+seconds_prod_id);
value--;
eval('seconds_' + seconds_prod_id + '= ' + value + ';');
}
}
}
var countdownTimer = setInterval('timer()', 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="hidden" class="deal_left_seconds" data-value="1" value="10">
<div class="box-wrapper">
<div class="date box"> <span class="key" id="deal_days_1">00</span> <span class="value">DAYS</span> </div>
</div>
<div class="box-wrapper">
<div class="hour box"> <span class="key" id="deal_hrs_1">00</span> <span class="value">HRS</span> </div>
</div>
<div class="box-wrapper">
<div class="minutes box"> <span class="key" id="deal_min_1">00</span> <span class="value">MINS</span> </div>
</div>
<div class="box-wrapper hidden-md">
<div class="seconds box"> <span class="key" id="deal_sec_1">00</span> <span class="value">SEC</span> </div>
</div>
var seconds_inputs = document.getElementsByClassName('deal_left_seconds');
var total_timers = seconds_inputs.length;
for ( var i = 0; i < total_timers; i++){
var str_seconds = 'seconds_'; var str_seconds_prod_id = 'seconds_prod_id_';
var seconds_prod_id = seconds_inputs[i].getAttribute('data-value');
var cal_seconds = seconds_inputs[i].getAttribute('value');
eval('var ' + str_seconds + seconds_prod_id + '= ' + cal_seconds + ';');
eval('var ' + str_seconds_prod_id + seconds_prod_id + '= ' + seconds_prod_id + ';');
}
function timer() {
for ( var i = 0; i < total_timers; i++) {
var seconds_prod_id = seconds_inputs[i].getAttribute('data-value');
var days = Math.floor(eval('seconds_'+seconds_prod_id) / 24 / 60 / 60);
var hoursLeft = Math.floor((eval('seconds_'+seconds_prod_id)) - (days * 86400));
var hours = Math.floor(hoursLeft / 3600);
var minutesLeft = Math.floor((hoursLeft) - (hours * 3600));
var minutes = Math.floor(minutesLeft / 60);
var remainingSeconds = eval('seconds_'+seconds_prod_id) % 60;
function pad(n) {
return (n < 10 ? "0" + n : n);
}
document.getElementById('deal_days_' + seconds_prod_id).innerHTML = pad(days);
document.getElementById('deal_hrs_' + seconds_prod_id).innerHTML = pad(hours);
document.getElementById('deal_min_' + seconds_prod_id).innerHTML = pad(minutes);
document.getElementById('deal_sec_' + seconds_prod_id).innerHTML = pad(remainingSeconds);
if (eval('seconds_'+ seconds_prod_id) == 0) {
clearInterval(countdownTimer);
document.getElementById('deal_days_' + seconds_prod_id).innerHTML = document.getElementById('deal_hrs_' + seconds_prod_id).innerHTML = document.getElementById('deal_min_' + seconds_prod_id).innerHTML = document.getElementById('deal_sec_' + seconds_prod_id).innerHTML = pad(0);
} else {
var value = eval('seconds_'+seconds_prod_id);
value--;
eval('seconds_' + seconds_prod_id + '= ' + value + ';');
}
}
}
var countdownTimer = setInterval('timer()', 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="hidden" class="deal_left_seconds" data-value="1" value="10">
<div class="box-wrapper">
<div class="date box"> <span class="key" id="deal_days_1">00</span> <span class="value">DAYS</span> </div>
</div>
<div class="box-wrapper">
<div class="hour box"> <span class="key" id="deal_hrs_1">00</span> <span class="value">HRS</span> </div>
</div>
<div class="box-wrapper">
<div class="minutes box"> <span class="key" id="deal_min_1">00</span> <span class="value">MINS</span> </div>
</div>
<div class="box-wrapper hidden-md">
<div class="seconds box"> <span class="key" id="deal_sec_1">0p0</span> <span class="value">SEC</span> </div>
</div>
This is my countdown script :
<script type='text/javascript'>
function cronometru(timp_ramas) {
Ore = Math.floor(timp_ramas / 3600);
minute = Math.floor((timp_ramas - Ore * 3600) / 60);
secunde = timp_ramas - minute * 60 - Ore * 3600;
if (Ore < 10){ Ore = "0"+ Ore; }
if (minute < 10){ minute = "0" + minute; }
if (secunde < 10){ secunde = "0" + secunde; }
if (timp_ramas > 0) {
timp_ramas--;
document.getElementById("timp").innerHTML = Ore + ':' + minute + ':' + secunde;
setTimeout("cronometru("+timp_ramas+")", 1000);
} else {
document.getElementById("timp").innerHTML = "Focul s-a stins !";
}
}
$timp_ramas = $citeste['timp_ramas_pentru_foc'] - time(); // this is the function that retrives the actual time from an database.
I use this "wz_tooltip.js" for the tooltip events.
<script type="text/javascript" src="wz_tooltip.js"></script>
When i try to put to show my conuntdown in the tooltip the tooltip goes black and show only the message before or after the countdown position ('Timp ramas :')
Example :
if ($citeste["timp_ramas_pentru_foc"] > 0)
{
echo "
<a onmouseover=
\"Tip('Timp ramas : <span id=timp></span> ')\"
onmouseout=\"UnTip()\">
<img src='img/skiluri/fire_yes.png'/> </a>
";
}
I found a way to make the code to work but the timer will be shown in 2 places in the same time. I want only to read it when i move the cursor on some picture / text and the tooltip apears.
Example of working code with 2 views in the same time :
$timp_ramas = $citeste['timp_ramas_pentru_foc'] - time();
?>
<script type='text/javascript'>
function cronometru(timp_ramas) {
Ore = Math.floor(timp_ramas / 3600);
minute = Math.floor((timp_ramas - Ore * 3600) / 60);
secunde = timp_ramas - minute * 60 - Ore * 3600;
if (Ore < 10){ Ore = "0"+ Ore; }
if (minute < 10){ minute = "0" + minute; }
if (secunde < 10){ secunde = "0" + secunde; }
if (timp_ramas > 0) {
timp_ramas--;
document.getElementById("timp").innerHTML = Ore + ':' + minute + ':' + secunde;
setTimeout("cronometru("+timp_ramas+")", 1000);
} else {
document.getElementById("timp").innerHTML = "Focul s-a stins !";
}
}
<script src="js/meniu_dreapta/iconmenu.js"></script>
<body>
<script type="text/javascript" src="js/tooltip/wz_tooltip.js"></script>
<span id='timp'></span> <?php echo "<script type='text/javascript'>cronometru(".$timp_ramas.")</script>"; ?>
<?php
echo '
<html>
<ul id="myiconmenu" class="iconmenu"> ';
if ($citeste["timp_ramas_pentru_foc"] > 0)
{
echo "
<a onmouseover=
\"Tip('Timp ramas : <span id=timp></span> ')\"
onmouseout=\"UnTip()\">
<img src='img/skiluri/fire_yes.png'/> </a>
";
}
Thank you.
It only works once. At second button click, nothing occurs.
If I change budilnik variable at i_budilnik or var budilnik, it doesn't work even once!
Where is the problem?
<div>
<form name="alert">
<input type="text" name="hour" />
<input type="text" name="min" />
<input type="button" value="ok" onclick="budilnik(this.form)">
</form><font color=#660000 size=20 face=Tahoma><span id="hours"></span>
</div>
<script type="text/javascript">
function budilnik(form) {
budilnik = 1;
min = form.min.value;
hour = form.hour.value;
}
obj_hours = document.getElementById("hours");
function wr_hours() {
time = new Date();
time_min = time.getMinutes();
time_hours = time.getHours();
time_wr = ((time_hours < 10) ? "0" : "") + time_hours;
time_wr += ":";
time_wr += ((time_min < 10) ? "0" : "") + time_min;
time_wr = time_wr;
obj_hours.innerHTML = time_wr;
if (i_budilnik == 1) {
if (min == time_min) {
if (hour == time_hours) {
alert('welldone');
budilnik = 0;
}
}
}
}
wr_hours();
setInterval("wr_hours();", 1000);
</script>
You call the function wr_hours(); only once... with the onclick budilnik is called, but that doesn't touch wr_hours again. The first time the code is run, because the page is loaded, but after that, with the onclick only the values of min and hour are set again.
edit: you shouldn't call your form "alert", since that's a reserved word in javascript, same for the variable min. also: the variables min and hour are defined in the function budilnik, but they're not known outside this scope. I also renamed the variable budilnik to a global variable justonce to make sure you can check it outside the scope of budilnik. I rewrote your code a bit:
<html>
<body>
<div>
<form name="frm">
<input type="text" name="hour" />
<input type="text" name="mins"/>
<input type="button" value="ok" onclick="justonce=1;">
</form>
<font color=#660000 size=20 face=Tahoma><span id="hours"></span></font>
</div>
</body>
</html>
<script type="text/javascript">
obj_hours=document.getElementById("hours");
justonce=0;
function wr_hours()
{
time=new Date();
time_min=time.getMinutes();
time_hours=time.getHours();
time_wr=((time_hours<10)?"0":"")+time_hours;
time_wr+=":";
time_wr+=((time_min<10)?"0":"")+time_min;
obj_hours.innerHTML=time_wr;
if (justonce==1 && frm.mins.value==time_min && frm.hour.value==time_hours) {
alert('welldone');
justonce=0;
}
}
setInterval("wr_hours();",1000);
</script>
Your function wr_hours could be a lot shorter by the way:
function wr_hours()
{
time=new Date();
obj_hours.innerHTML=("%02d",time.getHours())+":"+("%02d",time.getMinutes());
if (justonce==1
&& frm.mins.value==time.getMinutes()
&& frm.hour.value==time.getHours()) {
alert('welldone');
justonce=0;
}
}
How about this?
You can't hear the"alarm" in this code, so you have to download the sound you like, rewrite a part of the code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<bgsound id="bgm" src="２２２.mid" loop="-1">
<TITLE>Yokai clock～The digital clock changes to the analogue one！？～</TITLE>
<SCRIPT type="text/javascript">
<!--
var flg =0;
function timeCheck(){
Now = new Date();
Hour = Now.getHours();
Min = Now.getMinutes();
Sec = Now.getSeconds();
if(Hour <= 9) {
Hour = "\u0020" + Hour;
}
if(Min <= 9) {
Min = "0" + Min;
}
if(Sec <= 9) {
Sec = "0" + Sec;
}
document.sampleForm.dspTime.value=Hour + ":" + Min + ":" + Sec;
if((flg == 1)&&(document.sampleForm.alarmH.value == Hour)&&(document.sampleForm.alarmM.value == Min)){
document.getElementById('bgCol').value="３３３.wav", selectBgm(document.getElementById('bgCol')),
document.getElementById('star_clock').style.visibility="hidden", document.getElementById('clock').style.visibility="visible";
flg=-1; //＊One figure other than 0 and 1
}
}
function changeFlg(){
if(flg == 0){
document.sampleForm.setAlarm.value=" alarmOFF ";
document.getElementById("bgCol").value="";
selectBgm(document.getElementById('bgCol'));
flg =1;
}else{
document.sampleForm.setAlarm.value=" alarm ON ";
document.getElementById("bgms").reset();
selectBgm(document.getElementById('bgCol'));
document.getElementById('star_clock').style.visibility="visible";
document.getElementById('clock').style.visibility="hidden";
flg =0;
}
}
setInterval(timeCheck,100);
window.onload = timeCheck;
//-->
</SCRIPT>
<script type="text/javascript">
<!--
function selectBgm(e){
var selectedIndex = e.selectedIndex;
document.getElementById("bgCol").style.background=e[selectedIndex].style.backgroundColor;
bgm.src= e[selectedIndex ].value;
document.getElementById("bgCol").value=e[selectedIndex].value;
}
//-->
</script>
</head>
<BODY color="gold" bgcolor="black">
<div id="clock" style="visibility:hidden">
<div id="Od" style="position:absolute;top:0px;left:0px">
<div style="position:relative">
</div>
</div>
<div id="Of" style="position:absolute;top:0px;left:0px">
<div style="position:relative">
</div>
</div>
<div id="Oh" style="position:absolute;top:0px;left:0px">
<div style="position:relative">
</div>
</div>
<div id="Om" style="position:absolute;top:0px;left:0px">
<div style="position:relative">
</div>
</div>
<div id="Os" style="position:absolute;top:0px;left:0px">
<div style="position:relative">
</div>
</div>
</div>
<script type="text/javascript">
(function(){
"use strict";
function $(sel)
{
return document.getElementById(sel);
}
function $$(sel)
{
if (typeof document.getElementsByClassName === 'undefined')
{
return document.getElementsByName(sel);
}
return document.getElementsByClassName(sel);
}
var dCol = '00ff00', //date colour.
sCol = 'ff0000', //seconds colour.
mCol = '008000', //minutes colour.
hCol = '008000', //hours colour.
fCol = '0000ff', //face color
ClockHeight = 40,
ClockWidth = 40,
ClockFromMouseY = 0,
ClockFromMouseX = 100,
d = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
m = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
date = new Date(),
day = date.getDate(),
year = date.getYear() + 1900;
var TodaysDate = " " + d[date.getDay()] + " " + day + " " + m[date.getMonth()] + " " + year;
var D = TodaysDate.split('');
var H = '...';
H = H.split('');
var M = '....';
M = M.split('');
var S = '.....';
S = S.split('');
var Face = '1 2 3 4 5 6 7 8 9 10 11 12',
font = 'Helvetica, Arial, sans-serif',
size = 1,
speed = 0.6;
Face = Face.split(' ');
var n = Face.length;
var a = size * 10;
var ymouse = 0,
xmouse = 0,
scrll = 0,
props = '<span style="font-family:' + font + ';font-size:' + size + 'em; color:#' + fCol + '">',
props2 = '<span style="font-family:' + font + ';font-size:' + size + 'em; color:#' + dCol + '">';
var Split = 360 / n;
var Dsplit = 360 / D.length;
var HandHeight = ClockHeight / 4.5;
var HandWidth = ClockWidth / 4.5;
var HandY = -7,
HandX = -2.5,
step = 0.06,
currStep = 0,
y = [],
x = [],
Y = [],
X = [],
Dy = [],
Dx = [],
DY = [],
DX = [];
var i;
for (i = 0; i < n; i++)
{
y[i] = 0;
x[i] = 0;
Y[i] = 0;
X[i] = 0;
}
for (i = 0; i < D.length; i++)
{
Dy[i] = 0;
Dx[i] = 0;
DY[i] = 0;
DX[i] = 0;
}
var wrapper = $('clock');
var html = ''
// Date wrapper
html = '';
for (i = 0; i < D.length; i++)
{
html += '<div class="Date" name="Date" style="position:absolute;top:0px;left:0;height:' + a + ';width:' + a + ';text-align:center">' + props2 + D[i] + '</span></div>';
}
$('Od').children[0].innerHTML = html;
// Face wrapper
html = '';
for (i = 0; i < n; i++)
{
html += '<div class="Face" name="Face" style="position:absolute;top:0px;left:0;height:' + a + ';width:' + a + ';text-align:center">' + props + Face[i] + '</span></div>';
}
$('Of').children[0].innerHTML = html;
// Hours wrapper
html = '';
for (i = 0; i < H.length; i++)
{
html += '<div class="Hours" name="Hours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:' + hCol + ';text-align:center;font-weight:bold">' + H[i] + '</div>';
}
$('Oh').children[0].innerHTML = html;
// Minute wrapper
html = '';
for (i = 0; i < M.length; i++)
{
html += '<div class="Minutes" name="Minutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:' + mCol + ';text-align:center;font-weight:bold">' + M[i] + '</div>';
}
$('Om').children[0].innerHTML = html;
// Seconds wrapper
html = '';
for (i = 0; i < S.length; i++)
{
html += '<div class="Seconds" name="Seconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:' + sCol + ';text-align:center;font-weight:bold">' + S[i] + '</div>';
}
$('Os').children[0].innerHTML = html;
// Mouse move event handler
function Mouse(evnt)
{
if (typeof evnt === 'undefined')
{
ymouse = event.Y + ClockFromMouseY;
xmouse = event.X + ClockFromMouseX;
}
else
{
ymouse = evnt.clientY + ClockFromMouseY;
xmouse = evnt.clientX + ClockFromMouseX;
}
}
document.onmousemove = Mouse;
function ClockAndAssign()
{
var time = new Date();
var secs = time.getSeconds();
var sec = -1.57 + Math.PI * secs / 30;
var mins = time.getMinutes();
var min = -1.57 + Math.PI * mins / 30;
var hr = time.getHours();
var hrs = -1.575 + Math.PI * hr / 6 + Math.PI * parseInt(time.getMinutes(), 10) / 360;
$('Od').style.top = window.document.body.scrollTop;
$('Of').style.top = window.document.body.scrollTop;
$('Oh').style.top = window.document.body.scrollTop;
$('Om').style.top = window.document.body.scrollTop;
$('Os').style.top = window.document.body.scrollTop;
for (i = 0; i < n; i++)
{
var F = $$('Face')[i];
F.style.top = y[i] + ClockHeight * Math.sin(-1.0471 + i * Split * Math.PI / 180) + scrll;
F.style.left = x[i] + ClockWidth * Math.cos(-1.0471 + i * Split * Math.PI / 180);
}
for (i = 0; i < H.length; i++)
{
var HL = $$('Hours')[i];
HL.style.top = y[i] + HandY + (i * HandHeight) * Math.sin(hrs) + scrll;
HL.style.left = x[i] + HandX + (i * HandWidth) * Math.cos(hrs);
}
for (i = 0; i < M.length; i++)
{
var ML = $$('Minutes')[i].style;
ML.top = y[i] + HandY + (i * HandHeight) * Math.sin(min) + scrll;
ML.left = x[i] + HandX + (i * HandWidth) * Math.cos(min);
}
for (i = 0; i < S.length; i++)
{
var SL = $$('Seconds')[i].style;
SL.top = y[i] + HandY + (i * HandHeight) * Math.sin(sec) + scrll;
SL.left = x[i] + HandX + (i * HandWidth) * Math.cos(sec);
}
for (i = 0; i < D.length; i++)
{
var DL = $$('Date')[i].style;
DL.top = Dy[i] + ClockHeight * 1.5 * Math.sin(currStep + i * Dsplit * Math.PI / 180) + scrll;
DL.left = Dx[i] + ClockWidth * 1.5 * Math.cos(currStep + i * Dsplit * Math.PI / 180);
}
currStep -= step;
}
function Delay()
{
scrll = 0;
Dy[0] = Math.round(DY[0] += ((ymouse) - DY[0]) * speed);
Dx[0] = Math.round(DX[0] += ((xmouse) - DX[0]) * speed);
for (i = 1; i < D.length; i++) {
Dy[i] = Math.round(DY[i] += (Dy[i - 1] - DY[i]) * speed);
Dx[i] = Math.round(DX[i] += (Dx[i - 1] - DX[i]) * speed);
}
y[0] = Math.round(Y[0] += ((ymouse) - Y[0]) * speed);
x[0] = Math.round(X[0] += ((xmouse) - X[0]) * speed);
for (i = 1; i < n; i++) {
y[i] = Math.round(Y[i] += (y[i - 1] - Y[i]) * speed);
x[i] = Math.round(X[i] += (x[i - 1] - X[i]) * speed);
}
ClockAndAssign();
setTimeout(Delay, 20);
}
Delay();
}());
</script>
<form id="bgms" style="text-align:right">
<SELECT id="bgCol" style="background:#87cefa"; onchange="selectBgm(this);">
<OPTION style="background:silver" value="" >STOP</OPTION>
<OPTION style="background:#87cefa" value="２２２.mid" selected>CLASSIC</OPTION>
<OPTION style="background:yellowgreen" value="３３３.wav">ALARM</OPTION>
</SELECT>
</form>
<FORM NAME="sampleForm" style="text-align:center">
<font id="star_clock">
<INPUT id="Alarmy" type="text"STYLE="color:deeppink; background-color:black; font-size:25px; border:none;" size=7 NAME="dspTime">
</font>
<br><br>
<br><br>
<div>
★
<INPUT type="text" name="alarmH" size=2 value="00">
<INPUT type="text" name="alarmM" size=2 value="00">
<INPUT type="button" id="setAlarm" name="setAlarm" value=" alarm ON " onClick="changeFlg();">
★
</div>
</FORM>
</BODY>
</HTML>