本帖最后由 yoin 于 -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截图1121084705.jpg (58.51 KB, 下载次数: 0)
-11-21 11:04 上传
TIM截图1121085058.jpg (81 KB, 下载次数: 0)
-11-21 11:04 上传
PS:大家有什么更好的思路跟方法,欢迎共同讨论。
很多吾友回复要效果图;
其实效果图就是一个LED跑马灯效果。截图是静态的,所以就没上图,现在加上。
TIM截图1121162322.jpg (13.71 KB, 下载次数: 0)
-11-21 16:24 上传
如果觉得《web展现mysql_web页面实现LED跑马灯效果(涉及web前端 原生JS PHP mysql)》对你有帮助,请点赞、收藏,并留下你的观点哦!