- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我有一个简单的示例代码,它工作正常,但计时器在顺时针方向增加。我想逆时针方向做同样的事情,计时器应该减少。例如 10, 9, 8 .......0 秒
当前代码是 1 2 3 ....10 秒,圆圈也是按顺时针方向填充的。
/*
to modify total time, just input on variable totaltime
*/
var totaltime = 60;
function update(percent) {
var deg;
if (percent < (totaltime / 2)) {
deg = 90 + (360 * percent / totaltime);
$('.pie').css('background-image',
'linear-gradient(' + deg + 'deg, transparent 50%, white 50%),linear-gradient(90deg, white 50%, transparent 50%)'
);
} else if (percent >= (totaltime / 2)) {
deg = -90 + (360 * percent / totaltime);
$('.pie').css('background-image',
'linear-gradient(' + deg + 'deg, transparent 50%, #1fbba6 50%),linear-gradient(90deg, white 50%, transparent 50%)'
);
}
}
var count = parseInt($('#time').text());
myCounter = setInterval(function() {
count += 1;
$('#time').html(count);
update(count);
if (count == totaltime) clearInterval(myCounter);
}, 1000);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
body {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
background: #b4f2ea;
}
.pie {
width: 250px;
height: 250px;
display: block;
position: relative;
border-radius: 50%;
background-color: #1fbba6;
border: 2px solid #1fbba6;
float: left;
margin: 2em;
}
.pie .block {
position: absolute;
background: #fff;
width: 230px;
height: 230px;
display: block;
border-radius: 50%;
top: 10px;
left: 10px;
}
#time {
font-size: 3em;
position: absolute;
top: 35%;
left: 43%;
color: #999999;
}
.degree {
/*90 + ( 360 * .1 )*/
background-image: linear-gradient(90deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pie degree">
<span class="block"></span>
<span id="time">0</span>
</div>
最佳答案
你只需要做3个改变
<span id="time">10</span>
在您的 JavaScript 中,您需要更新这 3 个部分:
// update this
var totaltime = 10;
...
//Don't forget to decrement your counter
count -= 1;
...
// set the condition to === 0 (and not totalTime)
if (count === 0) clearInterval(myCounter);
完整示例:
/*
to modify total time, just input on variable totaltime
*/
var totaltime = 10;
function update(percent) {
var deg;
if (percent < (totaltime / 2)) {
deg = 90 + (360 * percent / totaltime);
$('.pie').css('background-image',
'linear-gradient(' + deg + 'deg, transparent 50%, white 50%),linear-gradient(90deg, white 50%, transparent 50%)'
);
} else if (percent >= (totaltime / 2)) {
deg = -90 + (360 * percent / totaltime);
$('.pie').css('background-image',
'linear-gradient(' + deg + 'deg, transparent 50%, #1fbba6 50%),linear-gradient(90deg, white 50%, transparent 50%)'
);
}
}
var count = parseInt($('#time').text());
myCounter = setInterval(function() {
count -= 1;
$('#time').html(count);
update(count);
console.log(count);
if (count === 0) {
clearInterval(myCounter);
alert("Reached 0 SEC");
}
}, 1000);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
body {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
background: #b4f2ea;
}
.pie {
width: 250px;
height: 250px;
display: block;
position: relative;
border-radius: 50%;
background-color: #1fbba6;
border: 2px solid #1fbba6;
float: left;
margin: 2em;
}
.pie .block {
position: absolute;
background: #fff;
width: 230px;
height: 230px;
display: block;
border-radius: 50%;
top: 10px;
left: 10px;
}
#time {
font-size: 3em;
position: absolute;
top: 35%;
left: 43%;
color: #999999;
}
.degree {
/*90 + ( 360 * .1 )*/
background-image: linear-gradient(90deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pie degree">
<span class="block"></span>
<span id="time">10</span>
</div>
关于javascript - 如何明智地旋转这个反关闭并以相反的顺序开始倒计时,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56140588/
这个问题不太可能帮助任何 future 的访问者;它只与一个小的地理区域、一个特定的时间点或一个非常狭窄的情况有关,这些情况并不普遍适用于互联网的全局受众。为了帮助使这个问题更广泛地适用,visit
我想从输入对象内部开始找到下一个表单元素。Find() 是查找子对象的绝佳函数。但是在父级中寻找相反的方法呢?
是否可以执行$(this)的相反操作? 因此,它不是获取 this 元素,而是获取与 .sb-popular-thumb a 匹配但不包括 $(this) 的所有内容? 请参阅下面的示例代码。我已用
这是一个关于术语的问题。 考虑到有一个方法使用词法this: var foo = { method: function () { console.log(this, ' is the co
我想问你是否存在一个与 WHERE IN 相反的命令,我想选择数组中具有不同参数的所有行。 1 && id <> 2 && id <> 3"; // how can i do the same q
是否有语法来获取不在给定切片内的列表元素?给定切片 [1:4] 很容易得到这些元素: >>> l = [1,2,3,4,5] >>> l[1:4] [2, 3, 4] 如果我想要列表的其余部分,我可以
这个问题在这里已经有了答案: How can I remove a specific item from an array? (138 个回答) 关闭8年前。 JavaScript push(); 方
在此先感谢您的帮助。这是一个很棒的社区,我在这里找到了许多编程答案。 我有一个包含多个列的表,其中5个包含日期或null。 我想编写一个本质上将5列合并为1列的sql查询,条件是如果5列中的1包含“N
我使用 hasClass() 在 if 语句中验证元素是否具有给定的类。 如果元素没有给定的类,如何检查 if 语句?预先感谢您的回复。 最佳答案 为什么不简单地: if (!el.hasClass(
我有一个 std::vector v我想防止进一步写入它。 C++ 编译器不接受这个 const std::vector& w = v; 但它接受这个 const std::vector& w = r
这个问题已经有答案了: How to reshape data from long to wide format (14 个回答) 已关闭 7 年前。 我有像这样的巨大数据框: SN = c(1:10
如何将可调用(匿名函数)转换为字符串进行评估? 我正在尝试在 phpunit 中编写使用 runkit 的单元测试覆盖方法。特别是,runkit_method_redefine() 需要一个字符串参数
我想实现一个堆栈(队列),许多用户可以以 FILO 方式将其推送(),并且许多用户可以从中弹出()。 是否有与 pop() 等效的方法来检索/删除列表的最后一项? 例如: var popRef = f
我想知道“无状态协议(protocol)”的反面是什么。例如,鉴于 HTTP 是无状态的,那么像 FTP 这样的协议(protocol)是相反的/维护状态的协议(protocol),我的假设是否正确?
我对array_filter很熟悉,想往功能上想,但我想知道有没有办法保留被丢弃的值?例如,如果我有一个像这样的数组: 2; }); 结果将是:array( 3, 4 )。 有没有办法保留丢弃的值
我已将色轮的图像加载到 Canvas 上,并且在数组中有一个色相值列表。我遍历 Canvas 上的每个像素,并删除匹配相同色相值的像素。 该代码是: var element = document.ge
这个问题在这里已经有了答案: Repeat each row of data.frame the number of times specified in a column (10 个答案) 关闭
如何将可调用(匿名函数)转换为字符串以进行评估? 我正在尝试在使用 runkit 的 phpunit 中编写单元测试覆盖方法。特别是,runkit_method_redefine() 需要一个字符串参
我对array_filter很熟悉,想往功能上想,但我想知道有没有办法保留被丢弃的值?例如,如果我有一个像这样的数组: 2; }); 结果将是:array( 3, 4 )。 有没有办法保留丢弃的值
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它,visit the help center 。 已关
我是一名优秀的程序员,十分优秀!