Em có viết code dùng javascript và Php để cập nhật dữ liệu vào bảng (Table).
Sau 5s Thì javascript chạy và php sẽ (select) vào My Sql để lấy dữ liệu!
Nhưng khi em có thay đổi trong My SQL mà trên trang index không thấy tự cập nhật lại, mà em phải nhấn F5 mới được!
Trang index của em
Mã:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BẢNG GIÁ</title>
<link rel="stylesheet" href="Css/css1.css" />
<script type="text/javascript" src="JavaScript/JavaScript.js"></script>
<script type="text/javascript">
function heightbg(){
tmp = screen.height;
h = tmp.toString();
document.getElementById("home").style.border = "0px double red";
document.getElementById("home").style.height=h + "px";
time();
selectMySQL();
}
var t;
var c= 0;
var Name1 = '';
var L11 =0;
var L12 =0;
var L13 =0;
var Name2 = '';
var L21 =0;
var L22 =0;
var L23 =0;
var Name3 = '';
var L31 =0;
var L32 =0;
var L33 =0;
var Name4 = '';
var L41 =0;
var L42 =0;
var L43 =0;
var Name5 = '';
var L51 =0;
var L52 =0;
var L53 =0;
var Name6 = '';
var L61 =0;
var L62 =0;
var L63 =0;
<?php include("config.php"); ?>
function selectMySQL(){
<?php
$str = "SELECT * FROM dmtiente";
$cmd=mysqli_query($servermysql, $str);
?>
c=c+1;
GetTmp();
}
function GetTmp(){
<?php
$j = 0;
while($i=mysqli_fetch_array($cmd))
{
if($i["tienteID"] == '49'){
?>
name1 = "<?php echo $i["tienteName"]; ?>";
L11 = <?php echo $i["Gia_mua"]; ?>;
L12 = <?php echo $i["Gia_ban"]; ?>;
L13 = <?php echo $i["Khac_hieu"]; ?>;
<?php
}
if($i["tienteID"] == '39'){
?>
name2 = "<?php echo $i["tienteName"]; ?>";
L21 = <?php echo $i["Gia_mua"]; ?>;
L22 = <?php echo $i["Gia_ban"]; ?>;
L23 = <?php echo $i["Khac_hieu"]; ?>;
<?php
}
if($i["tienteID"] == '8K'){
?>
name3 = "<?php echo $i["tienteName"]; ?>";
L31 = <?php echo $i["Gia_mua"]; ?>;
L32 = <?php echo $i["Gia_ban"]; ?>;
L33 = <?php echo $i["Khac_hieu"]; ?>;
<?php
}
if($i["tienteID"] == '1K'){
?>
name4 = "<?php echo $i["tienteName"]; ?>";
L41 = <?php echo $i["Gia_mua"]; ?>;
L42 = <?php echo $i["Gia_ban"]; ?>;
L43 = <?php echo $i["Khac_hieu"]; ?>;
<?php
}
if($i["tienteID"] == 'IT'){
?>
name5 = "<?php echo $i["tienteName"]; ?>";
L51 = <?php echo $i["Gia_mua"]; ?>;
L52 = <?php echo $i["Gia_ban"]; ?>;
L53 = <?php echo $i["Khac_hieu"]; ?>;
<?php
}
if($i["tienteID"] == 'BA'){
?>
name6 = "<?php echo $i["tienteName"]; ?>";
L61 = <?php echo $i["Gia_mua"]; ?>;
L62 = <?php echo $i["Gia_ban"]; ?>;
L63 = <?php echo $i["Khac_hieu"]; ?> ;
<?php
}
}
?>
Gethtml();
}
function Gethtml(){
tmp='<a href="#">'+ c +'</a>';
document.getElementById("name1").innerHTML=name1;
document.getElementById("name2").innerHTML=name2;
document.getElementById("name3").innerHTML=name3;
document.getElementById("name4").innerHTML=name4;
document.getElementById("name5").innerHTML=name5;
document.getElementById("name6").innerHTML=name6;
document.getElementById("L11").innerHTML=L11;
document.getElementById("L21").innerHTML=L21;
document.getElementById("L31").innerHTML=L31;
document.getElementById("L41").innerHTML=L41;
document.getElementById("L51").innerHTML=L51;
document.getElementById("L61").innerHTML=L61;
document.getElementById("L12").innerHTML=L12;
document.getElementById("L22").innerHTML=L22;
document.getElementById("L32").innerHTML=L32;
document.getElementById("L42").innerHTML=L42;
document.getElementById("L52").innerHTML=L52;
document.getElementById("L62").innerHTML=L62;
document.getElementById("L13").innerHTML=L13;
document.getElementById("L23").innerHTML=L23;
document.getElementById("L33").innerHTML=L33;
document.getElementById("L43").innerHTML=L43;
document.getElementById("L53").innerHTML=L53;
document.getElementById("L63").innerHTML=L63;
<?php
mysqli_free_result($cmd);
mysqli_close($servermysql);
?>
t=setTimeout("selectMySQL()",5000);
}
</script>
</head>
<body onload="heightbg()">
<div id="home">
<div id="header">
<div id="clock"></div>
</div>
<div id="content">
<table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<th scope="col" id="loai" class="col1">LOẠI</th>
<th scope="col" id="gia_mua" class="col2">GIÁ MUA</th>
<th scope="col" id="gia_ban" class="col3">GIÁ BÁN</th>
<th scope="col" id="khac_hieu" class="col4">KHÁC HIỆU</th>
<th rowspan="7" scope="col" class="col7"> </th>
</tr>
<tr>
<th scope="row" id="name1" class="rloai">Loại 1</th>
<td id="L11">0.000</td>
<td id="L12">0.000</td>
<td id="L13">0.000</td>
</tr>
<tr>
<th scope="row" id="name2" class="rloai">Loại 2</th>
<td id="L21">0.000</td>
<td id="L22">0.000</td>
<td id="L23">0.000</td>
</tr>
<tr>
<th scope="row" id="name3" class="rloai">Loại 3</th>
<td id="L31">0.000</td>
<td id="L32">0.000</td>
<td id="L33">0.000</td>
</tr>
<tr>
<th scope="row" id="name4" class="rloai">Loại 4</th>
<td id="L41">0.000</td>
<td id="L42">0.000</td>
<td id="L43">0.000</td>
</tr>
<tr>
<th scope="row" id="name5" class="rloai">Loại 5</th>
<td id="L51">0.000</td>
<td id="L52">0.000</td>
<td id="L53">0.000</td>
</tr>
<tr>
<th scope="row" id="name6" class="rloai">Loại 6</th>
<td id="L61">0.000</td>
<td id="L62">0.000</td>
<td id="L63">0.000</td>
</tr>
</table>
</div>
<div id="footer">
<marquee>Công Ty Cổ Phần ZZZZZZZ Là Một Trong 10 Doanh Nghiệp Đứng Đầu Trong Lĩnh Vực Công Nghệ Bảo Mật!</marquee>
<h2>CÔNG TY CỔ PHẦN ZZZZZZZ</h2>
</div>
</div>
</body>
</html>
Trang Css:
Mã:
@charset "utf-8";
/* CSS Document */
*{
margin:0;
padding:0;
}
body{
text-align:center;
font-family:Verdana, Geneva, sans-serif;
font-size:18px;
font-weight:bold;
color:#FF0;
}
#home{
/*height:768px;*/
background-color:#F00;
}
#header{
background-color:#000;
background-image:url(../img/tieude.png);
background-repeat:no-repeat;
background-position:center;
background-size:cover;
height:20%;
width:100%;
text-align:right;
}
#clock{
color:#FF0 !important;
text-decoration: none;
padding-top:7em;
padding-right:5px;
float:none;
}
#content{
background-color:#F00;
height:70%;
clear:left;
}
table{
border-color:#000;
}
.col1,.col2,.col3,.col4{
color:#FF0;
font-size:24px;
}
.col2,.col3,.col4{
width:13%
}
.col7{
color:#FF0;
font-size:24px;
width:40%;
}
.rloai, td{
font-size:28px;
}
#loai{
height:2.5em;
width:12.5em;
}
#gia_mua,#gia_ban,#khac_hieu{
height:2.5em;
width:7.5em;
}
#footer{
clear:none;
height:10%;
background-color:#000;
}
marquee{
font-size:28px;
text-align:center;
}
h2{
margin:0;
padding:0;
}
Trang JavaScript:
Mã:
function time() {
var today = new Date();
var weekday=new Array(7);
weekday[0]="Chủ nhật";
weekday[1]="Thứ 2";
weekday[2]="Thứ 3";
weekday[3]="Thứ 4";
weekday[4]="Thứ 5";
weekday[5]="Thứ 6";
weekday[6]="Thứ 7";
var day = weekday[today.getDay()];
var dd = today.getDate();
var mm = today.getMonth()+1;
var yyyy = today.getFullYear();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
m=checkTime(m);
s=checkTime(s);
nowTime = h+":"+m+":"+s;
if(dd<10){dd='0'+dd} if(mm<10){mm='0'+mm} today = day+', '+ dd+'/'+mm+'/'+yyyy;
tmp='<a href="#" id="clock">'+nowTime+'</h4> '+today+'</a>';
document.getElementById("clock").innerHTML=tmp;
clocktime=setTimeout("time()","1000","JavaScript");
function checkTime(i)
{
if(i<10){
i="0" + i;
}
return i;
}
}
Sau 5s Thì javascript chạy và php sẽ (select) vào My Sql để lấy dữ liệu!
Nhưng khi em có thay đổi trong My SQL mà trên trang index không thấy tự cập nhật lại, mà em phải nhấn F5 mới được!
Trang index của em
Mã:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BẢNG GIÁ</title>
<link rel="stylesheet" href="Css/css1.css" />
<script type="text/javascript" src="JavaScript/JavaScript.js"></script>
<script type="text/javascript">
function heightbg(){
tmp = screen.height;
h = tmp.toString();
document.getElementById("home").style.border = "0px double red";
document.getElementById("home").style.height=h + "px";
time();
selectMySQL();
}
var t;
var c= 0;
var Name1 = '';
var L11 =0;
var L12 =0;
var L13 =0;
var Name2 = '';
var L21 =0;
var L22 =0;
var L23 =0;
var Name3 = '';
var L31 =0;
var L32 =0;
var L33 =0;
var Name4 = '';
var L41 =0;
var L42 =0;
var L43 =0;
var Name5 = '';
var L51 =0;
var L52 =0;
var L53 =0;
var Name6 = '';
var L61 =0;
var L62 =0;
var L63 =0;
<?php include("config.php"); ?>
function selectMySQL(){
<?php
$str = "SELECT * FROM dmtiente";
$cmd=mysqli_query($servermysql, $str);
?>
c=c+1;
GetTmp();
}
function GetTmp(){
<?php
$j = 0;
while($i=mysqli_fetch_array($cmd))
{
if($i["tienteID"] == '49'){
?>
name1 = "<?php echo $i["tienteName"]; ?>";
L11 = <?php echo $i["Gia_mua"]; ?>;
L12 = <?php echo $i["Gia_ban"]; ?>;
L13 = <?php echo $i["Khac_hieu"]; ?>;
<?php
}
if($i["tienteID"] == '39'){
?>
name2 = "<?php echo $i["tienteName"]; ?>";
L21 = <?php echo $i["Gia_mua"]; ?>;
L22 = <?php echo $i["Gia_ban"]; ?>;
L23 = <?php echo $i["Khac_hieu"]; ?>;
<?php
}
if($i["tienteID"] == '8K'){
?>
name3 = "<?php echo $i["tienteName"]; ?>";
L31 = <?php echo $i["Gia_mua"]; ?>;
L32 = <?php echo $i["Gia_ban"]; ?>;
L33 = <?php echo $i["Khac_hieu"]; ?>;
<?php
}
if($i["tienteID"] == '1K'){
?>
name4 = "<?php echo $i["tienteName"]; ?>";
L41 = <?php echo $i["Gia_mua"]; ?>;
L42 = <?php echo $i["Gia_ban"]; ?>;
L43 = <?php echo $i["Khac_hieu"]; ?>;
<?php
}
if($i["tienteID"] == 'IT'){
?>
name5 = "<?php echo $i["tienteName"]; ?>";
L51 = <?php echo $i["Gia_mua"]; ?>;
L52 = <?php echo $i["Gia_ban"]; ?>;
L53 = <?php echo $i["Khac_hieu"]; ?>;
<?php
}
if($i["tienteID"] == 'BA'){
?>
name6 = "<?php echo $i["tienteName"]; ?>";
L61 = <?php echo $i["Gia_mua"]; ?>;
L62 = <?php echo $i["Gia_ban"]; ?>;
L63 = <?php echo $i["Khac_hieu"]; ?> ;
<?php
}
}
?>
Gethtml();
}
function Gethtml(){
tmp='<a href="#">'+ c +'</a>';
document.getElementById("name1").innerHTML=name1;
document.getElementById("name2").innerHTML=name2;
document.getElementById("name3").innerHTML=name3;
document.getElementById("name4").innerHTML=name4;
document.getElementById("name5").innerHTML=name5;
document.getElementById("name6").innerHTML=name6;
document.getElementById("L11").innerHTML=L11;
document.getElementById("L21").innerHTML=L21;
document.getElementById("L31").innerHTML=L31;
document.getElementById("L41").innerHTML=L41;
document.getElementById("L51").innerHTML=L51;
document.getElementById("L61").innerHTML=L61;
document.getElementById("L12").innerHTML=L12;
document.getElementById("L22").innerHTML=L22;
document.getElementById("L32").innerHTML=L32;
document.getElementById("L42").innerHTML=L42;
document.getElementById("L52").innerHTML=L52;
document.getElementById("L62").innerHTML=L62;
document.getElementById("L13").innerHTML=L13;
document.getElementById("L23").innerHTML=L23;
document.getElementById("L33").innerHTML=L33;
document.getElementById("L43").innerHTML=L43;
document.getElementById("L53").innerHTML=L53;
document.getElementById("L63").innerHTML=L63;
<?php
mysqli_free_result($cmd);
mysqli_close($servermysql);
?>
t=setTimeout("selectMySQL()",5000);
}
</script>
</head>
<body onload="heightbg()">
<div id="home">
<div id="header">
<div id="clock"></div>
</div>
<div id="content">
<table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<th scope="col" id="loai" class="col1">LOẠI</th>
<th scope="col" id="gia_mua" class="col2">GIÁ MUA</th>
<th scope="col" id="gia_ban" class="col3">GIÁ BÁN</th>
<th scope="col" id="khac_hieu" class="col4">KHÁC HIỆU</th>
<th rowspan="7" scope="col" class="col7"> </th>
</tr>
<tr>
<th scope="row" id="name1" class="rloai">Loại 1</th>
<td id="L11">0.000</td>
<td id="L12">0.000</td>
<td id="L13">0.000</td>
</tr>
<tr>
<th scope="row" id="name2" class="rloai">Loại 2</th>
<td id="L21">0.000</td>
<td id="L22">0.000</td>
<td id="L23">0.000</td>
</tr>
<tr>
<th scope="row" id="name3" class="rloai">Loại 3</th>
<td id="L31">0.000</td>
<td id="L32">0.000</td>
<td id="L33">0.000</td>
</tr>
<tr>
<th scope="row" id="name4" class="rloai">Loại 4</th>
<td id="L41">0.000</td>
<td id="L42">0.000</td>
<td id="L43">0.000</td>
</tr>
<tr>
<th scope="row" id="name5" class="rloai">Loại 5</th>
<td id="L51">0.000</td>
<td id="L52">0.000</td>
<td id="L53">0.000</td>
</tr>
<tr>
<th scope="row" id="name6" class="rloai">Loại 6</th>
<td id="L61">0.000</td>
<td id="L62">0.000</td>
<td id="L63">0.000</td>
</tr>
</table>
</div>
<div id="footer">
<marquee>Công Ty Cổ Phần ZZZZZZZ Là Một Trong 10 Doanh Nghiệp Đứng Đầu Trong Lĩnh Vực Công Nghệ Bảo Mật!</marquee>
<h2>CÔNG TY CỔ PHẦN ZZZZZZZ</h2>
</div>
</div>
</body>
</html>
Trang Css:
Mã:
@charset "utf-8";
/* CSS Document */
*{
margin:0;
padding:0;
}
body{
text-align:center;
font-family:Verdana, Geneva, sans-serif;
font-size:18px;
font-weight:bold;
color:#FF0;
}
#home{
/*height:768px;*/
background-color:#F00;
}
#header{
background-color:#000;
background-image:url(../img/tieude.png);
background-repeat:no-repeat;
background-position:center;
background-size:cover;
height:20%;
width:100%;
text-align:right;
}
#clock{
color:#FF0 !important;
text-decoration: none;
padding-top:7em;
padding-right:5px;
float:none;
}
#content{
background-color:#F00;
height:70%;
clear:left;
}
table{
border-color:#000;
}
.col1,.col2,.col3,.col4{
color:#FF0;
font-size:24px;
}
.col2,.col3,.col4{
width:13%
}
.col7{
color:#FF0;
font-size:24px;
width:40%;
}
.rloai, td{
font-size:28px;
}
#loai{
height:2.5em;
width:12.5em;
}
#gia_mua,#gia_ban,#khac_hieu{
height:2.5em;
width:7.5em;
}
#footer{
clear:none;
height:10%;
background-color:#000;
}
marquee{
font-size:28px;
text-align:center;
}
h2{
margin:0;
padding:0;
}
Trang JavaScript:
Mã:
function time() {
var today = new Date();
var weekday=new Array(7);
weekday[0]="Chủ nhật";
weekday[1]="Thứ 2";
weekday[2]="Thứ 3";
weekday[3]="Thứ 4";
weekday[4]="Thứ 5";
weekday[5]="Thứ 6";
weekday[6]="Thứ 7";
var day = weekday[today.getDay()];
var dd = today.getDate();
var mm = today.getMonth()+1;
var yyyy = today.getFullYear();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
m=checkTime(m);
s=checkTime(s);
nowTime = h+":"+m+":"+s;
if(dd<10){dd='0'+dd} if(mm<10){mm='0'+mm} today = day+', '+ dd+'/'+mm+'/'+yyyy;
tmp='<a href="#" id="clock">'+nowTime+'</h4> '+today+'</a>';
document.getElementById("clock").innerHTML=tmp;
clocktime=setTimeout("time()","1000","JavaScript");
function checkTime(i)
{
if(i<10){
i="0" + i;
}
return i;
}
}