page.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. //选中
  2. $('.circular').click(function(){
  3. $('.circular').toggleClass("active")
  4. });
  5. //边框
  6. $('.iphone').focus(function(){
  7. $(this).css('border','1px solid #FF14CB');
  8. $(this).css('opacity','1');
  9. })
  10. $('.iphone').blur(function(){
  11. $(this).css('border','1px solid #fff');
  12. if($(this).val()==''){
  13. $(this).css('opacity','0.49');
  14. }
  15. else{
  16. $(this).css('opacity','1');
  17. }
  18. })
  19. $('.yanzhenma').focus(function(){
  20. $(this).css('border','1px solid #FF14CB');
  21. $(this).css('opacity','1');
  22. })
  23. $('.yanzhenma').blur(function(){
  24. $(this).css('border','1px solid #fff')
  25. if($(this).val()==''){
  26. $(this).css('opacity','0.49');
  27. }
  28. else{
  29. $(this).css('opacity','1');
  30. }
  31. })
  32. $('.btn').mousedown(function(){
  33. $(this).css('opacity','0.8')
  34. });
  35. $('.btn').mouseup(function(){
  36. console.log(1);
  37. $(this).css('opacity','1')
  38. })
  39. //弹窗
  40. $('.yuyue').click(function(){
  41. $('.maskArea').show();
  42. $('.tc').show();
  43. $('.close').show();
  44. })
  45. $('.close').click(function(){
  46. $('.maskArea').hide();
  47. $('.tc').hide();
  48. $('.close').hide();
  49. })
  50. //验证码倒计时
  51. var countdown=60;
  52. $('.yanzhenma_btn').click(function(){
  53. console.log($('.iphone').val().length)
  54. if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test($('.iphone').val()))||$('.iphone').val().length<11){
  55. alert('请输入正确电话号码');
  56. }
  57. else{
  58. settime($(this))
  59. }
  60. /*$(this).css('background-color','yanzhenma_btn')*/
  61. });
  62. function settime(val) {
  63. if (countdown == 0) {
  64. val.css('background-color','#FF14CB')
  65. val.attr("disabled", false);
  66. val.val("获取验证码");
  67. countdown = 60;
  68. }
  69. else {
  70. val.attr("disabled", true);
  71. val.val(countdown+'s');
  72. countdown--;
  73. setTimeout(function() {
  74. settime(val)
  75. },1000)
  76. }
  77. }
  78. //环形图
  79. var fw=$('.header1').width();
  80. $('.header1').height(fw)
  81. var c = document.getElementById('myCanvas');
  82. var ctx = c.getContext('2d');
  83. var process = 0;
  84. var w=parseInt($('#myCanvas').css('width'))
  85. console.log(w)
  86. var mW = c.width =w;
  87. var mH = c.height = w;
  88. var lineWidth = 5;
  89. var r = mW / 2;
  90. var cR = r - 4 * lineWidth; //圆半径
  91. var startAngle = -(1 / 2 * Math.PI); //开始角度
  92. var endAngle = startAngle + 2 * Math.PI; //结束角度
  93. var xAngle = 1 * (Math.PI / 180); //偏移角度量
  94. var fontSize = 35; //字号大小
  95. var tmpAngle = startAngle; //临时角度变量
  96. //渲染函数
  97. var rander = function(ctx,prs){
  98. ctx.clearRect(0, 0, mW, mH);
  99. ctx.beginPath();
  100. ctx.lineWidth = 20;
  101. ctx.strokeStyle = '#fff';
  102. ctx.arc(r, r, cR, Math.PI * 1.5, Math.PI * (1.5 + 2 * prs/ 100 ));
  103. ctx.stroke();
  104. ctx.closePath();
  105. ctx.beginPath();
  106. ctx.lineWidth = 20;
  107. ctx.lineCap = 'round'
  108. ctx.strokeStyle = '#FF14CB';
  109. ctx.arc(r, r, cR, Math.PI * (1.5 + 2 * prs/ 100 ),Math.PI * 1.5);
  110. ctx.stroke();
  111. ctx.closePath();
  112. };
  113. function animate(i){
  114. requestAnimationFrame(function (){
  115. process = process + 1;
  116. rander(ctx, process);
  117. if (process < i) {
  118. animate(i);
  119. }
  120. });
  121. }
  122. animate(50);