- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的问题是如何将倒计时天数循环划分为 364 天,我的意思是当剩余天数等于 364 天时,像这样循环:
当剩余天数等于0天时,像这样循环:
(function($) {
jQuery.fn.countdown = function(options, callback) {
var settings = {
'date': null
};
if (options) {
$.extend(settings, options);
}
this_sel = $(this);
/*Canvas JavaScript*/
var canvas = document.getElementById('myCanvas');
var canvas1 = document.getElementById('myCanvas1');
var canvas2 = document.getElementById('myCanvas2');
var canvas3 = document.getElementById('myCanvas3');
var context = canvas.getContext('2d');
var context1 = canvas1.getContext('2d');
var context2 = canvas2.getContext('2d');
var context3 = canvas3.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 100;
var sec_arc_end = 0,
min_arc_end = 0,
hour_arc_end = 0,
day_arc_end = 0;
function count_exec() {
eventDate = Date.parse(settings['date']) / 1000;
currentDate = Math.floor($.now() / 1000);
if (eventDate <= currentDate) {
callback.call(this);
clearInterval(interval);
}
seconds = eventDate - currentDate;
days = Math.floor(seconds / (60 * 60 * 24));
seconds -= days * 60 * 60 * 24;
hours = Math.floor(seconds / (60 * 60));
seconds -= hours * 60 * 60;
minutes = Math.floor(seconds / 60);
seconds -= minutes * 60;
// seconds arc canvas...................
context.clearRect(50, 50, canvas.width, canvas.height);
sec_arc_end = ((60 - seconds) * parseFloat(0.10472));
context.beginPath();
context.arc(centerX, centerY, radius, 1.5 * Math.PI, 1.5 * Math.PI + sec_arc_end, false);
context.lineWidth = 8;
context.strokeStyle = '#14E170';
context.stroke();
// minutes arc canvas...................
context1.clearRect(50, 50, canvas.width, canvas.height);
min_arc_end = ((60 - minutes) * parseFloat(0.10471));
context1.beginPath();
context1.arc(centerX, centerY, radius, 1.5 * Math.PI, 1.5 * Math.PI + min_arc_end, false);
context1.lineWidth = 8;
context1.strokeStyle = '#14E170';
context1.stroke();
// hours arc canvas...................
context2.clearRect(50, 50, canvas.width, canvas.height);
hour_arc_end = ((24 - hours) * parseFloat((0.10471 * 5) / 2));
context2.beginPath();
context2.arc(centerX, centerY, radius, 1.5 * Math.PI, 1.5 * Math.PI + hour_arc_end, false);
context2.lineWidth = 8;
context2.strokeStyle = '#14E170';
context2.stroke();
// days arc canvas...................
// the problem is here
context3.clearRect(50, 50, canvas.width, canvas.height);
day_arc_end = ((- days) * parseFloat((0.10471 * 5) / 2));
context3.beginPath();
context3.arc(centerX, centerY, radius, 1.5 * Math.PI, 1.5 * Math.PI + day_arc_end, false);
context3.lineWidth = 8;
context3.strokeStyle = '#14E170';
context3.stroke();
// add 0 value to left of value
if (!isNaN(eventDate)) {
this_sel.find('.days').text(days);
this_sel.find('.hours').text(hours);
this_sel.find('.mins').text(minutes);
this_sel.find('.secs').text(seconds);
}
}
count_exec();
console.log(days);
interval = setInterval(count_exec, 1000);
};
})(jQuery);
$(document).ready(function () {
$("#countdown").countdown({
date: "18 january 2017 12:34:00"
},
function () {
$("#countdown").text("merry christmas");
}
);
$(".countdown-container").height($(".countdown-container").width());
$(window).resize(function () {
$(".countdown-container").height($(".countdown-container").width());
});
})
#countdown {
width: 100%;
height: 150px;
background-color: grey;
padding: 5px;
}
.countdown-container {
width: 24%;
height: 97%;
text-align: center;
}
#countdown .countdown-container {
text-align: center;
float: left;
position: relative;
margin: 0.30% 0.5% 0.30% 0.5%;
}
#countdown .countdown-container .contents {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
font-size-adjust: 0.58;
}
.contents div {
font-size: 28px;
}
.contents span {
font-size: 16px;
}
canvas {
width: 100%;
height: 100%;
border:1px solid #ff6a00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="countdown">
<div class="countdown-container">
<div class="contents">
<div class="secs">
00
</div>
<span>Seconds</span>
</div>
<canvas id="myCanvas" width="250" height="250"></canvas>
</div>
<div class="countdown-container">
<div class="contents">
<div class="mins">
00
</div>
<span>Minutes</span>
</div>
<canvas id="myCanvas1" width="250" height="250"></canvas>
</div>
<div class="countdown-container">
<div class="contents">
<div class="hours">
00
</div>
<span>Hours</span>
</div>
<canvas id="myCanvas2" width="250" height="250"></canvas>
</div>
<div class="countdown-container">
<div class="contents">
<div class="days">
00
</div>
<span>Days</span>
</div>
<canvas id="myCanvas3" width="250" height="250"></canvas>
</div>
</div>
问题在这里:
day_arc_end = ((-days) * parseFloat((0.10471 * 5) / 2)); // the problem is here
最佳答案
它应该类似于:
// (((365-days)/365)*2 - 0.5)*Math.PI
context3.arc(centerX, centerY, radius, -0.5*Math.PI, (((365-days)/365)*2 - 0.5)*Math.PI, false);
基本上 html canvas arc() 从笛卡尔单位 (1, 0) 开始绘制,如果您像时钟一样看圆,则从 3:00 开始绘制。整圈是 1.5*Math.PI。
所以 12:00 是 -0.5*Math.PI,03:00 是 0*Math.PI 等等
所以以更详细的方式:
var percentageOfYear = (365-days)/365;
var fullCircleRads = 2*Math.PI;
var ending_arc = percentageOfYear*fullCircleRads - 0.5*Math.PI;
关于javascript - 将 Canvas 弧划分为 364 天,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41531983/
我在理解指针时遇到一些问题 我有矩阵,然后我使用它将其分成小块 tiles_num = n /tile; // Allocate blocked matrix Ah = (REAL **) mall
我有一个制表符分隔的文件,看起来像这样: foo 0 4 boo 3 2 blah 4 0 flah 1 1 我正在尝试计算每行两列之间的 log2。我的问题是除以零 我试过的是这样的: cat fi
在返回最终结果之前,我使用 BigDecimal 进行了几次计算。我的计算包含两个部分。我知道我应该在调用 divide() 时定义缩放和舍入模式。但是,由于我使用的是货币,所以我想尽可能长时间地保持
我正在尝试将两个数字 50 和 5 相除。这是我的代码: function Divide(Num1, Num2: Integer): Integer; asm MOV EAX, Num1
我对 R 和映射非常陌生,我想创建某些数据的映射。我有一组名为“D.Montreal”的数据,它显示了 2010 年访问蒙特利尔的加拿大人口普查部门的访客。我想使用这些数据创建一张 map ,以显示有
我需要制作一个条形图,将数据分为多个 bin。 我的数据如下所示: 1.0 5 1.2 4 2.4 1 4.3 6 5.2 10 然后在X轴上我想有时间的值,比如:[1-4)、[4-5)等(取决于cs
我正在尝试使用一个后台 worker ,它为字典中的每个键将内容保存到文件中。 ACon 是一个个人类,它在其中调用字典内容的保存函数。 private void bwSaver_DoWork(
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 要求提供代码的问题必须表现出对所解决问题的最低限度理解。包括尝试过的解决方案、为什么它们不起作用,以及预
我想将一些矩阵加载到我的程序中,然后我想将它分成更小的 block 。我想要的确切内容可以在下面的图片中看到: http://postimg.org/image/aki19hjx9/ba463111/
我有一个 anchor ,我将其注入(inject)到 jqGrid 格式化程序中的 HTML 中,如下所示: var number = rowObject.number; var plateNumb
我在传单标记上使用弹出窗口,并使用背景作为固定大小的图像。每当标记放置在 map 的一 Angular ,然后我单击标记以显示弹出窗口时,它会稍微移动整个 map 几分之一秒,然后弹出消息会超出 ma
我有一些代码,例如: good = [x for x in mylist if x in goodvals] bad = [x for x in mylist if x not in goodvals
我想将我的窗口 (wpf) 分成三列:左列必须是 DockPanel(我认为 StackPanel 在 Canvas), 右栏应该是另一个 DockPanel 包含一个 listbox 并且在中间我需
我有按国家/地区划分城市列表的代码: query('SELECT `city`, `country` FROM `cities` ORDER BY `id` ASC'); $cities->execu
我已经划分了我的Bootstrap网格列如下。 A B1 B1.1
我正在开发一个 asp.net 项目,但我还没有很长的 web.config 文件(超过 400 行)。但是有了这个 nhibernate log4net 和 urlrewrites。它越来越大。有没
我正在尝试使用 NSArrayController 和 cocoa 绑定(bind)创建分段的 NSTableView。我正在寻找类似的方法,例如 iOS 中的 NSFetchedResultsCon
早上好,下午好,还是晚上好, 在查看关闭“抑制 JIT 优化 (...)”选项的调试构建的汇编代码后,我注意到以下奇怪的行为(bitCount 是 ulong): int BitQ
我正在尝试根据 Firebase 数据库中的键对 Tableview 数据进行分段。 我能够根据键 (itemPreset) 正确划分所有内容。 我在将可重用单元分配到其部分时遇到问题。 单元格不断重
我最近升级到 Lodash 3.10.1我注意到了一些奇怪的事情。 假设我有一个数字数组,我想得到数组中的最大值然后减半: var series = [ 6, 8, 2 ]; var highestT
我是一名优秀的程序员,十分优秀!