llpt_orderchannel-s1h5/tt/hd/page.js

//选中
$('.circular').click(function () {
    $('.circular').toggleClass("active")
});
//边框
$('.iphone').focus(function () {
    $(this).css('border', '1px solid #FF14CB');
    $(this).css('opacity', '1');
});
$('.iphone').blur(function () {
    $(this).css('border', '1px solid #fff');

    if ($(this).val() == '') {
        $(this).css('opacity', '0.49');
    } else {
        $(this).css('opacity', '1');
    }
});
$('.yanzhenma').focus(function () {
    $(this).css('border', '1px solid #FF14CB');
    $(this).css('opacity', '1');
});
$('.yanzhenma').blur(function () {
    $(this).css('border', '1px solid #fff');
    if ($(this).val() == '') {
        $(this).css('opacity', '0.49');
    } else {
        $(this).css('opacity', '1');
    }
});
$('.btn').mousedown(function () {
    $(this).css('opacity', '0.8')
});
$('.btn').mouseup(function () {
    console.log(1);
    $(this).css('opacity', '1')
});
//弹窗
$('.yuyue').click(function () {
    $('.maskArea').show();
    $('.tc').show();
    $('.close').show();
});
$('.close').click(function () {
    $('.maskArea').hide();
    $('.tc').hide();
    $('.close').hide();
});
//验证码倒计时
var countdown = 60;
$('.yanzhenma_btn').click(function () {
    console.log($('.iphone').val().length);
    if (!(/^1[3|4|5|8][0-9]\d{4,8}$/.test($('.iphone').val())) || $('.iphone').val().length < 11) {
        alert('请输入正确电话号码');
    } else {
        settime($(this))
    }
    /*$(this).css('background-color','yanzhenma_btn')*/
});

function settime(val) {
    if (countdown == 0) {
        val.css('background-color', '#FF14CB');
        val.attr("disabled", false);
        val.val("获取验证码");
        countdown = 60;
    } else {
        val.attr("disabled", true);
        val.val(countdown + 's');
        countdown--;
        setTimeout(function () {
            settime(val)
        }, 1000)
    }
}

//环形图
var fw = $('.header1').width();
$('.header1').height(fw);
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
var process = 0;
var w = parseInt($('#myCanvas').css('width'));
console.log(w);
var mW = c.width = w;
var mH = c.height = w;
var lineWidth = 5;
var r = mW / 2;
var cR = r - 4 * lineWidth; //圆半径
var startAngle = -(1 / 2 * Math.PI); //开始角度
var endAngle = startAngle + 2 * Math.PI; //结束角度
var xAngle = 1 * (Math.PI / 180); //偏移角度量
var fontSize = 35; //字号大小
var tmpAngle = startAngle; //临时角度变量
//渲染函数
var rander = function (ctx, prs) {
    ctx.clearRect(0, 0, mW, mH);
    ctx.beginPath();
    ctx.lineWidth = 20;
    ctx.strokeStyle = '#fff';
    ctx.arc(r, r, cR, Math.PI * 1.5, Math.PI * (1.5 + 2 * prs / 100));
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.lineWidth = 20;
    ctx.lineCap = 'round';
    ctx.strokeStyle = '#FF14CB';
    ctx.arc(r, r, cR, Math.PI * (1.5 + 2 * prs / 100), Math.PI * 1.5);
    ctx.stroke();
    ctx.closePath();
};

function animate(i) {
    requestAnimationFrame(function () {
        process = process + 1;
        rander(ctx, process);
        if (process < i) {
            animate(i);
        }
    });
}

animate(50);