I'm working on a project where I need to manipulate time speed forward and backward. This module seems like what I need but I can't get it working:
https://github.com/mattbradley/warpjs/blob/master/README.md
Any help appreciated
<html>
<head>
</head>
<body>
<script src="jquery.min.js"></script>
<script src="warp.js"></script>
<div id="container"></div>
<span id="info"></span><br>
<span id="time"></span>
<span id="time2"></span>
<script>
setInterval(function() {
var now = new Date;
now = Date.warp.clock(true);
//now = Date.warp.speed(2); // DOESNT WORK?
var dateD = [now.getMonth() + 1,now.getDate(),now.getFullYear()];
var dateE = [now.getHours(),now.getMinutes(),now.getSeconds()];
var MDY = dateD.join("/");
var HMS = dateE.join(":");
time.innerHTML = (MDY);
time2.innerHTML = (HMS);
}, 20);
</script>
</body>
</html>
The wrap is a static method, it doesn't return any value(undefined is returned)
setInterval(function() {
Date.warp.speed(3);
var now = new Date;
var dateD = [now.getMonth() + 1, now.getDate(), now.getFullYear()];
var dateE = [now.getHours(), now.getMinutes(), now.getSeconds()];
var MDY = dateD.join("/");
var HMS = dateE.join(":");
time.innerHTML = (MDY);
time2.innerHTML = (HMS);
}, 1000);
Demo: Fiddle
Related
I just want to get the nodes's render time when I insert 100000 nodes into document,I had tried few ways,but result unexpected.
Here is the example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>node insert cost time test</title>
<script>
var st = Date.now();
</script>
</head>
<body>
<h1>Placehoder</h1>
<h1 id="h1"></h1>
<h1 id="h2"></h1>
<h1 id="h3"></h1>
<h1 id="h4"></h1>
<h1 id="h5"></h1>
<div id="box"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var en = Date.now();
$("#h4").html("White cost time:" + (en - st));
</script>
<script>
let data = [];
for(let i =0;i<100000;i++){
data.push({
name:"test",
age:18,
gender:"female"
})
}
const s = Date.now();
let list = data;
const timer = setInterval(() => {
const ss = Date.now();
if ($("#indexid-" + (list.length - 1)).size() > 0) {
const findTime = new Date();
const ft = + findTime;
$("#h5").html(findTime)
$("#h1").html(`The RealTime is ${findTime - s}`)
clearInterval(timer);
}
}, 1)
const tpl = '<div id="indexid-{id}">' +
'<h2>Name：{name}</h2>' +
'<h4>Gender：{gender}</h4>' +
'<h6>Age：{age}</h6>' +
'</div>'
let res = [];
list.forEach((item, index) => {
item.id = index;
let str = tpl.replace(/\{(\w+)\}/gi, function ($, $1) {
if (item[$1] + "") {
return item[$1];
}
return ""
})
res.push(str);
})
//insert 100000 nodes into document
//then get the nodes render time
$("#box").html(res.join(""))
const e = Date.now();
$("#h2").html(`JS execute time：${e - s}ms`)
</script>
</body>
</html>
This works well on desktop browsers,but not on the mobileweb.
On mobile web,the output time is smaller than what it should be.I also used MutationObserver Api,but got the same result,could anyone help me?
I can't find the problem with this code and I've been having way too much trouble with it tonight, can anyone help me out?
<html>
<script type="text/javascript">
var image = new Array ();
image[0] = "header1.png";
image[1] = "header2.png";
image[2] = "header3.png";
image[3] = "header4.png";
var size = image.length
var x = Math.floor(size*Math.random())
var backgroundImageFile = image[x];
var backgroundImageUrl = "url('" + backgroundImageFile + "')";
$('#header-image').css('background-image', 'backgroundImageUrl');
function op()
{
document.getElementById('header-image').innerHTML=backgroundImageUrl;
}
</script>
<body onload="op();">
<img src="backgroundImageFile">
</body>
</html>
You may try for this:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var image = new Array ();
image[0] = "https://www.w3schools.com/angular/pic_angular.jpg";
image[1] = "https://www.w3schools.com/images/colorpicker.gif";
image[2] = "https://www.w3schools.com/angular/pic_angular.jpg";
image[3] = "https://www.gstatic.com/images/branding/googlelogo/2x/googlelogo_dark_color_84x28dp.png";
var size = image.length
var x = Math.floor(size*Math.random());
var backgroundImageFile = image[x];
$('#imageId')[0].setAttribute('src',backgroundImageFile);
});
</script>
</head>
<body>
//displays circle with dimensions
image here:
<img src="backgroundImageFile" id="imageId">
</body>
</html>
Please find the solution: I think you are looking for same.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<script type="text/javascript">
var image = new Array ();
image[0] = "header1.png";
image[1] = "header2.png";
image[2] = "header3.png";
image[3] = "header4.png";
var size = image.length
var x = Math.floor(size*Math.random())
var backgroundImageFile = image[x];
var backgroundImageUrl = "url('" + backgroundImageFile + "')";
$('#header-image').css('background-image', 'backgroundImageUrl');
function op()
{
document.getElementById('header-image').innerHTML=backgroundImageUrl;
}
</script>
<body onload="op();">
<img src="backgroundImageFile">
<div id="header-image"></div>
</body>
</html>
Somehow I can't create external javascript files. If I import them from other examples, they work fine but if it is files I create and import them, they don't work. They are working fine if I inclued them into the html but if I reference them they don't work. I don't know what I am doing wrong.
Here's my html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Documento sem título</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.ui.draggable.js" type="text/javascript"></script>
<!-- Core files -->
<script src="jquery.alerts.js" type="text/javascript"></script>
<body>
<script type="text/javascript" src="horario.js"></script>
<div id="entrada">
<input id="time" class="inputs" type="text" maxlength="2"></input>
<input id="time2" class="inputs" type="text" maxlength="2"></input>
<button class="inputs" id="confirm_button" class="inputs1" onKeyPress="localStore()" onClick="localStore()">entrada</button>
</div>
<div id="result"></div>
<div id="millsentr"></div>
<div id="millssai"></div>
<div id="mills"></div>
<div id="totHoras"></div>
</body>
</html>
And here's the javascript file:
$(".inputs").keyup(function () {
if (this.value.length == this.maxLength) {
$(this).next('.inputs').focus();
}
});
$(".inputs1").keyup(function () {
if (this.value.length == this.maxLength) {
$(this).next('.inputs').focus();
}
});
$(document).ready( function() {
$("#confirm_button").click( function() {
jConfirm('Can you confirm this? ', 'Confirmation Dialog', function(r) {
var entradasaida = 0;
entradasaida = localStorage.getItem("entradasaida");
if(r == true){
if(entradasaida == 0){
var time = $('#time').val();
var time2 = $('#time2').val();
var datetime = new Date();
var year = datetime.getFullYear();
var month = datetime.getMonth()+1;
if(month < 10){
month = "0"+month
}
var day = datetime.getDay()+1;
if(day < 10){
day = "0"+day
}
var date = new Date(year+"-"+month+"-"+day+" "+time+":"+time2);
var mills = date.getTime();
localStorage.setItem("horas", time);
localStorage.setItem("mins", time2);
localStorage.setItem("entradasaida",1);
localStorage.setItem("millsEnt",mills);
$('#confirm_button').text("Saida");
$('#time, #time2').val("");
$('#millsentr').text(mills);
} else{
var horasEnt = localStorage.getItem("horas");
var minsEnt = localStorage.getItem("mins");
var entrada = localStorage.getItem("millsEnt");
localStorage.setItem("entradasaida",0);
$('#confirm_button').text("Entrada");
var time = $('#time').val();
var time2 = $('#time2').val();
var datetime = new Date();
var year = datetime.getFullYear();
var month = datetime.getMonth()+1;
if(month < 10){
month = "0"+month
}
var day = datetime.getDay()+1;
if(day < 10){
day = "0"+day
}
var date1 = new Date(year+"-"+month+"-"+day+" "+time+":"+time2);
var millssai = date1.getTime();
$('#millssai').text(millssai);
var totMills = (millssai - entrada)
var horas = time - horasEnt;
var mins = time2 - minsEnt;
if(mins < 0){
mins = mins*(-1);
horas = horas-1;
}
var totHoras = horas+":"+mins
$('#totHoras').text(totHoras);
$('#mills').text(totMills);
$('#time, #time2').val("");
}
} else{r == false}
});
});
});
In this, the horario.js is the file I created and is not working, the other script files I used from examples are working ok.
I was wondering what's wrong with my program. Am i having a syntax error or am i missing something in my build in array sort?. I'm pretty sure the problem lies within the "for" loop but i cant seem to find it. Some suggestion or help would be great.
<HTML>
<!Foundation Page for building our Javascript programs>
<HEAD>
<TITLE>The Foundation Page </TITLE>
<SCRIPT LANGUAGE = "JavaScript">
function leaderboard()
{
var temp1;
var temp2;
var temp3;
var temp4;
var temp5;
temp1 = 10
temp2 = 20
temp3 = 30
temp4 = 40
temp5 = 50
var leader = new Array(5);
leader[0] = temp1;
leader[1] = temp2;
leader[2] = temp3;
leader[3] = temp4;
leader[4] = temp5;
leader.sort(function(a,b){return b-a});
var myContent = '';
for (var d=0;d<5;d++)
{
myContent += "score: " + leader[d] + "<BR>";
}
document.getElementById("leaderboard").innerHTML = myContent;
}
</SCRIPT>
<HEAD>
<BODY>
<BODY BGCOLOUR = "WHITE">
<H2>The Foundation Page </H2>
<HR>
<SCRIPT LANGUAGE = "Javascript"> leaderboard() </SCRIPT>
</BODY>
</HTML>
You are trying to write the o/p to an element with id leaderboard which is not present in the page. Which is giving an error Uncaught TypeError: Cannot set property 'innerHTML' of null - it is not a syntax error.
So just create an element with the id leaderboard as shown below
<HTML>
<!Foundation Page for building our Javascript programs>
<HEAD>
<TITLE>The Foundation Page </TITLE>
<SCRIPT LANGUAGE = "JavaScript">
function leaderboard()
{
var temp1;
var temp2;
var temp3;
var temp4;
var temp5;
temp1 = 10
temp2 = 20
temp3 = 30
temp4 = 40
temp5 = 50
var leader = new Array(5);
leader[0] = temp1;
leader[1] = temp2;
leader[2] = temp3;
leader[3] = temp4;
leader[4] = temp5;
leader.sort(function(a,b){return b-a});
var myContent = '';
for (var d=0;d<5;d++)
{
myContent += "score: " + leader[d] + "<BR>";
}
document.getElementById("leaderboard").innerHTML = myContent;
}
</SCRIPT>
<HEAD>
<BODY>
<BODY BGCOLOUR = "WHITE">
<H2>The Foundation Page </H2>
<HR>
<div id="leaderboard"></div>
<SCRIPT LANGUAGE = "Javascript"> leaderboard() </SCRIPT>
</BODY>
</HTML>
Demo: Fiddle
This question already has answers here:
How to calculate number of days between two dates?
(42 answers)
Closed 9 years ago.
This script counts the days between two dates and shows the result on a span element:
<span id="result"></span>
But instead I want to show the result as value of an input element:
<input name="name" type="text" id="name" value="i want count days here " />
How can I do this?
This is the complete code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
.ui-datepicker {font-size:11px;}
</style>
<script>
$(function() {
$( "#from" ).datepicker({
onSelect: calculate
});
});
$(function() {
$( "#to" ).datepicker({
onSelect: calculate
});
});
</script>
</head>
<body>
<form class="formwhite">
<table>
<tr><td>From:</td><td><input type="text" id="from" onKeyUp="calculate();" /> </td></tr>
<tr><td>To:</td><td><input type="text" id="to" onKeyUp="calculate();" /></td></tr>
</table>
</form>
<span id="result"></span>
<script>
var calculate = function() {
var from = document.getElementById("from").value;
var fromdate = from.slice(3, 5);
fromdate = parseInt(fromdate);
var frommonth = from.slice(0, 2);
frommonth = parseInt(frommonth);
var fromyear = from.slice(6, 10);
fromyear = parseInt(fromyear);
var to = document.getElementById("to").value;
var todate = to.slice(3, 5);
todate = parseInt(todate);
var tomonth = to.slice(0, 2);
tomonth = parseInt(tomonth);
var toyear = to.slice(6, 10);
toyear = parseInt(toyear);
var oneDay = 24*60*60*1000;
var firstDate = new Date(fromyear,frommonth,fromdate);
var secondDate = new Date(toyear,tomonth,todate);
var diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay)));
if (diffDays)
document.getElementById("result").innerHTML=diffDays;
}
</script>
</body>
</html>
So you're asking the question: "How do I get a value from one field and set it in another?" You want http://api.jquery.com/val/ :
$("#name").val($("#result").val());
$("#result").val() gets whatever value the element with id result has.
$("#name").val(value) sets the value of the element with id name
Or, simply add (or replace) the line
document.getElementById("name").value = diffDays;
in the same if block as where you have
document.getElementById("result").innerHTML = diffDays;
Here's your entire <script> block, with my one line added:
<script>
var calculate = function() {
var from = document.getElementById("from").value;
var fromdate = from.slice(3, 5);
fromdate = parseInt(fromdate);
var frommonth = from.slice(0, 2);
frommonth = parseInt(frommonth);
var fromyear = from.slice(6, 10);
fromyear = parseInt(fromyear);
var to = document.getElementById("to").value;
var todate = to.slice(3, 5);
todate = parseInt(todate);
var tomonth = to.slice(0, 2);
tomonth = parseInt(tomonth);
var toyear = to.slice(6, 10);
toyear = parseInt(toyear);
var oneDay = 24*60*60*1000;
var firstDate = new Date(fromyear,frommonth,fromdate);
var secondDate = new Date(toyear,tomonth,todate);
var diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay)));
if (diffDays) /* THE NEW STUFF IS RIGHT HERE*/ {
document.getElementById("result").innerHTML=diffDays;
document.getElementById("name").value=diffDays;
} // THE NEW STUFF ENDS HERE
}
</script>