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

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

本帖最后由 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异步请求更新内容，在不刷新页面的情况下实现内容更改。

https://static.52pojie.cn/static/image/hrline/2.gif

上代码

LED展示页面

<!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内容更新页面

<!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代码

//获取班级
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.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
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
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负担，上图





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

https://static.52pojie.cn/static/image/hrline/5.gif
很多吾友回复要效果图；
其实效果图就是一个LED跑马灯效果。截图是静态的，所以就没上图，现在加上。

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

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

给你稍微改了下,node我也不是太会{:1_896:},主要其它后端的更不懂

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

不来个效果图嘛?{:1_904:}

天灾丶人灬 发表于 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跑马灯页面展示内容


{:1_921:} nodejs也挺强大滴，还可以做爬虫

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

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

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

天灾丶人灬 发表于 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

谢谢偏好！~
页: [1] 2
查看完整版本: web页面实现LED跑马灯效果(涉及web前端、原生JS、PHP、mysql)


免责声明：
吾爱破解所发布的一切破解补丁、注册机和注册信息及软件的解密分析文章仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。如有侵权请邮件与我们联系处理。

Mail To:Service@52pojie.cn