前端页面（节目播出单编辑） - 好文

前端页面（节目播出单编辑）

* 样式照片 <https://blog.csdn.net/qq_41257365/article/details/88762985#_2>
* 使用的插件与其他文件 <https://blog.csdn.net/qq_41257365/article/details/88762985#_6>
* 主页代码 <https://blog.csdn.net/qq_41257365/article/details/88762985#_16>

<>样式照片

<>使用的插件与其他文件

* bootstrap.min.css ；
* font-awesome.min.css ；
* layer.min.js ；
* jquery.min.js ；
* bootstrap.min.js ；
* layui.js,laydate.js ；
* 等等… ；
<>主页代码

播出日期：连续天数：保存 <>
开启功放 <> 文件转播 <> 电台播音 <> 关闭功放 <> 停止播放 <> 选择终端：
类型节目编号节目节目文件开始时间节目时长操作 ## 核心方法 //文件转播选择 function doFile() { var
baseTime = "08:00:00"; if($("#broaddate").val() == ""){
layer.tips('请选择播出日期','#broaddate', { tips: [1, '#3595CC'], time: 4000 });
return false; } var data = $("#broaddate").val(); var time = getTime(data+"
"+baseTime); //console.log("timeFile="+time); var _url = "***"; var _title =
'文件选择'; var _width = "1200"; var _height = ($(window).height() - 50);
layer.open({ type: 2, maxmin: true, shade: 0.3, title: _title, fix: false,
area: [_width + 'px', _height + 'px'], content: _url, shadeClose: true, btn:
['<i class="fa fa-check"></i> 确认', '<i class="fa fa-close"></i> 关闭'], yes:
function (index, layero) { layer.close(index); //获取子页面关闭前的回调函数获取到的值 var res =
$(layero).find("iframe")[0].contentWindow.callbackfile();
console.log(">>>重复次数"+res.data_num+">>>文件id"+res.data_fileID+">>>节目"+res.data_filenames+">>>节目文件"+res.data_filename+">>>时长"+res.data_file+">>>间隔时长"+res.data_time)
for(var i=1;i<=res.data_num;i++){ $("#tbody").append("<tr><td
class='center'>文件转播</td> <td class='center'>"+res.data_fileID+"</td>"+ "<td
class='center'>"+res.data_filenames+"</td> <td
class='center'>"+res.data_filename+"</td>"+ "<td class='center'>"+time+"</td>
<td class='center'>"+res.data_file+"</td>"+ " <td class='center'>"+ "<div
class='action-buttons'>"+ "<a class='green' onclick='editTime(this);'>"+ "<i
class='ace-icon fa fa-pencil-square-o bigger-130' title='修改'></i>"+ "</a> <a
class='red' onclick='deletePro(this);'>"+ "<i class='ace-icon fa fa-trash-o
bigger-120' title='删除'></i>"+ "</a> </div>"+ "</td></tr>"); time =
getTime(data+" "+baseTime); } }, cancel: function () { return true; } }); }
//时间插件 layui.use('laydate', function(){ var laydate = layui.laydate;
//执行一个laydate实例 laydate.render({ elem:"#broad", type: 'time', }); });
//js日期格式化函数yyyy-MM-dd function data_string(datetimeStr) { var mydateint =
Date.parse(datetimeStr);//数值格式的时间 if (!isNaN(mydateint)) { var mydate = new
Date(mydateint); return mydate; } var mydate = new Date(datetimeStr);//字符串格式时间
var monthstr = mydate.getMonth() + 1; if (!isNaN(monthstr)) {//转化成功 return
mydate; }//字符串格式时间转化失败 var dateParts = datetimeStr.split(" "); var dateToday =
new Date(); var year = dateToday.getFullYear(); var month =
dateToday.getMonth(); var day = dateToday.getDate(); if (dateParts.length >= 1)
{ var dataPart = dateParts[0].split("-");//yyyy-mm-dd 格式时间 if (dataPart.length
== 1) { dataPart = dateParts[0].split("/");//yyyy/mm/dd格式时间 } if
(dataPart.length == 3) { year = Math.floor(dataPart[0]); month =
Math.floor(dataPart[1]) - 1; day = Math.floor(dataPart[2]); } } if
(dateParts.length == 2) {//hh:mm:ss格式时间 var timePart =
dateParts[1].split(":");//hh:mm:ss格式时间（笑脸是:） if (timePart.length == 3) { var
hour = Math.floor(timePart[0]); var minute = Math.floor(timePart[1]); var
second = Math.floor(timePart[2]); return new Date(year, month, day, hour,
minute, second); } } else { return new Date(year, month, day); } } /** * 获得时间 *
@Aut Ljolan * @returns {string} */ function getTime(intervaltime){ var basenum
= 5; //5秒钟延迟播放 var TimeNILL = data_string(intervaltime) var restData =
intervaltime; //console.log("???"+TimeNILL); //字符串转时间 var trs =
$("#tbody").find("tr"); if(trs.length>1){ var lasttime =
trs[trs.length-1].cells[4].innerText; var timelenth =
trs[trs.length-1].cells[5].innerText; if(timelenth.length==0){ timelenth =
"00:00:00"; } //console.log(lasttime+"---"+timelenth) var seconds =0;
if(lasttime!=null&&lasttime!=""){ var H2 = parseInt(lasttime.split(":")[0]);
var M2 = parseInt(lasttime.split(":")[1]); var S2 =
parseInt(lasttime.split(":")[2]); //console.log("H2="+H2+"M2="+M2+"S2="+S2)
seconds += H2 * 3600 + M2 * 60 + S2 ; //console.log("<<<1
前一个的播放开始时间>>>"+lasttime+"---"+seconds) } if(timelenth!=null
&&timelenth.length>0){ var H = parseInt(timelenth.split(":")[0]); var M =
parseInt(timelenth.split(":")[1]); var S = parseInt(timelenth.split(":")[2]);
//console.log("H="+H+"M="+M+"S="+S) seconds += H * 3600 + M * 60 + S ;
//console.log(">>>2 前一个的文件时长<<<"+timelenth+"---"+seconds) } //2017-11-11
80:00:00 var Se = seconds-28800+basenum; restData = addTime(intervaltime,Se);
//后面的是：前一个tr标签的播放开始时间+文件时长-08：00：00（28800s）+间隔时间 //
console.log(Se+">>>"+restData); } var nule = restData.toString().split(" ")[1];
if(nule!=null &&nule.length>0){ var H,M,S; H = parseInt(nule.split(":")[0]); M
= parseInt(nule.split(":")[1]); S = parseInt(nule.split(":")[2]); if(H<9){ H =
'0'+H; } if(M<9){ M = '0'+M; } if(S<9){ S = '0'+S; } nule = H+":"+M+":"+S; }
return nule; } //时间相加 function addTime(d,num) { var d = new
Date(d.substring(0,4), d.substring(5,7)-1, d.substring(8,10),
d.substring(11,13), d.substring(14,16), d.substring(17,19));
d.setTime(d.getTime()+num*1000); //console.log(d.toLocaleString()); return
d.getFullYear()+"-" +(d.getMonth()+1) +"-"+d.getDate() +"
"+d.getHours().toString() +":"+d.getMinutes().toString()
+":"+d.getSeconds().toString(); }
##文件选择弹框
<body class="gray-bg"> <div class="container-div ui-layout-center"> <div
class="row"> <table style="margin-top:5px;"> <tr> <td
style="padding-left:2px;text-align: right;" id="fileid" class=""
name="">重复次数：</td> <td style="padding-left:2px;"> <input name="continuenum"
id="continuenum" value="1" type="number" min="1" max="15" step="1"
style="width:88px;height: 30px;border-radius:5%" placeholder="重复次数"
title="重复次数"/></td> <td style="padding-left:2px;text-align: right;">时间间隔：</td>
<td style="padding-left:2px;"> <input class="laydate-icon form-control
layer-date" name="broaddate" id="broaddate" value="00:00:00"
readonly="readonly" style="width:160px;" placeholder="播出日期" title="播出日期"/>
</td> <td style="padding-left:2px;text-align: right;">节目：</td> <td
style="padding-left:2px;"> <input name="" id="orgs" value="" type="text"
readonly style="width:128px;height: 30px;border-radius:5%" /></td> </tr>
</table> <div class="col-sm-12 search-collapse"> <form id="formId"> <div
class="select-list"> <ul> <li> 节目名称：<input type="text" name="fname"
style="width: 130px;"/> </li>    
 
  
 
  
    
  
   <li> <a class="btn
btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa
fa-search"></i> 搜索</a> <a class="btn btn-warning btn-rounded btn-sm"
onclick="$.form.reset()"><i class="fa fa-refresh"></i> 重置</a> </li> </ul>
</div> </form> </div> <div class="col-sm-12 select-table table-striped"> <table
id="bootstrap-table" data-mobile-responsive="true"></table> </div> </div>
</div> <div th:include="include :: footer"></div> <script
th:src="@{/ajax/libs/jquery-layout/jquery.layout-latest.js}"></script> <script
th:inline="javascript"> /** * 选择文件 * @param fid */ function
selectFiles(fname,fid,filename,flenth) { $("#orgs").attr("value",fname);
$("#fileid").attr("class",fid); $("#fileid").attr("name",filename);
$("#orgs").attr("name",flenth); } var prefix = ctx + "broad/proSinmanage";
$(function() { var options = { url: prefix + "/listFile", modalName: "文件选择",
search: false, showExport: true, columns: [ // { // checkbox: true, // }, {
field : 'fid', title : '文件id', visible: false }, { field : 'fname', title :
'节目名称', sortable: true, width: '20%' }, { field : 'filename', title : '文件名称',
sortable: true }, { field : 'flenth', title : '文件时长', sortable: true }, { field
: 'ispublic', title : '是否公共', formatter:function(value,row,index){ var html =
""; if(value == "0"){ html += "<label style='color: #ff5909'>非公共</label>";
return html; }else { html += "<label style='color: #02cd0d'>公共</label>"; return
html; } }, sortable: true, }, { field : 'createdtime', title : '创建时间',
sortable: true }, { title: '操作', align: 'center', formatter: function(value,
row, index) { var actions = []; actions.push('<a class="btn btn-success btn-xs"
href="#"><i class="fa fa-edit"></i>试听</a> '); actions.push('<a class="btn
btn-success btn-xs" href="#" onclick="selectFiles(\''+ row.fname+'\',\''+
row.fid+'\',\''+row.filename+'\',\''+row.flenth+'\');"><i class="fa
fa-edit"></i>选择</a> '); return actions.join(''); } } ] };
$.table.init(options); }); //提供给父页面获取选中的值 function callbackfile() {
/*在选择终端前先获取一次文本框的值，为的是可以选择多个小组的终端*/ var fname =
document.getElementById("orgs").value; var fileID = $("#fileid").attr("class");
var filename = $("#fileid").attr("name"); var flenth = $("#orgs").attr("name");
var filenum = $("#continuenum").val(); var time = $("#broaddate").val(); datas
= { //调用它的父页面A的input这个function data_filenames:fname,
//把data传入父页面A中的data_role，这里cllbackfile()是我另外计算data的一个函数，可以忽略
data_fileID:fileID, data_filename:filename, data_file:flenth, data_num:filenum,
data_time:time } return datas; } </script> <script
th:src="@{/js/jquery.min.js}"></script> <script
th:src="@{/js/bootstrap.min.js}"></script> <script
th:src="@{/js/jquery.tips.js}"></script> <script
th:src="@{/js/plugins/layer/layui-v2.4.5/layui/layui.js}"></script> 
<script> layui.use('laydate', function(){ var laydate = layui.laydate;
//执行一个laydate实例 laydate.render({ elem:"#broaddate", type: 'time', });
//执行一个laydate实例 laydate.render({ elem:"#begindate", type: 'time', });
//执行一个laydate实例 laydate.render({ elem:"#enddate", type: 'time', }); });
</script> <div th:include="include :: footer"></div> </body>

热门工具换一换