I need your help in getting the appropriate code for showing the count down for the session time out in the progress bar or any part of the screen.
However, these actions should be included:
First Alert: "You have 5 minutes before your session expires"
Click here to continue your session.
or
Click here to logout
if no action in 5 mins then change the page to display "Your session has expired" and will be redirected to logout.jsp.
I tried to find good examples, but I did not find anyone.
Can anyone help on that issue.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
var timeoutHandle = null;
function startTimer(timeoutCount) {
if (timeoutCount == 0) {
window.location.href = 'logout.jsp';
} else if (timeoutCount < 3) {
document.getElementById('sessionTimer').innerHTML = 'You have ' + (timeoutCount * 3000)/1000 + 'seconds until timeout' ;
}
timeoutHandle = setTimeout(function () { startTimer(timeoutCount-1);}, '3000');
}
function refreshTimer() {
killTimer(timeoutHandle);
startTimer(3);
}
</script>
</head>
<body onload="startTimer(3)">
<div id="sessionTimer"></div>
</body>
</html>
Related
I have the following javascript code:
let gemStones = [
"Amethyst",
"Diamond",
"Emerald",
"Ruby",
"Sapphire",
"Topaz",
"Onyx",
];
let randomGemStone = gemStones[Math.floor(Math.random()*gemStones.length)];
function findGems()
{
console.log("You found a " + randomGemStone + "!");
}
Here's the html:
<!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">
<link rel="stylesheet" href="css.css">
<title>1. Gem Pond</title>
</head>
<body>
<h1>Gem Pond</h1>
<script src="main.js"></script>
<button id="gemPond_btn" onclick="findGems()">GET GEM</button>
</body>
</html>
When I click the "GET GEM" button several times in a row, I always get the same result instead of getting a random one.
I'm not sure what I'm doing wrong here.
Thanks in advance.
Move the let randomGemStone line into the findGems function:
function findGems()
{
let randomGemStone = gemStones[Math.floor(Math.random()*gemStones.length)];
console.log("You found a " + randomGemStone + "!");
}
Otherwise you run it only once on page load and not every time you click the button.
let gemStones = [
"Amethyst",
"Diamond",
"Emerald",
"Ruby",
"Sapphire",
"Topaz",
"Onyx",
];
const findGems = () => {
let randomGemStone = gemStones[Math.floor(Math.random()*gemStones.length)];
console.log(`You found a ${randomGemStone}!`);
}
Note I have moved randomGemStone inside the function. Or the value will only be updated once when the script loads, this way it will be random everytime findGems() is called
I want to post a prompt value to a jsp.. but I can't run the jsp page... Are there any mistakes in my code?
I want to make a prompt for a user to insert a value, then straight away submit it to a JSP to run the calculation... but it can't run...
html
<html>
<head>
<title>Lab Exercise 1 for Lab 3</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<script>
var celcius = prompt("Pleae enter current temperature in celcius.");
if(celcius!==null){
$.post("calculation.jsp",
{temp:celcius},
);
}
</script>
</body>
Jsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Temperature Converter</title>
</head>
<body>
<h1>Celsius to Fahrenheit:</h1>
<%
String celsius = request.getParameter("temp");
double thecelsius = Double.parseDouble(celsius);
double fahrenheit = ((9/5)*thecelsius + 32);
%>
The temperature in Fahrenheit for <%=celsius%> celsius is <%=fahrenheit%>F.
</body>
You are using ajax so you need to return response back and then you can show result inside callback of ajax i.e :
var celcius = prompt("Pleae enter current temperature in celcius.");
if (celcius !== null) {
$.post("calculation.jsp", {
temp: celcius
}, function(data) {
//here data will come back ..
$("#result").text(data) //you can set some data to divs..
});
}
and your jsp will look like below :
<%
//other codes
//below will send back to ajax ...
out.println("The temperature in Fahrenheit for "+celsius+"celsius is "+fahrenheit+"F");
%>
Other way :
You can simply redirect to that page using window.location.href = "calculation.jsp?temp="+celcius . But , this will be GET request not POST .
I want to use an animation consisting of several colors, in <meta name="theme-color" content="..."> eg: #87CEFA , #1E90FF , #4169E1...
Is it possible to animate the theme-color in Chrome on Android?
Finally I found a solution to this problem with the following JavaScript code. With this code, 3 theme-colors on browser's URL bar change dynamically.
var themeColorTest = new function() {
function e() {
"#87CEFA" === $themeColor.content ? $themeColor.content = "#1E90FF" : "#1E90FF" === $themeColor.content ? $themeColor.content = "#4169E1" : $themeColor.content = "#87CEFA",
setTimeout(e, 500)
}
this.init = function() {
$themeColor = document.querySelector("meta[name='theme-color']"),
e()
}
};
themeColorTest.init();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Animation of meta name theme-color</title>
<meta name="theme-color" content="#87CEFA" />
</head>
<body>
<p>More info on the <code>theme-color</code> meta tag is at this Google Developers Blog Post.</p>
</body>
</html>
I am learning Javascript right now. I have a small issue that I can't figure out how to solve it. I would like to clear content of my html page after my function displayed "Hi hi" in web page.
<html>
<body onload="alertFunc()">
<script>
function alertFunc() {
var statement = "Hi hi"
for (let i = 0; i < statement.length; i++) {
let c = statement.charAt(i);
setTimeout(function(){
document.write(c);
},i * 1000);
}
}
</script>
</body>
</html>
try this to clear content of your site after 1 second
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learning </title>
</head>
<body>
<script>
document.write('hi hi');
function alertFunc() {
setTimeout(function(){
document.write(' ');
}, 1000);
}
alertFunc();
</script>
</body>
</html>
if you want to change content with time again and again then you have to use setInterval
Hi I am working on project that use plugin wakeup timer the issue is that I get from SuccessCallback (this is the first argument of wakeup) "wakeup unhandled type"
I use the github's plugin https://github.com/wnyc/cordova-plugin-wakeuptimer
my index.html Where I must modify JS to make it works?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<!--<meta name="viewport" ... /> -->
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function init() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
myDevice = document.getElementById('deviceProperties');
myDevice.innerHTML = window.wakeuptimer.wakeup(function(result) {
if (result.type==='wakeup') {
alert('wakeup alarm detected--' + result.extra);
} else if(result.type==='set'){
alert('wakeup alarm set--' + result);
} else {
alert('wakeup unhandled type (' + result.type + ')');
}
}, function() {
alert('Error!');
}, {alarms : [{type : 'onetime',
time : { hour : 15, minute : 00 },
extra : { message : 'json containing app-specific information to be posted when alarm triggers' },
message : 'Alarm has expired!'}]
}
);
}
</script>
</head>
<body>
<h1>Dane z alarmu</h1>
<button type="button" id="deviceProperties" onclick="init()">Ustaw alarm</button>
</body>
</html>
Version Requirements
This plugin is meant to work with Cordova 3.5.0+.
I use version 1 of PGB so this quote is an answer