本帖最后由 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);

}

LED内容更新页面

[HTML] 纯文本查看 复制代码

设置滚动字幕

设置滚动字幕内容

请输入内容:

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 上传