最近看到了一个手机端的小程序,可是在电脑端无法使用,原因是其中一个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.οnresize=function(){ //页面发生变化的时候

This.oGetMessage=This.getWindow();

This.setHeight();

};

for(var i=0;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

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

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

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

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+="

没有更多数据了...

"

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+="

\

\

\

暂时没有数据
╥﹏╥

\

\

"

}

};

},

"error":function(res){

}

})

},

"Prompt":function(res){ //提示窗口

var oHtml=`

您尚未开通${res.text}服务,请联系客服为您开通!!!

  • 取消
  • 联系客服

`

return oHtml

},

"getTime":function(data){

var date=new Date(data*1000);

return date.getFullYear()+'/'+date.getMonth()+'/'+date.getDay()

},

"Template1":function(oData,i){

var oHtml=`

${oData.title}

${oData.create_time}

${oData.tv_page_view}

${oData.tv_like_num}

`

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.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.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

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

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

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端可用的吗

pc变手机端html,让移动端的事件变为PC端的事件相关推荐

  1. php自动识别pc和手机端并跳转,JS如何实现网站中PC端和手机端自动识别并跳转对应的代码...

    1.  代码场景: 描述:在项目中,一般我们会使用响应式布局的方式或者借助bootstrap等插件来做响应式的网站.但是根据业务的需求,手机端可能会在功能上精简很多,我们也会写两套代码,分别用来实现P ...

  2. 用phpcms切换中英文网页的方法(不用解析二级域名)、phpcms完成pc和手机端切换(同一域名)...

    AA.phpcms进行双语切换方法(不用解析二级域名) phpcms进行两种语言的切换,有一把部分的人都是进行的二级域名的解析,这样的话可能会有一部分的麻烦,我这里有一种方法可以不用解析二级域名就可以 ...

  3. 微信自定义分享在pc正常手机端不正常问题

    微信自定义分享在pc正常手机端不正常,使用debug得到的结果都是ok,没问题.但是手机微信就是不行.经过排查后发现,分享的链接不能够直接使用授权链接.因此,为了获取用户信息,我的解决办法是新建一个新 ...

  4. window.open 兼容 PC 和手机端

    window.open 由于浏览器安全策略的原因,在 PC 和手机端的表现可能会出现不同 更多精彩 更多技术博客,请移步 asing1elife's blog 导致不同的根本原因 由于 window. ...

  5. html图片手机端不清楚,HTML+CSS图片大小自适应~PC电脑端、手机端

    写页面的时候经常会遇到需要图片 自适应 容器大小这样的情况: div{width:400px;height:400px;border:1px solid #000; } img{width:100%; ...

  6. html5手机端设置date,H5 input[type='date'] 优化 pc端和移动端的使用

    标签在HTML5中新增了color, date, datetime, datetime-local, month, week, time, email, number, range, search, ...

  7. 用ftp实现局域网pc和手机端文件共享

    如何共享手机上的文件? 在局域网中在pc端或手机端共享自己手机上的文件: 用swift  ,这是网上下载的几十kb的手机ftp服务器. 下载安装后设置:   设置一下用户名和密码,端口号不变.保存.s ...

  8. Thinkphp 5.1 PC和手机端加载不同路径下的模板~功能实现

    现在开发虽然很多都是前后端分离了,但是还是很多项目没有前后端分离 现在要实现功能 就是手机端和电脑端增加不同路径下面的模板~ DEMO 仅供参考 1.在公共函数增加函数  isMobile 验证设备是 ...

  9. 响应式房产置业公司PHP网站源码、自适应PC和手机端

    介绍: 此套源码整理测试感觉很不错,可惜我没有企业用不到,不然就自己用了~ PHP网站源码介绍: 此款源码适合基建.施工.地产.物业等房地产类企业拿来做自己的企业官网,前端采用自适应HTML5模板,自 ...

最新文章

  1. 史上最详细版Centos6安装详细教程
  2. JVM内存区域划分及其管理机制
  3. 一加会搭载鸿蒙,华为P50用液态镜头,小米11于29日发布,一加9一季度发布
  4. BZOJ 2427 软件安装(强连通分量+树形背包)
  5. ubuntu安装linux deepin,如何在Ubuntu中安装Deepin终端 | MOS86
  6. How to find Material based on Sales Organization and Distribution Channel
  7. 《集体智慧编程》笔记(1 / 12):集体智慧导言
  8. 类的定义 java 1613806383
  9. Linux学习笔记(单用户模式,救援模式,克隆主机,两个linux互相连接)
  10. win7系统计算机无最小化,win7纯净版系统任务栏无法显示网页最小化窗口怎么办...
  11. Pytest学习-如何在用例代码中调用fixtrue时传入参数
  12. MybatisPlus
  13. c语言,10行代码写一个简单鼠标连点器
  14. 2016310Exp4 恶意代码及分析
  15. 「案例分析」生鲜行业B2B供应链平台开发案例
  16. html中 导航条置顶的代码6,JS+CSS实现六级网站导航主菜单效果
  17. java时间格式化与格式
  18. Python进程池之pool.map()函数传入多参数
  19. Android 屏蔽第三方SDK权限
  20. 数字货币合约统计套利1月17报告

热门文章

  1. IDEA连接PostgreSQL数据库
  2. JS中获取地址栏中的参数
  3. nextcloud+nginx+mysql_nextcloud网盘搭建:Ubuntu18.04+Nginx+Mysql
  4. 只学一门java可行吗,java可以作为第一门编程语言学习吗
  5. javamailsender注入失败_关于SpringBoot使用Redis空指针的问题(不能成功注入的问题)...
  6. 实现java内存队列消费事件-ConcurrentLinkedQueue
  7. 如何优雅的在java中统计代码块耗时
  8. Android开发笔记(十九)底部标签栏TabBar
  9. 记录一次nginx 配置https 强制http转发到https
  10. 【架构设计的艺术】Kafka如何通过精妙的架构设计优化JVM GC问题?