我正在制作轮盘赌游戏,但我遇到了一个问题,即我的"动画"(或你所说的)只能玩一次.我没有这么多javascript的经验,也不知道如何解决我的问题.
var img = document.querySelector('#ball');
ball.addEventListener('click', onClick, false);
function onClick() {
this.removeAttribute('style');
var deg = 1080;
var css = '-webkit-transform: rotate(' + deg + 'deg);';
this.setAttribute(
'style', css
);
}Run Code Online (Sandbox Code Playgroud)
.roulette {
padding-top: 5em;
padding-left: 5em;
}
.roulette img {
position: absolute;
height: 50em;
}
.ball {
z-index: 1;
}
.border {
z-index: 1;
}
#ball {
-webkit-transition: -webkit-transform 4s ease-out;
z-index: 1;
}Run Code Online (Sandbox Code Playgroud)
<h1>Press the ball</h1>
<div class="roulette">
<img class="border" src="http://www.mediafire.com/convkey/0a20/z78myz6x2nk17n76g.jpg">
<img id="ball" src="http://www.mediafire.com/convkey/8eec/69mn483g0moovs66g.jpg">
<img class="wheel" id="spin2" src="http://www.mediafire.com/convkey/937f/f4f65gia76l409u6g.jpg">
</div>Run Code Online (Sandbox Code Playgroud)
我非常接近我想要的东西,但是我认为 32vh 破坏了我的体型。
当我使用img {height: 100%;}它们时,它们变得太大了,所以我定下了 32vh;但是,左右 div 相差几个像素。如果放大一点(按 ctrl+'+'),它会特别明显。它发生在 Firefox 和 chrome 上。我尝试在图像上使用 50% 和 100% 高度,并在 testB 上放置相对位置,但似乎没有帮助。如何使两个大小相等的高度?我不介意右侧的两个 div 之间是否有额外的像素,但它们必须与左侧的高度相同,即 div a
body * {
box-sizing: border-box;
color: white;
}
.test {
margin: 0 auto;
position: relative;
height: 65vh;
width: 80vw;
display: flex;
text-align: center;
}
.testA {
background-color: black;
width: 61.5%;
display: inline-block;
padding-right: 18px;
line-height: 65vh;
}
.testB {
background-color: green;
flex-grow: 1;
line-height: 32vh;
position: relative;
}
.testC {
background-color: royalblue; …Run Code Online (Sandbox Code Playgroud)我有一个日期列表,我希望每年检索每个第一个现有项目.问题是它并不总是包含1月1日的项目.下面的代码可以获取所有内容,但是如果缺少一天,则不会显示整年.
foreach (var index in pModel.IndexData)
{
if (index.Date.ConvertToDateTime().Day == 02 && index.Date.ConvertToDateTime().Month == 01)
{
yearlyIndex.Add(index);
}
}
Run Code Online (Sandbox Code Playgroud)
日期的外观示例.
我怎么能这样做我总是得到正确的项目?在这个例子中,我总是想得到row1和row3.我可以使用一堆if语句创建一个循环并添加几个月和几年但我想用linq或lambda处理这个问题.