小编最近在写一个按摩椅倒计时按摩椅倒计时功能时候，在安卓机运行良好，放到苹果机上运行直接凉凉了，小编欲哭无泪。纠结了一天终于解决了这个问题:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no viewport-fit=cover">
<title>共享按摩椅</title>
<link rel="stylesheet" href="/Public/dishuang/css/work.css">
</head>
<body>
<div class="massor_top">
<div class="massor_top_left">
<img class="image1" src="/Public/dishuang/imgs/dingweih.png" alt="">
<span>{$data.name}</span>
<img class="image2" src="/Public/dishuang/imgs/arrowh.png" alt="">
</div>
<div class="massor_top_right">
<img class="image3" src="/Public/dishuang/imgs/qrcodeh.png" alt="">
<span id="dev_code">{$data.dev_code}</span>
</div>
</div>
<div class="content">
<div class="suspend" id="stop">
暂停按摩
</div>
<div class="progress">
<canvas id="canvas1"></canvas>
<div class="progress-content">
<p class="p1" id="left_time">00:00</p>
<p class="p2">剩余时间</p>
</div>
</div>
</div>
<div class="message">
<div class="option">
<div class="option_left">套餐名称：</div>
<div class="option_right">{$data.remark}</div>
</div>
<div class="option">
<div class="option_left">按摩时间：</div>
<div class="option_right">{$data.command_time}分钟</div>
</div>
<div class="option">
<div class="option_left">支付金额：</div>
<div class="option_right">￥{$data.money}</div>
</div>
<div class="option">
<div class="option_left">支付时间：</div>
<div class="option_right">{$data.pay_time}</div>
</div>
<div class="option">
<div class="option_left">订单编号：</div>
<div class="option_right" id="order_num">{$data.order_num}</div>
</div>
</div>
<div class="footer">
客服热线：
<span class="text">4009600886</span>
</div>
</body>
<script src="/Public/agent/js/jquery3.2.1.min.js"></script>
<script src="/Public/dishuang/js/rem.js"></script>
<script src="/Public/test/megapix-image.js"></script>
<script src="/Public/test/megapix-image.test.js"></script>
<script>
$order_num=$('#order_num').html();
showTime(0);
// startWork();
window.function(){
//页面加载完毕
$num=localStorage.getItem($order_num+"_number");
if($num==null||$num=="null"){
$num=0;
}
if($num>=3&&$num!=null){
startWork();
}else{
check();//检查机器是否已经启动
}
}
var $tt=null;
function check() {
$num=localStorage.getItem($order_num+"_number");
if($num==""||$num=="null"||$num==null||$num==undefined){
$num=0;
}
console.log($num);
$tt=setInterval(function () {
$.ajax({
url:"{:U('pay/findOrder')}",
data:{"order_num":$('#order_num').html()},
type:"post",
success:function ($res) {
console.log($res);
if($res.status==1||$res.status==2){
//没有查询到订单，停止定时查询
clearInterval($tt);
}else {
//说明查找订单数据，判断订单状态机器是否已经启动
$data=$res.data;
$type=$data.type;//订单状态
//设备状态
$ins_gz=$data.ins_gz;
if($type==3){
console.log("订单已经退款");
localStorage.setItem($order_num,1);//关闭查询定时器
}
// else if($type==2){
// console.log("订单已经完成");
// }
else if($type==1||$type==4||$type==2){
console.log("订单已经付款,或者兑换码启动");
//判断机器是否已经启动
if($ins_gz==1){
//设备已经开始工作，启动倒计时
startWork();
localStorage.setItem($order_num,1);
localStorage.setItem($order_num+"_number",36);
localStorage.setItem($order_num,1);//关闭查询定时器
}else{
console.log("等待设备启动");
//说明设备还没有工作，查询4次，直到15秒后停止该定时器，说明这个订单已经退款
$num+=3;
console.log($num);
localStorage.setItem($order_num+"_number",$num);
if($num>=15){
if($tt){
clearInterval($tt);//清楚定时器
}
localStorage.setItem($order_num,1);//关闭查询定时器
location.reload();
}else{
localStorage.setItem($order_num,2);//接着查询
}
}
}
}
},
error:function ($err) {
console.log($err);
}
});//ajax请求结束
},3000);
$start=localStorage.getItem($order_num);
if($start==1&&$tt){
clearInterval($tt);
}
}
//开始定时工作
//三秒请求一次按摩椅的定时工作状态
function startWork() {
if($tt){
clearInterval($tt);
}
var $timer=setInterval(function () {
$.ajax({
url:"{:U('pay/getTime')}",
data:{"order_num":$('#order_num').html()},
type:"post",
success:function ($res) {
$total_time=$res.data.total_time;
$left_time=$res.data.left_time;
$show_time=$res.data.time_str;
if($left_time<=0){
//清除定时器
clearInterval($timer);
$('#left_time').empty().html("00:00");
showTime(0);
}else{
//显示剩下时间
$('#left_time').empty().html($left_time);
$percent=$left_time/$total_time;
showTime($percent);
}
}
});
},3000);
}
function showTime(a){
// alert(a);
var c = document.getElementById("canvas1");
var ctx = c.getContext("2d");
var clientWidth = document.documentElement.clientWidth;;
//根据设计图中的canvas画布的占比进行设置
var canvasWidth = Math.floor(clientWidth * 6.187 / 16);
c.setAttribute('width', canvasWidth + 'px');
c.setAttribute('height', canvasWidth + 'px');
ctx.beginPath();
ctx.arc(canvasWidth / 2, canvasWidth / 2, canvasWidth / 2, -0.5 * Math.PI, 2 * Math.PI - 0.5 * Math.PI);
ctx.fillStyle = "rgb(217,217,217)";
ctx.fill();
ctx.beginPath();
ctx.moveTo(canvasWidth / 2, canvasWidth / 2);
ctx.arc(canvasWidth / 2, canvasWidth / 2, canvasWidth / 2, -0.5 * Math.PI, a * 2 * Math.PI - 0.5 * Math.PI);
ctx.closePath();
ctx.fillStyle = "rgb(100, 193, 198)";
ctx.fill();
ctx.beginPath();
ctx.arc(canvasWidth / 2, canvasWidth / 2, canvasWidth / 2 * 0.7, 0, 2 * Math.PI);
ctx.fillStyle = "rgb(255,255,255)";
ctx.fill();
}
$('#stop').click(function () {
$.ajax({
url:"{:U('pay/stopDisChaungChair')}",
type:"post",
data:{"dev_code":$('#dev_code').html(),"order_num":$('#order_num').html()},
success:function ($res) {
alert($res.msg);
}
});
});
</script>
</html>
我的页面代码如上:
问题产生原因一:苹果机不支持canvas
引入了如下两个js文件解决苹果机不支持canvas的问题
<script src="/Public/test/megapix-image.js"></script>
<script src="/Public/test/megapix-image.test.js"></script>
下载路径：链接: https://pan.baidu.com/s/1d16iAqklwhS6ZYA1jzFL-w 提取码: cit7
问题产生原因二:小编为了偷懒引入了csdn加速jquery文件，结果苹果机无法加载外部juqery出现错误，最后小编通过在引入本地资源完美解决这个问题