本帖最后由 yoin 于 2019-11-21 16:24 編輯

產品需求：

LED跑馬燈頁面展示內容(班級電腦展示)

setLED更改內容(老師電腦更改內容)

LED頁面及時更新內容設計思路：

最初想法很簡單，想僅用HTML+JS實現。但是還是太年輕了，老師更改內容后如何同步共享到班級電腦就是個問題了。

1.cookie存儲班級信息，success！

2.session共享更改內容，failed！

session面向連接的不同電腦不同的鏈接無法共享

3.共享內容嘗試直接寫入js文件，failed！

更改的內容只在本地緩存生效，js操作文件，可以讀取文件，但是寫入操作無法實現(本人水平有限)

4.嘗試js操作數據庫，failed！

原生js，操作難度很大。JQuery操作相對容易。

5.動用后端語言PHP，success！

加入后端語言的發揮空間就大大提升。比如加入用戶驗證登錄、權限控制等等。

6.js定時器，實現跑馬燈效果；定時獲取更新內容；

7.ajax異步請求更新內容，在不刷新頁面的情況下實現內容更改。

上代碼

LED展示頁面

[HTML] 純文本查看 復制代碼

滾動提示

.screen{

width: 400px;

height: 80px;

background: #000;

margin: 0 auto;

overflow: hidden;

}

#set{

color:#0f0;

font-size: 20px;

display: block;

}

#scroll{

display: none;

}

#con{

font-size: 70px;

color: #f00;

line-height: 80px;

}

window.onload = function(){

setClass();

getContent();

led();

// var content = getContent();

// led(content);

}

請選擇班級:

班級

11

12

13

14

21

22

23

24

31

32

33

34

OK

消息等待中...

LED內容更新頁面

[HTML] 純文本查看 復制代碼

設置滾動字幕

設置滾動字幕內容

請選擇班級:

班級

11

12

13

14

21

22

23

24

31

32

33

34

請輸入內容:

JS代碼

[JavaScript] 純文本查看 復制代碼//獲取班級

var cFlag = getCookie('class');

var led;

function setClass(){

//如果不存在，寫入cookie

if(cFlag==""){

oBtn = document.getElementById('btn');

oFlag = document.getElementById('flag');

oBtn.onclick = function(){

var index = oFlag.selectedIndex;

cFlag = oFlag.options[index].value;

setCookie("class", cFlag, 30);

window.location.reload();

};

}

// 如果存在，顯示led div

else{

var oSet = document.getElementById('set');

var oScroll = document.getElementById('scroll');

oSet.style.display = "none";

oScroll.style.display = "block";

}

};

// 獲取cookie

function getCookie(c_name) {

if (document.cookie.length > 0) {

c_start = document.cookie.indexOf(c_name + "=");

if (c_start != -1) {

c_start = c_start + c_name.length + 1;

c_end = document.cookie.indexOf(";", c_start);

if (c_end == -1) c_end = document.cookie.length;

return unescape(document.cookie.substring(c_start, c_end));

}

}

return "";

};

//設置cookie的名稱、值、有效期

function setCookie(c_name, value, expiredays) {

var exdate = new Date();

exdate.setDate(exdate.getDate() + expiredays);

document.cookie = c_name + "=" + escape(value) +

((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());

};

// led跑馬燈運行

function led(){

var oCon = document.getElementById('con');

var i = 0;

led = setInterval(scroll,20);

setInterval(getContent, 5000); // 每隔5秒重新獲取一次content

function scroll(){

// getContent(); # 在此處調用該函數會極大的增大CPU負擔，因為led定時器調用了scroll，而且是每20毫秒執行一次

if(i<=oCon.offsetWidth){

oCon.style.marginLeft = "-"+i+"px";

i++;

}else{

i = 0;

}

}

};

// ajax 異步從數據庫獲取led內容

function getContent()

{

// var content;

var xmlhttp;

if (window.XMLHttpRequest)

{

// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼

xmlhttp=new XMLHttpRequest();

}

else

{

// IE6, IE5 瀏覽器執行代碼

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

// 異步執行回調函數

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById("con").innerHTML=xmlhttp.responseText;

}

}

xmlhttp.open("GET","get.php?class="+cFlag,true);

xmlhttp.send();

// 同步執行的方法(將open函數的true改為false,注釋掉異步回調函數即可)

// if(xmlhttp.status==200){

// content = xmlhttp.responseText;

// }

// return content;

}

數據庫連接

[PHP] 純文本查看 復制代碼<?php

try{

//數據庫連接

$dbh = new PDO('mysql:host=127.0.0.1;dbname=led','root','xxxxxxxx');

$dbh->exec('set names utf8');

}

catch(PDOException $e){

echo "數據庫連接失敗：".$e->getMessage();

}

?>

PHP操作數據庫

[PHP] 純文本查看 復制代碼<?php

include "dbConn.php";

$class = $_GET['class'];

if($class){

$sql = "select * from leddata where class=$class order by id desc limit 1";

$rst = $dbh->prepare($sql);

$rst->execute();

$data = $rst->fetch();

$content = $data['content'];

echo "$content";

}

$class = $_POST['class'];

if($class){

$content = $_POST['content'];

date_default_timezone_set('PRC');

$date = date('Y-m-d H:i:s');

try{

$sql = "insert into leddata(class,content,addtime) values(:class,:content,:date)";

echo "$sql";

$rst = $dbh->prepare($sql);

$rst->execute(array(':class'=>$class,':content'=>$content,':date'=>$date));

$affectRows = $rst->rowCount();

header("refresh:2;url=setled.php");

echo "插入".$affectRows."條記錄，2秒后頁面跳轉>>>";

}

catch(PDOException $e){

echo "ERROE:".$e->getMessage();

}

}

?>

關于CPU負擔，上圖

TIM截圖20191121084705.jpg (58.51 KB, 下載次數: 0)

2019-11-21 11:04 上傳

TIM截圖20191121085058.jpg (81 KB, 下載次數: 0)

2019-11-21 11:04 上傳

PS：大家有什么更好的思路跟方法，歡迎共同討論。

很多吾友回復要效果圖；

其實效果圖就是一個LED跑馬燈效果。截圖是靜態的，所以就沒上圖，現在加上。

TIM截圖20191121162322.jpg (13.71 KB, 下載次數: 0)

2019-11-21 16:24 上傳

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的web展现mysql_web页面实现LED跑马灯效果(涉及web前端、原生JS、PHP、mysql)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。