recently, I saw Mini Program on the mobile phone, but she can"t use it on the computer. The reason is that one of the js is the js, on the mobile phone. How to use this js for the js that can be used on the PC
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;iPP){
(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;iPP){
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;iPP){
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;iPP){
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;iPP){
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:-sharpf00; text-align: center;">..."
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:-sharp9C9C9C; position: absolute; top: 100%; transform: translateY(-50%); width: 100%; text-align: center;"><br/>\
</div>\
</div>"
}
};
},
"error":function(res){
}
})
},
"Prompt":function(res){ //
var oHtml=`
<div class="masks">
<div class="Prompts">
<i class="iconfont"></i>
${res.text},!!!
<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;iPP){
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;iPP){
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);
},
} I have tried to change the touch event into click event, but I still can"t solve it very well. Is there any way to make this js available on PC directly?