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

產(chǎn)品需求：

LED跑馬燈頁(yè)面展示內(nèi)容(班級(jí)電腦展示)

setLED更改內(nèi)容(老師電腦更改內(nèi)容)

LED頁(yè)面及時(shí)更新內(nèi)容設(shè)計(jì)思路：

最初想法很簡(jiǎn)單，想僅用HTML+JS實(shí)現(xiàn)。但是還是太年輕了，老師更改內(nèi)容后如何同步共享到班級(jí)電腦就是個(gè)問(wèn)題了。

1.cookie存儲(chǔ)班級(jí)信息，success！

2.session共享更改內(nèi)容，failed！

session面向連接的不同電腦不同的鏈接無(wú)法共享

3.共享內(nèi)容嘗試直接寫(xiě)入js文件，failed！

更改的內(nèi)容只在本地緩存生效，js操作文件，可以讀取文件，但是寫(xiě)入操作無(wú)法實(shí)現(xiàn)(本人水平有限)

4.嘗試js操作數(shù)據(jù)庫(kù)，failed！

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

5.動(dòng)用后端語(yǔ)言PHP，success！

加入后端語(yǔ)言的發(fā)揮空間就大大提升。比如加入用戶(hù)驗(yàn)證登錄、權(quán)限控制等等。

6.js定時(shí)器，實(shí)現(xiàn)跑馬燈效果；定時(shí)獲取更新內(nèi)容；

7.ajax異步請(qǐng)求更新內(nèi)容，在不刷新頁(yè)面的情況下實(shí)現(xiàn)內(nèi)容更改。

上代碼

LED展示頁(yè)面

[HTML] 純文本查看 復(fù)制代碼

滾動(dòng)提示

.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);

}

請(qǐng)選擇班級(jí):

班級(jí)

11

12

13

14

21

22

23

24

31

32

33

34

OK

消息等待中...

LED內(nèi)容更新頁(yè)面

[HTML] 純文本查看 復(fù)制代碼

設(shè)置滾動(dòng)字幕

設(shè)置滾動(dòng)字幕內(nèi)容

請(qǐng)選擇班級(jí):

班級(jí)

11

12

13

14

21

22

23

24

31

32

33

34

請(qǐng)輸入內(nèi)容:

JS代碼

[JavaScript] 純文本查看 復(fù)制代碼//獲取班級(jí)

var cFlag = getCookie('class');

var led;

function setClass(){

//如果不存在，寫(xiě)入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 "";

};

//設(shè)置cookie的名稱(chēng)、值、有效期

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跑馬燈運(yùn)行

function led(){

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

var i = 0;

led = setInterval(scroll,20);

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

function scroll(){

// getContent(); # 在此處調(diào)用該函數(shù)會(huì)極大的增大CPU負(fù)擔(dān)，因?yàn)閘ed定時(shí)器調(diào)用了scroll，而且是每20毫秒執(zhí)行一次

if(i<=oCon.offsetWidth){

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

i++;

}else{

i = 0;

}

}

};

// ajax 異步從數(shù)據(jù)庫(kù)獲取led內(nèi)容

function getContent()

{

// var content;

var xmlhttp;

if (window.XMLHttpRequest)

{

// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行代碼

xmlhttp=new XMLHttpRequest();

}

else

{

// IE6, IE5 瀏覽器執(zhí)行代碼

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

}

// 異步執(zhí)行回調(diào)函數(shù)

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();

// 同步執(zhí)行的方法(將open函數(shù)的true改為false,注釋掉異步回調(diào)函數(shù)即可)

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

// content = xmlhttp.responseText;

// }

// return content;

}

數(shù)據(jù)庫(kù)連接

[PHP] 純文本查看 復(fù)制代碼<?php

try{

//數(shù)據(jù)庫(kù)連接

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

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

}

catch(PDOException $e){

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

}

?>

PHP操作數(shù)據(jù)庫(kù)

[PHP] 純文本查看 復(fù)制代碼<?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秒后頁(yè)面跳轉(zhuǎn)>>>";

}

catch(PDOException $e){

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

}

}

?>

關(guān)于CPU負(fù)擔(dān)，上圖

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

2019-11-21 11:04 上傳

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

2019-11-21 11:04 上傳

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

很多吾友回復(fù)要效果圖；

其實(shí)效果圖就是一個(gè)LED跑馬燈效果。截圖是靜態(tài)的，所以就沒(méi)上圖，現(xiàn)在加上。

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

2019-11-21 16:24 上傳

與50位技術(shù)專(zhuān)家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。