极客观点
项目管理
HarmonyOS
最近看到了一个手机端的小程序，可是在电脑端无法使用，原因是其中一个js是手机端js，怎么将这个js专为PC端可以使用的js
function tabLoad(obj,oJson){
var This=this; //构造出来的对象
var oDir=oJson.dir?oJson.dir:"y";
var oPrevent=oJson.prevent!='undefinde'?oJson.prevent:true;
if(!oJson.prevent){
document.addEventListener("touchstart",function(e){e.preventDefault();},false);
document.addEventListener("touchmove",function(e){e.preventDefault();},false);
document.addEventListener("touchend",function(e){e.preventDefault();},false);
}
this.target=oJson.flag?oJson.flag:false;
this.link=oJson.link; //接口地址
this.aLink=oJson.data; //接口参数
this.oGetMessage=this.getWindow();
this.oParent=document.querySelector(obj);
this.oClassFinc=this.oParent.querySelector(".classIfication");
this.aLi=this.oParent.querySelectorAll("li");
this.oIndex=oJson.add?oJson.add:0;//判断是哪个页面显示出来
this.oVideo=this.oParent.querySelector(".All_video");
this.oSwiper=this.oParent.querySelector(".swiper_video");
this.aJieS=this.oParent.querySelectorAll(".jiepan_swiper");
this.oJp=this.oParent.querySelectorAll(".jiepan");
this.oWidth=this.oJp[0].offsetWidth;
this.oSwiper.style.width=this.oWidth*this.oJp.length+'px';
this.oSwiper.style.transform="translateX(-"+this.oIndex*this.oJp.length+'px)';
//这里是滑屏配置变量
this.oFn=oDir=='y'?"offsetHeight":'offsetWidth';
this.oPage=oDir=='y'?"pageY":"pageX";
this.dir=oDir=='y'?'Y':'X';
this.oTran=oDir=='y'?"translateY":"translateX";
this.setHeight();//设置高度
window.onresize=function(){ //页面发生变化的时候
This.oGetMessage=This.getWindow();
This.setHeight();
};
for(var i=0;i<this.aLi.length;i++){
(function(index){
This.aJieS[i].style.cssText="";
This.aJieS[i].dataset.translateX=0;
This.aJieS[i].dataset.translateY=0;
This.aJieS[i].indexs=0;
This.aJieS[i].index=index;
This.aJieS[i].innerHTML="";
This.aJieS[i].Loding=false;
This.aLi[i].flag=true;
This.aLi[i].className="";
if(!This.aLi[i].addEvent){
This.aLi[i].addEventListener("touchend",This.iOpen.bind(This,index),false);
This.aLi[i].addEvent=true;
}
}(i))
};
this.iOpen(this.oIndex);//第一次的触发
};
tabLoad.prototype={
"constructor":tabLoad, //修正函数指向
"getWindow":function(){
return {
"clientWidth":document.documentElement.clientWidth||document.body.clientWidth,
"clientHeight":document.documentElement.clientHeight||document.body.clientHeight
}
},
"hasClass":function(obj,attr){
var oIndex="";
for(var i=0;i<obj.length;i++){
if(obj[i].className.indexOf(attr,0)!=-1){
oIndex=i;
break
}
}
return oIndex
},
/*任意进制加密*/
"EnChTo":function(text,h){
window.localStorage.setItem("base36",h);
var monyer = new Array();var i,s;
for(i=0;i<text.length;i++){
monyer+=text.charCodeAt(i).toString(h)+" ";
}
return monyer;
},
/*任意进制解密*/
"DeChTo":function(text){
var monyer = new Array();var i;
var s=text.split(" ");
for(i=0;i<s.length;i++){
monyer+=String.fromCharCode(parseInt(s[i],window.localStorage.getItem("base36")));
}
return monyer;
},
"setHeight":function(){
this.oVideo.style.height=this.oGetMessage.clientHeight-this.oClassFinc.offsetHeight+'px';
this.oSwiper.style.height=this.oGetMessage.clientHeight-this.oClassFinc.offsetHeight+'px';
this.oJp.forEach((item,index)=>{
item.style.height=this.oGetMessage.clientHeight-this.oClassFinc.offsetHeight+'px';
});
},
"iOpen":function(oIndex){
this.aLi[this.oIndex].classList.remove("active");
this.oIndex=oIndex;
this.oSwiper.style.transition="transform 0.6s cubic-bezier(0.64, -0.35, 0.35, 1.47)";
this.oSwiper.style.transform="translateX(-"+this.oIndex*this.oWidth+"px)";
this.aLi[this.oIndex].classList.add("active");
if(this.aLi[this.oIndex].flag){
this.aJieS[this.oIndex].dataset.comment&&this.triggle(this.aJieS[this.oIndex],this.aJieS[this.oIndex].dataset.comment)
this.aLi[this.oIndex].flag=false;
this.getData({
"link":this.aLink[this.oIndex],
"oIndex":this.oIndex
});
if(!this.aJieS[this.oIndex].addEvent){
this.Sliding_screen({
el:this.aJieS[this.oIndex],
});
};
}
},
"getData":function(data){
var This=this;
var oShowE=this.aJieS[data.oIndex];
//这里进行接口调用
var oData=data.link?data.link:{};
oShowE.indexs+=1;
oData.page=oShowE.indexs;
var url=$.type(this.link).toLowerCase()=='array'?this.link[data.oIndex]:this.link;
$.ajax({
"url":url,
"data":oData,
"dataType":"json",
"type":"get",
"success":res=>{
if(res.data){
var oTemp=oShowE.dataset.template?oShowE.dataset.template:"Template1";
for(var i=0;i<res.data.length;i++){
oShowE.innerHTML+=this[oTemp](res.data[i],i);
}
var oLoading=oShowE.querySelector(".Loading");
if(oLoading){
oLoading.remove();
oShowE.Loding=false;
}
this.after&&this.after();
}else{
oShowE.Loding=true;
if(oShowE.indexs!=1){
var oLoading=oShowE.querySelector(".Loading");
oLoading.remove();
oShowE.innerHTML+="<p style='font-size: 20px; color:#f00; text-align: center;'>没有更多数据了...</p>"
setTimeout(function(){
var obj=oShowE.children[oShowE.children.length-1];
obj.remove();
This.oMaxS=(oShowE.parentNode[This.oFn]-oShowE[This.oFn]-20)>0?0:(oShowE.parentNode[This.oFn]-oShowE[This.oFn]-20);//最大上拉值
oShowE.style.transform=This.oTran+"("+This.oMaxS+"px)";
oShowE.dataset[This.oTran]=This.oMaxS;
},5000);
}else{ //第一次没有数据
oShowE.style.height="100%"
oShowE.innerHTML+="<div class='null' style='position:relative;height:100%'>\
<div style='position:absolute;width:100%'>\
<img src='../images/beijin.jpg'>\
<p style='font-size: 20px; color:#9C9C9C; position: absolute; top: 100%; transform: translateY(-50%); width: 100%; text-align: center;'>暂时没有数据<br/>╥﹏╥</p>\
</div>\
</div>"
}
};
},
"error":function(res){
}
})
},
"Prompt":function(res){ //提示窗口
var oHtml=`
<div class="masks">
<div class="Prompts">
<i class="iconfont"></i>
<p>您尚未开通${res.text}服务,请联系客服为您开通!!!</p>
<ul>
<li class="">取消</li>
<li class=""><a href="tel:${res.phone}">联系客服</a></li>
</ul>
</div>
</div>
`
return oHtml
},
"getTime":function(data){
var date=new Date(data*1000);
return date.getFullYear()+'/'+date.getMonth()+'/'+date.getDay()
},
"Template1":function(oData,i){
var oHtml=`
<div class="Grand_Template" data-grade_id="${oData.grade_id}" data-id="${oData.id}" data-teacher="${oData.teacher_id}">
<div class="Grand_Template-center">
<div class="Grand_Template_left">
<img src="${oData.thumb.includes('gaotime')?oData.thumb:oData.thumb+'@w_200,q_80'}" alt="图片丢失了" title="${oData.title}"/>
<i></i>
</div>
<div class="Grand_Template_right">
<h3>${oData.title}</h3>
<div class="Grand_Template_right_message">
<time>
<i class="iconfont"></i>
${oData.create_time}
</time>
<nav>
<div>
<i class="iconfont"></i>
${oData.tv_page_view}
</div>
<div>
<i class="iconfont"></i>
${oData.tv_like_num}
</div>
</nav>
</div>
</div>
</div>
</div>
`
return oHtml
},
"Sliding_screen":function(config){
var This=this; //构造的对象；
var obj=config.el;
this.oMaxS=(obj.parentNode[this.oFn]-obj[this.oFn]-20)>0?0:(obj.parentNode[this.oFn]-obj[this.oFn]-20);//最大上拉值
this.oBegin=0;
this.oStart=0;this.oPrevDis=0,this.oPrevTime=0; //按上去
this.oMove=0,this.iSpeedDis=0,this.iSpeedTime=0; //滑动的时候
obj.addEventListener("touchstart",this.start.bind(this,obj),false);
obj.addEventListener("touchmove",this.move.bind(this,obj),false);
obj.addEventListener("touchend",this.end.bind(this,obj),false);
obj.addEvent=true;
},
"start":function(This,e){
This.style.transition="none";
this.oStart=e.changedTouches[0][this.oPage];
this.oPrevDis=this.oStart;
this.moves=null;
this.startTime=new Date().getTime()
this.oPrevTime=this.startTime;
this.iSpeedDis=this.iSpeedTime=0;
this.oBegin=parseInt(This.dataset[this.oTran]);
},
"move":function(This,e){
this.oMaxS=(This.parentNode[this.oFn]-This[this.oFn]-20)>0?0:(This.parentNode[this.oFn]-This[this.oFn]-20);
console.log(This.parentNode[this.oFn],This[this.oFn])
This.style.transition="none";
var oDate=new Date().getTime();
this.oTarget=0;
this.oMove=e.changedTouches[0][this.oPage];
if(this.moves==null&&this.oMove==this.oStart){
this.moves=false
return
};
var oSpeend=this.oMove-this.oStart; //滑动的值
this.iSpeedDis=this.oMove-this.oPrevDis; //路程差
this.oPrevDis=this.oMove
this.iSpeedTime=oDate-this.oPrevTime; //时间差
this.oPrevTime=oDate;
if(this.oBegin+oSpeend>0){ //超出时，使用户滑动屏幕不方便；
this.oTarget=this.oBegin+oSpeend*0.3;
}else if(this.oBegin+oSpeend<this.oMaxS){
this.oTarget=this.oBegin+oSpeend*0.3;
}else{
this.oTarget=this.oBegin+oSpeend;
};
This.style.transform=this.oTran+"("+this.oTarget+"px)";
if(this.oTarget>0){
This.dataset[this.oTran]=0;
}else if(this.oTarget<this.oMaxS){
This.dataset[this.oTran]=this.oMaxS;
}else{
This.dataset[this.oTran]=this.oTarget;
}
},
"end":function(This,e){
var _this=this;
var oEndTime=new Date().getTime();
if(!this.moves&&oEndTime-this.startTime<100&&this.target){
var flag=null;
if($(e.target).parents(".Grand_Template").hasClass("Grand_Template")){
flag=$(e.target).parents(".Grand_Template")
}else if($(e.target).hasClass("Grand_Template")){
flag=$(e.target)
};
if(flag){
var Grade=flag.data().grade_id; //等级ID;
var allGrade=window.localStorage.getItem("grade").split("");
var nowGrade='1';
for(var i=0;i<allGrade.length;i++){
if(allGrade[i]==Grade){
nowGrade=allGrade[i];
break
}
};
if(nowGrade||Grade==0){
var str='';
var json=flag.data();
for(var attr in json){
str+="&"+attr+'='+json[attr]
}
for(var attr in this.aLink[this.oIndex]){
str+="&"+attr+'='+this.aLink[this.oIndex][attr]
}
window.localStorage.setItem("url",str);
window.location.href="v_play.html"
}else{ //等级不满足
$.ajax({
"url":"http://testyii.webf10.com/customer/tvinfo?action=get_grade_name",
"type":"get",
"jsontype":"json",
"data":{
grade_id:Grade
},
"success":res=>{
if(res.status==0){
var html=this.Prompt({
"text":res.data.grade_name,
"phone":"10086"
});
$("body").append(html);
var Prompt=document.querySelector(".masks");
Prompt.style.display="block";
setTimeout(function(){
Prompt.classList.add("show");
},30);
var aLis=Prompt.querySelectorAll("li");
aLis.forEach((item,index)=>{
item.addEventListener("touchstart",function(e){
e.stopPropagation();
item.classList.add("active")
},false);
item.addEventListener("touchend",function(e){
e.stopPropagation();
item.classList.remove("active");
if(index==0){
Prompt.addEventListener("webkitTransitionEnd",end,false);
Prompt.classList.remove("show");
function end(e){
Prompt.removeEventListener("webkitTransitionEnd",end,false);
setTimeout(function(){
Prompt.remove();
},300);
}
}
},false);
});
}
},
"error":function(res){
}
})
}
}
}
var oSpeed=Math.round(this.iSpeedDis/this.iSpeedTime*10); //速度
oSpeed=this.iSpeedTime==0?0:oSpeed;
oSpeed=(oEndTime-this.oPrevTime)>300?0:oSpeed; //判断用户是否是最后停止滑动时，留在了屏幕上一段时间
var iTarget=parseInt(This.dataset[this.oTran]);
var oTarget=oSpeed*20+iTarget;
var cub="cubic-bezier(.1,.69,.1,1)"; //默认配置
var Time=Math.round(Math.abs(oTarget)-Math.abs(iTarget)*0.8);
Time=Time<200?200:Time;
Time=Time>1000?1000:Time;
if(oTarget>0){
oTarget=0;
cub="cubic-bezier(.31,1.23,.59,1.13)";
}else if(oTarget<this.oMaxS){
cub="cubic-bezier(.31,1.23,.59,1.13)";
//下拉加载
if(!This.Loding){
This.Loding=true;
var oP=document.createElement("p");
oP.className="Loading";
This.appendChild(oP);
_this.getData({
"link":_this.aLink[This.index],
"oIndex":This.index
});
}
this.oMaxS=(This.parentNode[this.oFn]-This[this.oFn]-20)>0?0:(This.parentNode[this.oFn]-This[this.oFn]-20);
oTarget=this.oMaxS;
};
This.style.transition=Time+'ms';
This.style.transitionTimingFunction=cub;
This.style.transform=this.oTran+"("+oTarget+"px)";
This.dataset[this.oTran]=oTarget;
},
"triggle":function(obj,prevent,config){
var oJson=obj.oJson;
if(oJson&&oJson[prevent]){
for(var i=0;i<oJson[prevent].length;i++){
if(config){
oJson[prevent][i].call(obj,config)
}else{
oJson[prevent][i].call(obj)
}
}
}
},
"bind":function(obj,events,fn){
obj.oJson=obj.oJson||{};
obj.oJson[events]=obj.oJson[events]||[];
obj.oJson[events].push(fn);
},
}我试过将其中的touch事件变为click事件，但是还是无法很好的解决，有什么办法能直接将这个js转为PC端可用的吗
html5
java
通过获取请求的 User-Agent 来动态的使用不同的事件