javascript新篇

最新推荐文章于 2021-09-17 09:11:34 发布

MrLixinglin

最新推荐文章于 2021-09-17 09:11:34 发布

阅读量304

点赞数

本文链接：https://blog.csdn.net/lixld/article/details/53736755

版权

1.confirm函数，返回true 或者false

var r=confirm("确定结束讲座？");

if(r==false){
return false;

}else{

//XXXXXXXXXXXXX

}

2.定时函数

var heartBeat;

heartBeat = setInterval(function(){
var msg = "{'summary':{"+
"'cmd':'HEART_BEAT',"+
"'chatMode':0, "+
"'msgType':0,"+
"'interactMode':0,"+
"'lectureId':'"+${lecture.id}+"'"+
"},"+
"'body':{"+
"'userId':'"+${loginUserId}+"',"+
"'passwd':'test'}"+
"}";
send(msg);

},5000);

清除定时函数轮询执行

//step0:把心跳的轮询停掉
window.clearInterval(heartBeat);

3.socket

这次做socket通讯

var socket;
if (!window.WebSocket) {
window.WebSocket = window.MozWebSocket;
}
if (window.WebSocket) {

socket = new WebSocket("wss://webimpre.drcuiyutao.com:40001/ws");
socket.onmessage = function(event) {

var returnMsg = eval("("+event.data+")");
var loginUserId = $("#lectureAccount_uid").val();
var cmd = returnMsg.summary.cmd;
var str = JSON.stringify(returnMsg); //转换成string
if(cmd=="LECTURE_INFO"){
var userTotal = returnMsg.body.userTotal;
$("#listenerCount").html("当前人数："+userTotal);
}

if(cmd=="BEGIN_LECTURE"){
alert("讲座开始了，准备播放");

//下面一定注意，只能用dom元素来取，因为load()方法,,controls属性不是jquery有的属性
document.getElementById("lectureVideo").load();//h5 avdio标签播放器
document.getElementById("lectureVideo").controls=false;
// alert("开始播放");
document.getElementById("lectureVideo").play();
// alert("开始播放1111111");
}

if(cmd=="ENTER_LECTURE"){

//......................

}

socket.onopen = function(event) {
var msg = "{'summary':{"+
"'cmd':'ENTER_LECTURE',"+
"'chatMode':0,"+
"'msgType':0,"+
"'interactMode':0,"+
"'lectureId':'"+${lecture.id}+"'},"+
"'body':{"+
"'userId':'"+${loginUserId}+"',"+
"'passwd':'test'}"+
"}";
send(msg);
};
socket.onclose = function(event) {
alert('连接被关闭!');
};

} else {
alert("你的浏览器不支持！");
}

//socket發送消息
function send(message) {
if (!window.WebSocket) {
return;
}
if (socket.readyState == WebSocket.OPEN) {
socket.send(message);
}
}

4。h5中视频元素audio

document.getElementById("lectureVideo").play();

document.getElementById("lectureVideo").currentTime=lectureStartTime;

5.js 字符串转为json字符串

var str = JSON.stringify(returnMsg); //转换成string

6、Ajax 异步上传图片插件ajaxfileupload.js

js文件已上传空间：http://download.csdn.net/detail/lixld/9715196

$(".inp_fileToUpload").live("change", function() {//现在这个已经适用于多个file表单。
var file_id = $(this).attr("id");
// alert(file_id);
var msgType="";
if("imgToUpload"==file_id){
msgType = 2;
}else if("voiceToUpload"==file_id){
msgType = 1;
}
ajaxFileUpload(file_id,msgType);
});

function checkFileType(fileID){

var file = $("#"+fileID).val();
if (file == null||file == ""){
alert("请选择要上传的图片!");
return false;
}
if (file.lastIndexOf('.')==-1){ //如果不存在"."
alert("路径不正确!");
return false;
}
var AllImgExt="";
var extName = file.substring(file.lastIndexOf(".")).toLowerCase();//（把路径中的所有字母全部转换为小写）
var ErrMsg="";
//图片
if("imgToUpload"==fileID){
var AllImgExt=".jpg|.jpeg|.gif|.bmp|.png|";
var ErrMsg="该文件类型不允许上传。请上传 "+AllImgExt+" 类型的文件，当前文件类型为"+extName;
if(AllImgExt.indexOf(extName+"|")==-1)
{
alert(ErrMsg);
return false;
}else {
return true;
};

}else if("voiceToUpload"==fileID){//声音
var AllImgExt = ".amr|";
var ErrMsg="该文件类型不允许上传。请上传 "+AllImgExt+" 类型的文件，当前文件类型为"+extName;
if(AllImgExt.indexOf(extName+"|")==-1)
{
alert(ErrMsg);
return false;
}else {
return true;
};
};
}

function ajaxFileUpload(file_id,msgType){
var checkResult = checkFileType(file_id);
if(!checkResult){
return false;
}else{
jQuery.ajaxFileUpload({
// url : "<%=basePath%>/chatContent/addChatContentImgOrVoice",
url : "/chatContent/addChatContentImgOrVoice",//用于文件上传的服务器端请求地址
secureuri : false, //是否需要安全协议，一般设置为false
fileElementId : file_id, //文件上传域的ID
dataType : 'json', //返回值类型一般设置为json
success : function(data){//服务器成功响应处理函数
var test = JSON.stringify(data);

if (data.code == '1'){
var duration=0;
//是声音，才有时长的属性
if(msgType==1){
duration = 15;
}
// alert(1);
//图片或语音地址
var fileName=data.data.key;

var usIcon = $("#lectureAccount_userIcon").val();
var nickname = $("#lectureAccount_nickname").val();

var chatDiv_part1 = "<div class='msg msg-self'>"+
// time+
"<div class='ava'>"+
"<img src='"+usIcon+"' />"+
"</div>"+
"<div class='cont'>"+
"<h3> "+nickname;
var chatDiv_part2 = "";

var chatDiv_part3 = "</h3>";
var contentUI = "";
if(msgType==1){// 1:声音
contentUI = "<p><audio src=\""+fileName+"\" controls='controls'>Your browser does not support the audio element.</audio></p>";
}

if(msgType==2){// 2:图片
contentUI = "<p><img class='pimg' src='"+fileName+"' height='50px'></img></p>";
}
chatDiv_part3 = chatDiv_part3+contentUI+
"</div>"+
"</div>";
var chatDiv = $(chatDiv_part1+chatDiv_part2+chatDiv_part3);
$("#chatContentDiv").append(chatDiv);

$(".pimg").click(function(){
var _this = $(this);//将当前的pimg元素作为_this传入函数
imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
});
setchatlistbottom("chatContentDiv");

//直接把消息发送
sendMsg(duration,fileName,msgType,true);
// alert(2);
}else{
alert(data.message);
};
},
error : function(data){//服务器响应失败处理函数
alert('服务器响应失败');
}

});

}
return false;
}

6.图片点击放大显示：

<p><img class='pimg' src='"+fileName+"' height='50px'></img></p>

step1:页面添加元素

step2:添加js

step3://给图片元素添加

pimg是给图片添加的class名字

$(".pimg").click(function(){
var _this = $(this);//将当前的pimg元素作为_this传入函数
imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
});

7.让页面滚动到聊天页面的最下方：

div是聊天页面的divId

function setchatlistbottom(div) {
$('#'+div).scrollTop($('#'+div)[0].scrollHeight);
}

function strToJson(str){
return (new Function("return " + str))();
}

function uuid() {
var s = [];
var hexDigits = "0123456789abcdef";
for (var i = 0; i < 36; i++) {
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
}
s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
s[8] = s[13] = s[18] = s[23] = "-";

var uuid = s.join("");
return uuid;
}