jquery从后台获取数据,动态遍历渲染页面

最新推荐文章于 2025-01-11 19:42:26 发布

web_cgh

最新推荐文章于 2025-01-11 19:42:26 发布

阅读量2.1w

点赞数 1

分类专栏： Javascript

本文链接：https://blog.youkuaiyun.com/web_cgh/article/details/80849026

版权

Javascript 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一种使用JavaScript和jQuery动态生成视频片段展示列表的方法，包括如何解析后端返回的数据并将其格式化为易于浏览的形式，例如显示视频缩略图、开始时间和持续时间等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var $viewVideoId = $('#viewVideoId');
$viewVideoId.children().remove();
var fileList = '';
var UTILE = new UtileObj();
$.each(JSON.parse(res.data).file, function (i, items) {
if (i < 10) {
var time = UTILE.formatTime(parseInt(items.starttime), 'mm:ss');
var duration = items.endtime - items.starttime;
var minutes = parseInt(duration / 60);
var minute = minutes >= 10 ? minutes : '0' + minutes;
var second = duration % 60 >= 10 ? duration % 60 : '0' + duration % 60;
var str = items.name,index = str .lastIndexOf(".");
str = str .substring(0,index);
console.log(str );
fileList += '<li class="dd_playbackLi"><div class="pr"><img class="thumbnail" src="http://193.168.0.1/'+str+'_T.jpg" data-src="http://193.168.0.1/' + items.name + '" data-index="' + i + '"/><span class="allTime">' + minute + ':' + second + '</span></div><div class="text_box"><span class="before">前</span><span class="time">' + time + '</span></div></li>';
}
});
$viewVideoId.html(fileList);