|
 |
| |
อยากทราบวิธีเช็คเงื่อนไข ตัวแปร ajax ช่วยหน่อยครับ ผมมือใหม่ |
| |
 |
|
|
 |
 |
|
############เงื่อนไขคือ ถ้า val["Temp"] > 25 ให้เว็บมีเสียงแจ้งเตือนครับ############
โค้ด
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<link href="css/mobile.css" rel="stylesheet">
<title>Smart Room</title>
<script type="text/javascript" >
function date_time(id) {
date = new Date;
year = date.getFullYear();
month = date.getMonth();
months = new Array('January', 'February', 'March', 'April', 'May','June', 'July', 'August', 'September', 'October', 'November', 'December');
d = date.getDate();
day = date.getDay();
days = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
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 = '' + days[day] + ' ' + d + ' ' + months[month] + ' ' + year + ' ' + h + ':' + m + ':' + s;
document.getElementById(id).innerHTML = result;
setTimeout('date_time("' + id + '");', '1000');
return true;
}
</script>
<script>
function getDataFromDb()
{
$.ajax({
url: "getData.php" ,
type: "POST",
data: ''
})
.success(function(result) {
var obj = jQuery.parseJSON(result);
if(obj != '')
{
//$("#myTable tbody tr:not(:first-child)").remove();
$("#myBody").empty();
$.each(obj, function(key, val) {
var tr = "<tr>";
if(val["Temp"] > 25){
tr = tr + "<td><h3><center><font color = red>" + "Temp OVER = " + val["Temp"] + "</h3></center></font></td>";
}
else{
tr = tr + "<td><h3><center>" + "Temp = " + val["Temp"] + "</h3></center></td>";
}
if(val["Motion"] == 1){
tr = tr + "<td><h3><center><font color = red>" + "Motion Warnning " + "</h3></center></font></td>";
}
else{
tr = tr + "<td><h3><center>" + "Safty Motion" + "</h3></center></td>";
}
if(val["Door"] == 1){
tr = tr + "<td><h3><center><font color = red>" + "Door Warnning " + "</h3></center></font></td>";
}
else{
tr = tr + "<td><h3><center>" + "Safty Door" + "</h3></center></td>";
}
if(val["Current"] == 0){
tr = tr + "<td><h3><center><font color = red>" + "Engine Warnning " + "</h3></center></font></td>";
}
else{
tr = tr + "<td><h3><center>" + "Safty Engine" + "</h3></center></td>";
}
tr = tr + "</tr>";
$('#myTable > tbody:last').append(tr);
});
}
});
}
setInterval(getDataFromDb, 100); // 1000 = 1 second
</script>
</head>
<body role="document">
<div class="container theme-showcase" role="main">
<div class="jumbotron">
<h1><center>Smart Room</center></h1>
<p><h3><center> Reading Sensor Temp, Motion, Door and Current </center></h3> </p>
<center><span id="date_time" style="color: #000000; font-size: xx-large;"></span>
<script type="text/javascript"> window.onload = date_time('date_time');</script></center>
</div>
<center>
<table class=table id="myTable">
<!-- head table -->
<thead>
<tr>
<td><h2><center>Temp</center></h2></td>
<td><h2><center>Motion</center></h2></td>
<td><h2><center>Door</center></h2></td>
<td><h2><center>Current</center></h2></td>
</tr>
</thead>
<!-- body dynamic rows -->
<tbody id="myBody"></tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
</center>
</body>
</html>
Tag : HTML/CSS, JavaScript, Ajax, jQuery
|
|
|
 |
 |
 |
 |
| Date :
2016-07-13 13:29:21 |
By :
watwat |
View :
731 |
Reply :
2 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
html
Code (PHP)
<audio id="sound_alert" src="wav/cartoon026.wav"></audio>
jQuery
Code (JavaScript)
if(val["Temp"] > 25){
$("#sound_alert").get(0).play();
}
|
| |
|
|
| |
| Date :
2016-07-15 14:08:41 |
By :
fossil31 |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 03
|
