web页面实现LED跑马灯效果(涉及web前端、原生JS、PHP、mysql)

yoin · 发表于 2019-11-21 11:06

本帖最后由 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] 纯文本查看 复制代码

<!doctype html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>滚动提示</title>
        <style>
        .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;

        }
        </style>
        <script src="led.js"></script>
        <script>
                window.onload = function(){
                        setClass();
                        getContent();
                        led();
                        // var content = getContent();
                        // led(content);
                }
        </script>
</head>
<body>
        <div class="screen">
                <div id="set">
                        请选择班级:
                        <select name="" id="flag">
                                <option value="00" selected="selected">班级</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                                <option value="13">13</option>
                                <option value="14">14</option>
                                <option value="21">21</option>
                                <option value="22">22</option>
                                <option value="23">23</option>
                                <option value="24">24</option>
                                <option value="31">31</option>
                                <option value="32">32</option>
                                <option value="33">33</option>
                                <option value="34">34</option>
                        </select>
                        <button id="btn"> OK </button>
                </div>
                <div id="scroll">
                        <em id="con">消息等待中...</em>
                </div>
        </div>        
</body>
</html>

LED内容更新页面

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

<!doctype html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>设置滚动字幕</title>
        <script src="led.js"></script>
</head>
<body>
        <h1>设置滚动字幕内容</h1>
        <form action="get.php" method="post">
                <div>
                        请选择班级:
                        <select id="flag" name="class">
                                <option value="00" selected="selected">班级</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                                <option value="13">13</option>
                                <option value="14">14</option>
                                <option value="21">21</option>
                                <option value="22">22</option>
                                <option value="23">23</option>
                                <option value="24">24</option>
                                <option value="31">31</option>
                                <option value="32">32</option>
                                <option value="33">33</option>
                                <option value="34">34</option>
                        </select>
                </div>
                请输入内容:
                <br>
                <input type="text" id='content' name="content">        
                <input type="submit" value="设置">
        </form>
</body>
</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

PS：大家有什么更好的思路跟方法，欢迎共同讨论。

很多吾友回复要效果图；
其实效果图就是一个LED跑马灯效果。截图是静态的，所以就没上图，现在加上。
TIM截图20191121162322.jpg

天灾丶人灬 · 发表于 2019-11-21 17:04

yoin 发表于 2019-11-21 16:21
nodejs也挺强大滴，还可以做爬虫

给你稍微改了下,node我也不是太会

,主要其它后端的更不懂

klra_L · 发表于 2019-11-21 11:48

不来个效果图嘛?

天灾丶人灬 · 发表于 2019-11-21 11:53

看需求我思路是,
可以用nodejs + json 来完成 setLED更改内容
html + js 完成 LED跑马灯页面展示内容
基本就完事了

opai · 发表于 2019-11-21 12:39

没有效果图...

yoin · 发表于 2019-11-21 16:21

天灾丶人灬发表于 2019-11-21 11:53
看需求我思路是,
可以用nodejs + json 来完成 setLED更改内容
html + js 完成 LED跑马灯页面展示内容

nodejs也挺强大滴，还可以做爬虫

yoin · 发表于 2019-11-21 17:50

天灾丶人灬发表于 2019-11-21 17:04
给你稍微改了下,node我也不是太会,主要其它后端的更不懂

谢谢，有问题共同讨论，你是专业的吗？我就是自己学的瞎写滴

天灾丶人灬 · 发表于 2019-11-21 18:55

yoin 发表于 2019-11-21 17:50
谢谢，有问题共同讨论，你是专业的吗？我就是自己学的瞎写滴

额,毕竟是干这个的,还好吧

yoin · 发表于 2019-11-22 15:43

天灾丶人灬发表于 2019-11-21 18:55
额,毕竟是干这个的,还好吧

node其实也算得上是后端语言了

ycmzlg · 发表于 2021-1-14 11:31

谢谢偏好！~

帐号		自动登录	找回密码
密码			注册[Register]

[其他原创] web页面实现LED跑马灯效果(涉及web前端、原生JS、PHP、mysql)

免费评分