网页弹幕实现(PHP+JS)

来源:转载

实现功能:利用PHP作为后台接口,使用接口数据作为弹幕显示到网页前端。不使用AJAX。

遇到问题:
PHP 与 HTML、JS写在一起数据调用问题

网上解决方案都大同小异, 大致如下
几种PHP与JS相互调用的方法

解决方案:

用如下语句获取PHP中的数据,一般为json格式

var a = '<?php echo($res)?>';

JS中解析json数据

var b =eval(a);

获取的元素就是JS能直接处理的元素
完整代码:

<?php //连接数据库语句 mysql_connect("localhost","root",""); mysql_query("set names 'utf-8' "); mysql_select_db("test"); $sql = mysql_query("select * from danmu "); $res = array(); $i = 0; //通过遍历获取$sql语句取出的内容,将其存入数组中 while( $row = mysql_fetch_array($sql)) { $res[$i] = $row; $i++; }; $i--; //将数据数组封装为json格式,用于js的接收 $res = json_encode($res); ?><!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>titlename</title> <link href="css/style.css" rel="stylesheet" type="text/css"></head><body><section class="danmu_board"> <ul class="danmu_list"> </ul></section><script src="js/jquery1.9.1.js"></script><script src="js/swiper-3.4.1.min.js"></script><script > function getRandomColor () { let randomColor = []; for (let i = 0 ; i < 3; ++i){ let color = Math.floor(Math.random() * 256).toString(16); color = color.length == 1 ? '0' + color : color; randomColor.push(color); } return '#' + randomColor.join(''); } function getRandomPosition () { let randomPosition = []; let pos = Math.floor(Math.random() * 100).toString(); randomPosition.push(pos); return randomPosition.join('')+'%'; } function sendDanmu(text){ var $li=$("<li class='danmu_text'>"+text+"</li>"); $li.css('color',getRandomColor()) .css('top',getRandomPosition()); var ul=$('.danmu_list'); ul.append($li); $li.animate({left:'-300px'},10000); } $(document).ready(function(){ var h=$(window).height(); var w=$(window).width(); $('.danmu_board').css('height',h) .css('width',w); var i=1; setInterval(function(){ //获取PHP中的json格式的数据,这一步很重要,卡了一晚上如何获得数据 var a = '<?php echo($res)?>'; //将json格式数据用eval()函数转化为JS能处理的数组 var b =eval(a); //通过for循环比较数据,进行判断 for(var j = 0;j<b.length;j++){ if(b[j].time==i){ sendDanmu(b[j].dm); } } i++; },1000) }) </script></body></html>

分享给朋友:
您可能感兴趣的文章:
随机阅读: