I'm trying to make my digital clock change from AM to PM when it needs too. But it will only stay on AM even when it should be on PM. And it needs to be the same time as the time set on the computer. Care to help? Thanks guys, here's my code :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Current Time</title>
<style>
.mytime {font-size: 150px;
margin: 0 auto;
padding: 10px;
color: #ffffff;
font-weight: bold;
text-align: center;
}
.myTxt {font-size: 72px;
margin: 0 auto;
padding: 10px;
color: #ffffff;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body style="background-color: #000;">
<div ID="TimeBlock" class="mytime"></div>
<div ID="Content" class="myTxt"><small>Brought to you by</small> <br>Nate
<br /><br /><br />
A Simulated Workplace Environment
`enter code here`</div>
<script type="text/javascript" langauage="javascr
ipt">
function renderTime() {
var currentTime = new Date();
var diem = "AM";
var h = currentTime.getHours();
var m = currentTime.getMinutes();
var s = currentTime.getSeconds();
if (h == 0) {
h = 12;
}
else if (h > 12) {
h = h - 12
diem = "PM";
}
if (h < 10) {
h = "0" + h
}
if (m < 10) {
m = "0" + m
}
if (s < 10) {
s = "0" + s
}
var myDisplayTime = document.getElementById("TimeBlock");
myDisplayTime.textContent = h + ":" + m + ":" + s + " " + diem;
myDisplayTime.innerText = h + ":" + m + ":" + s + " " + diem;
setTimeout('renderTime()', 1000);
}
renderTime();
</script>
<script>
alert("Open this?")
</script>
</body>
Related
So I have this code for a password generator with reCAPTCHA as a term of use.
this is the code:
<!DOCTYPE html>
<html>
<head>
<style>
#password-container {
width: 500px;
margin: 0 auto;
text-align: center;
font-size: 20px;
font-weight: bold;
padding: 20px;
border: 2px solid black;
border-radius: 10px;
}
button {
margin-top: 20px;
padding: 10px 20px;
border-radius: 5px;
background-color: blue;
color: white;
cursor: pointer;
}
</style>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<div id="password-container">
<div id="password">Press the button to generate new password</div>
<button id="generate-button">new password</button>
<button id="copy-button" style="display: none;">copy to clipboard</button>
<br><br>
<div class="g-recaptcha" data-sitekey="your-site-key"></div>
</div>
<script>
function generatePassword() {
const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!##$%^&*()_+-=[]{};:'\"\\|,.<>/?`~";
const numbers = "0123456789";
const symbols = "!##$%^&*()_+-=[]{};:'\"\\|,.<>/?`~";
let password = "";
for (let i = 0; i < 8; i++) {
password += chars.charAt(Math.floor(Math.random() * chars.length));
}
for (let i = 0; i < 2; i++) {
password += numbers.charAt(Math.floor(Math.random() * numbers.length));
}
for (let i = 0; i < 2; i++) {
password += symbols.charAt(Math.floor(Math.random() * symbols.length));
}
return password;
}
document.querySelector("#generate-button").addEventListener("click", function() {
const password = generatePassword();
document.querySelector("#password").innerHTML = password;
document.querySelector("#copy-button").style.display = "inline-block";
});
document.querySelector("#copy-button").addEventListener("click", function() {
const password = document.querySelector("#password").innerHTML;
navigator.clipboard.writeText(password).then(function() {
alert("copied to clipboard");
});
});
</script>
</body>
</html>
When pressing on the "New password" button, the password is generated even when the reCAPTCHA isn't solved.
how can I make code follow the right order?
I think the code is pretty self explanatory.
After adding and entering a button, I implemented changing the table by pressing the button, but I want to change the column and row of the table immediately as soon as I enter the number. For example, if I enter 4, I want to have a 4X4 table. I don't know. Help me.
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
div { padding: 30px; margin: 30px auto; width: 600px;
border: 1px solid #ccc; box-shadow: 3px 3px 3px #aaa; }
table { border-collapse: collapse; margin-top: 10px; }
td { width: 50px; height: 50px; border: 1px solid gray; font-size: 20pt;
text-align: center; cursor: pointer; }
.yellow { background-color: yellow; }
</style>
</head>
<body>
<div id="app">
<input type="text" v-model.number="size" >
<button type="button" #click="change(size)">Change</button>
<table :style="{backgroundColor: color}">
<tr v-for="(row, index1) in matrix" v-bind:key="index1">
<td v-for="(value, index2) in row" v-bind:key="index2">
{{ value }}
</td>
</tr>
</table>
<h1>{{size}}</h1>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
size: 3,
matrix: [],
clicked: [],
color: "",
},
created() {
for (let r = 0; r < this.size; ++r) {
this.matrix[r] = [];
for (let c = 0; c < this.size; ++c)
this.matrix[r][c] = r * this.size + c +1;
}
},
methods:{
change(s){
this.size=s
console.log(this.size)
let arr=[]
for (let r = 0; r < this.size; ++r) {
arr[r] = [];
for (let c = 0; c < this.size; ++c)
arr[r][c] = r * this.size + c +1;
}
this.matrix=arr
}
}
})
</script>
</body>
</html>
you can using a watcher on your size state
the watch statement should be like this:
watch: {
size(newVal){
this.change(newVal)
}
}
and you can see a working example in the below :)
var app = new Vue({
el: '#app',
data: {
size: 3,
matrix: [],
clicked: [],
color: "",
},
created() {
this.change(this.size)
},
methods:{
change(s){
console.log(this.size)
let arr=[]
for (let r = 0; r < this.size; ++r) {
arr[r] = [];
for (let c = 0; c < this.size; ++c)
arr[r][c] = r * this.size + c +1;
}
this.matrix=arr
}
},
watch: {
size(newVal){
this.change(newVal)
}
}
})
div { padding: 30px; margin: 30px auto; width: 600px;
border: 1px solid #ccc; box-shadow: 3px 3px 3px #aaa; }
table { border-collapse: collapse; margin-top: 10px; }
td { width: 50px; height: 50px; border: 1px solid gray; font-size: 20pt;
text-align: center; cursor: pointer; }
.yellow { background-color: yellow; }
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.number="size" >
<table :style="{backgroundColor: color}">
<tr v-for="(row, index1) in matrix" v-bind:key="index1">
<td v-for="(value, index2) in row" v-bind:key="index2">
{{ value }}
</td>
</tr>
</table>
<h1>{{size}}</h1>
</div>
</body>
</html>
How can I cause these div elements to stop and return to their starting position once they collide with one another? I tried adjusting adding to the pixels in the function, but that didn't work.
For example, I tried elem.style.right = pos + '100px'. When I tried this the div element ended up not moving at all.
You can try some form of collision detection. See the collisionDetection method below.
let leftIntervalId;
var leftElem = document.getElementById("myAnimation");
function myMove() {
var pos = 0;
leftIntervalId = setInterval(frame, 10);
function frame() {
if (pos == 350) {
clearInterval(leftIntervalId);
} else {
pos++;
leftElem.style.top = pos + 'px';
leftElem.style.left = pos + 'px';
}
}
}
const rightElem = document.getElementById("Animation");
function Move() {
var pos = 0;
var id = setInterval(frame, 10);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
rightElem.style.top = pos + 'px';
rightElem.style.right = pos + 'px';
collisionDetection(parseInt(leftElem.style.left.replace(/px/, "")), pos,
leftIntervalId, id);
}
}
}
function collisionDetection(leftPos, rightPos, leftIntervalId, rightIntervalId) {
if (leftPos + 100 > 400 - rightPos) {
clearInterval(leftIntervalId);
clearInterval(rightIntervalId);
setTimeout(function() {
leftElem.style.top = '0px';
leftElem.style.left = '0px';
rightElem.style.top = '0px';
rightElem.style.right = '0px';
},
500);
}
}
#myContainer {
width: 400px;
height: 400px;
position: relative;
background: #eee;
}
#myAnimation {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
#Animation {
width: 50px;
height: 50px;
position: absolute;
right: 0;
background-color: blue;
}
<p>
<button onclick="myMove(); Move()">Click Me</button>
</p>
<div id="myContainer">
<div id="myAnimation"></div>
<div id="Animation"></div>
</div>
Firstly, I followed this to generate keys, certificates and CA certificates to directories which are client, server and testca. Then I verified, SSL works.
Then I followed this to configure RabbitMQ Web-Stomp Plugin, and my ssl_config is as following:
[
{rabbitmq_web_stomp,
[{ssl_config, [{port, 15671},
{backlog, 1024},
{certfile, "path/to/certs/client/cert.pem"},
{keyfile, "path/to/certs/client/key.pem"},
{cacertfile, "path/to/certs/testca/cacert.pem"},
{password, "changeme"}]}]}
].
However, when I tried to connect it via websockets by following code, which is copied from here, and I made some modifications.
<!DOCTYPE html>
<html><head>
<script src="jquery.min.js"></script>
<script src="stomp.js"></script>
<style>
.box {
width: 440px;
float: left;
margin: 0 20px 0 20px;
}
.box div, .box input {
border: 1px solid;
-moz-border-radius: 4px;
border-radius: 4px;
width: 100%;
padding: 5px;
margin: 3px 0 10px 0;
}
.box div {
border-color: grey;
height: 300px;
overflow: auto;
}
div code {
display: block;
}
#first div code {
-moz-border-radius: 2px;
border-radius: 2px;
border: 1px solid #eee;
margin-bottom: 5px;
}
#second div {
font-size: 0.8em;
}
</style>
<title>RabbitMQ Web STOMP Examples : Echo Server</title>
<link href="main.css" rel="stylesheet" type="text/css"/>
</head><body lang="en">
<h1>RabbitMQ Web STOMP Examples > Echo Server</h1>
<div id="first" class="box">
<h2>Received</h2>
<div></div>
<form><input autocomplete="off" value="Type here..."></input></form>
</div>
<div id="second" class="box">
<h2>Logs</h2>
<div></div>
</div>
<script>
var has_had_focus = false;
var pipe = function(el_name, send) {
var div = $(el_name + ' div');
var inp = $(el_name + ' input');
var form = $(el_name + ' form');
var print = function(m, p) {
p = (p === undefined) ? '' : JSON.stringify(p);
div.append($("<code>").text(m + ' ' + p));
div.scrollTop(div.scrollTop() + 10000);
};
if (send) {
form.submit(function() {
send(inp.val());
inp.val('');
return false;
});
}
return print;
};
// Stomp.js boilerplate
var client = Stomp.client('wss://192.168.111.131:15671/ws');
client.debug = pipe('#second');
var print_first = pipe('#first', function(data) {
client.send('/queue/webstomp', {"content-type":"text/plain"}, data);
});
var on_connect = function(x) {
id = client.subscribe("/queue/webstomp", function(d) {
print_first(d.body);
});
};
var on_error = function() {
console.log('error');
};
client.connect('test', 'test', on_connect, on_error, '/');
$('#first input').focus(function() {
if (!has_had_focus) {
has_had_focus = true;
$(this).val("");
}
});
</script>
</body></html>
it replied me that I lost connection as following screenshot.
I'd be really appreciate any helpful suggestion on this issue.
BTW: this code example works when I didn't use SSL.
Finally I figured this out by referring this post, so the key point is to explicitly authorized my certificate by visiting the address in https first, in my case is wss://192.168.111.131:15671/ws. So I need to visit https://192.168.111.131:15671/ws in browser and authorize the exception and then I can make my wss connection normally.
I am using SimplePie for Yahoo weather forecast. I am on a new Server and now the output looks like this:
set_feed_url($path . $code); $feed->set_item_class('SimplePie_Item_YWeather'); $feed->init(); function time2minuts($time) { $minuts = 0; $atime = explode(" ", $time); $ttime = explode(":", $atime[0]); if ($atime[1] == "pm") { if ((int)$ttime[0]!=12) $ttime[0] = $ttime[0] + 12; } $minuts = (int)$ttime[0] * 60 + (int)$ttime[1]; return $minuts; } $weather = $feed->get_item(0); $fore = $weather->get_forecasts(); $unit = $weather->get_units_temp(); $ampm = "n"; // indica noche $icon = $weather->get_condition_code(); // Calculamos la hora de Mallorca en minutos $curday = time2minuts(date("g:i a")); //echo $curday.'---'.date('h:m d.m.y').'---'.date("g:i a"); $iniday = time2minuts($weather->get_sunrise()); $endday = time2minuts($weather->get_sunset()); if ($curday > $iniday && $curday < $endday) { $ampm = "d"; // indica dia } $land = $weather->get_country(); if($land == 'Spain') { $land = 'Spanien'; } ?>
This is my php code. My PHP Version is 5.5.9-1ubuntu4.6 simplepie 1.3.1
Thank you for your help,
mallmis
thanks for your fast response.
My script is working ón the old server. But I will post:
<?
require("simplepie.inc");
require("simplepie_yahoo_weather.inc");
$code = "769293"; // Menorca 12517557
$path = "http://weather.yahooapis.com/forecastrss?u=c&w=";
$feed = new SimplePie();
$feed->set_feed_url($path . $code);
$feed->set_item_class('SimplePie_Item_YWeather');
$feed->init();
function time2minuts($time)
{
$minuts = 0;
$atime = explode(" ", $time);
$ttime = explode(":", $atime[0]);
if ($atime[1] == "pm") {
if ((int)$ttime[0]!=12) $ttime[0] = $ttime[0] + 12;
}
$minuts = (int)$ttime[0] * 60 + (int)$ttime[1];
return $minuts;
}
$weather = $feed->get_item(0);
$fore = $weather->get_forecasts();
$unit = $weather->get_units_temp();
$ampm = "n"; // indica noche
$icon = $weather->get_condition_code();
// Calculamos la hora de Mallorca en minutos
$curday = time2minuts(date("g:i a"));
//echo $curday.'---'.date('h:m d.m.y').'---'.date("g:i a");
$iniday = time2minuts($weather->get_sunrise());
$endday = time2minuts($weather->get_sunset());
if ($curday > $iniday && $curday < $endday) {
$ampm = "d"; // indica dia
}
$land = $weather->get_country();
if($land == 'Spain')
{
$land = 'Spanien';
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Yahoo Weather</title>
<style type="text/css">
<!--
body {
font-family: "Trebuchet MS", Tahoma, Verdana;
font-size: 12px;
font-weight: normal;
color: #777777;
text-decoration: none;
background-color: #FFFFFF;
}
#weather {
width: 240px;
height: 120px;
margin-left: 10px;
}
#current {
width: 240px;
height: 120px;
text-align: right;
color: #FFFFFF;
font-weight: bold;
}
#current #temp {
font-size: 24px;
font-style: normal;
padding-top: 40px;
padding-right: 16px;
}
#current #fore {
padding-right: 16px;
font-size: 11px;
}
#current #city {
padding-right: 16px;
}
-->
</style>
</head>
<body>
<div id="weather" style="background:url('icon<?php echo $ampm; ?>.png') no-repeat 40px 40px;">
<div id="current" style="background:url('http://l.yimg.com/us.yimg.com/i/us/nws/weather/gr/<?php echo $icon . $ampm . ".png"; ?>') no-repeat 0px -10px;">
<div id="temp"><?php echo $weather->get_temperature(); ?>°<?php echo $unit; ?></div>
<div id="fore"><?php echo $fore[0]->get_low() . "°" . $unit; ?>
bis <?php echo $fore[0]->get_high() . "°" . $unit; ?></div>
<div id="city"><?php echo 'Mallorca' . ", " . $land; ?></div>
</div>
</div>
</body>
</html>
I think it has do do something with my new server.
Cheers,
mallmis