小编Alv*_*oro的帖子

我一直在玩HTML和CSS来创建一个简单的2人桌面游戏而不使用任何JavaScript.我使用标签,单选按钮和复选框来创建不同的状态并模仿某些逻辑,以便该部件可以在电路板上移动.

它工作"很好",虽然可用性不是很好.例如,在点击骰子后,磁贴移动,我显示一个按钮以切换到下一个玩家(再次使用标签和复选框控制)...这不是很好,如果它改变了玩家会更好"自动".

问题是<label>只能针对一个元素,我不知道如何只需点击一下就能触发两个"动作"(或副作用).

以下代码是一个MCVE以更好地可视化的问题:有两个玩家(轮流指定的)中,用三个片(由6单选按钮:1个代表的每播放机和瓦)的基板,和两个按钮来改变播放机转(只一个可见).如果您点击转弯按钮,转牌将转到下一位玩家.(这里可以找到更复杂的例子)

问题是用户被迫按下按钮来改变转弯,否则同一个玩家将始终处于活动状态.有没有办法让点击标签时,不仅要激活图块,还要更改转弯？或者在没有的情况下,是否有其他方法可以实现这一目标？(不使用JS)

#p1:checked ~ [for=p1],
#p1:checked ~ [for^=tile-p2],
#p1:checked ~ [name^=tile-p2],
#p2:checked ~ [for=p2],
#p2:checked ~ [for^=tile-p1],
#p2:checked ~ [name^=tile-p1]
{ 
  display: none; 
}

/* more rules to hide/show more elements */

<h1>Players:</h1>
<input type="radio" id="p1" name="player" checked /> P1
<input type="radio" id="p2" name="player" /> P2

<h1>Board: </h1>
Player 1:
<input type="radio" id="tile-p1-1" name="tile-p1" checked />
<label for="tile-p1-1">P1 to 1</label>
<input type="radio" id="tile-p1-2" name="tile-p1" />
<label for="tile-p1-2">P1 to 2</label>
<input type="radio" …

简短说明(tl; dr;)

是否有使用nth-childCSS属性内部值的"纯CSS"方式(而不是Less/Sass)？像这样的东西:

span.anim:nth-child(N) { animation-delay: N * 0.5s; }

如果有,我该怎么办？如果没有,我怎么能以干净的方式模仿它？(我确定我在这里过于复杂了)

详细描述

我正在创建一个简单的动画,其中字母在旋转时淡入.为此,我使用了javascript(与jQuery)和CSS的组合,但这产生了一些问题(见下文); 所以我试图转向仅限CSS的解决方案,并以大量规则结束.

这个(简化的)CSS对于两种解决方案都是通用的:

span.anim {
    font-size:30px;
    opacity:0;
    animation: anim 1s;
    animation-fill-mode: forwards;
}

@keyframes anim {
    from {
        transform: rotate(0deg);
        opacity:0;
    }
    to {
        transform: rotate(360deg);
        opacity:1;
    }
}

使用JavaScript + CSS

我的JavaScript代码如下所示:

var aux = $("#animate").text();
$("#animate").text("");

for (var x = 0; x < aux.length; x++) {
    setTimeout('$("#animate").append("<span class=\'anim\'>' + aux[x] + '</span>")', 500 * x);
}

这很有效......除非用户移动到另一个选项卡,否则动画会混乱,结果是意外的.你可以在这个JSFiddle上看到它:http://jsfiddle.net/e7b9ygk4/(运行脚本,移动到另一个选项卡,几秒钟后返回).

仅使用CSS

我可以通过破坏较小元素中的元素来实现相同的效果(这是我觉得我过于复杂的部分),然后将动画应用于具有不同延迟的每个元素:

span.anim:nth-child(1) …

在我开发的过去的移动应用程序中,我发现click事件在所有设备中都没有按预期工作(例如:在用户必须在屏幕上快速点击/点击的游戏中,而不是触发click事件,双击被触发了),并且使用touchstart了我想要的更好的结果.

从那以后,我开始听取这个touchstart事件而不是click; 但是在Chrome上测试,我在JS控制台中收到以下警告消息:

不推荐使用需要在touchstart事件上进行明确用户交互的操作,并将于2016年10月左右在M54中删除.有关详细信息,请参阅https://www.chromestatus.com/features/5649871251963904.

我访问了链接页面(以及其中的链接),似乎这种新行为是为了避免某些不需要的操作,特别是避免第三方iframes或广告(我的应用没有)打开弹出窗口.我尝试将事件更改为touchend(作为链接之一" touchend事件将继续像以前一样 "),但得到了类似的警告消息.

我的问题是:

• 这是仅影响Chrome的内容,还是会影响Android和iOS的我的网络应用(使用Cordova/Phonegap)？
• 我应该用什么事件来取代touchstart和避免我过去遇到的问题？我可以回去click,但快速点击/点击仍然是一个问题.

我有以下代码可以生成 PNG 图像的轮廓：

#silhouette img {
  -webkit-filter: grayscale(100%) brightness(0);
  filter: grayscale(100%) brightness(0);
  opacity: 0.6;
}

<div id="original">
  <img src="https://i.stack.imgur.com/JJ6Vs.png" height="150px" width="auto" />
</div>
<div id="silhouette">
  <img src="https://i.stack.imgur.com/JJ6Vs.png" height="150px" width="auto" />
</div>

我在 StackOverflow ( 1 , 2 , 3 )中发现了一些问题，但所有这些问题都集中在获得黑色/灰色的阴影/轮廓，而不是获得它的彩色版本（例如，我希望轮廓是红色或蓝色）。

我尝试使用这些解决方案和hue-rotate过滤器（应用于img或div），但没有得到任何好的结果。我猜这是因为一旦亮度设置为 0/100，轮廓就是黑/白，并且色调变化并不重要。

是否可以只使用 CSS 来做我想做的事情？怎么可能呢？

注意：我不想对图像进行着色，而是要对其进行完全着色，使用 CSS 而不覆盖的着色图像中的解决方案很好，但它们在我的情况下不起作用，因为它们所做的是对图像进行着色，因此它的色调不同一种颜色（正如您在我为每个解决方案创建的 JSFiddles 中看到的那样：1、2、3、4），而我想要的是拥有一个纯色轮廓，例如如下所示：

使用网络技术，我仅使用HTML和CSS（不使用JavaScript）开发了一个骰子。这是一个简单的系统：一系列单选按钮和标签，它们通过更改其位置（带有z-index）来模拟骰子，因此每次单击骰子时，都会有一个“随机”数字。

这是代码的最低版本：

@keyframes changeOrder {
  from { z-index: 6;}
  to { z-index: 1; }
}

@-webkit-keyframes changeOrder {
  from { z-index: 6; }
  to { z-index: 1; }
}

label {
  display: block;
  position: absolute;
  display: block;
  width: 50px;
  height: 50px;
  line-height:50px;
  background: #eeeeee;
  text-align: center;
  animation: changeOrder 1.2s infinite;
}

label:nth-of-type(1) { animation-delay: 0s; }
label:nth-of-type(2) { animation-delay: -0.2s; }
label:nth-of-type(3) { animation-delay: -0.4s; }
label:nth-of-type(4) { animation-delay: -0.6s; }
label:nth-of-type(5) { animation-delay: -0.8s; }
label:nth-of-type(6) { …

我正在使用CSS和SASS运行测试并且有一系列重复和嵌套多次的选择器,我想简化我的代码但不知道如何做(它应该是可能的,但我可以弄明白了.

主要的想法是我有很多单选按钮(84,42组,2个同名),并希望根据检查的单选按钮的数量是奇数还是偶数,为元素添加样式.

为此,我现在正在&SASS中使用生成当前选择器,并将其与兄弟选择器嵌套~(顺序并不重要,只是检查无线电的数量).这是SASS代码的简化版本(只有10组):

.rd:checked {
  & ~ &,
  & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ …

我正在尝试更新数据库中的记录而不刷新表单.我有grid.php页面与表单来显示和更新记录.然后,我有一个文件update.php与UPDATE查询.第三个文件是js1.jsAJAX代码.如果我映射grid.php到update.php通过action=update.php,更新询问的伟大工程.但是一旦我尝试包含js1.js文件以防止表单刷新,它就会停止工作.

代码如下:

grid.php

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="j1.js"></script>
<?php //query.php
    require_once 'header.php';
    if (!$loggedin) die();

    $query = "SELECT SpringMgmt.SpringMgmtID, 
                     SpringMgmt.SpringMgmtActiveYear, 
                     SpringMgmt.PoolID, 
                     SpringMgmt.Notes, 
                     SpringMgmt.SOIEstSubmitted,
                     SpringMgmt.EstAdditional, 
                     SpringMgmt.SOIMeetingScheduled, 
                     Pool.Pool, 
                     Pool.AreaManager, 
                     Employees.EmployeeID, 
                     Employees.FirstName
              FROM SpringMgmt
                   INNER JOIN Pool ON SpringMgmt.PoolID = Pool.PoolID
                   INNER JOIN Employees ON Employees.EmployeeID = Pool.AreaManager ";
    $result = mysql_query($query);
    echo "OK</div>";
    if (!$result) die ("Database access failed0: " . mysql_error());

    //TABLE AND ITS HEADING
    echo …

问题陈述:

我有一个.NET用户控件,我在里面使用了iFrame.我在页面上有多个实例(可以是任意数字)的控件(其中包含iFrame).每次控制状态改变时,我必须加载所有控件.该控件有一些必填字段.

我有一个导航到另一个屏幕的按钮,因为每次加载所有控件时,所有控件都需要相当长的时间才能加载.用户正在尝试完成所有必填字段并单击下一个按钮,即使用户已完成所有必填字段,并且控件(使用iframe)未完全加载,也会在此实例中生成验证错误.

注意:以上所有内容都是JavaScript,而不是服务器端.

我尝试了什么:

1. 我尝试显示一个模态div,直到它加载,但我显然无法捕获确切的加载时间,可能会点击下一个按钮.

2. 我尝试在验证功能上超时,但由于加载不是确定的,它偶尔会工作.

3. 我尝试使用计数器来查看加载了多少控件以检查总控件,然后只允许验证功能触发,再次加载它的确定方式,没有帮助.

我知道这可以通过不同的方式完成,但由于所付出的巨大努力和时间,我们必须采用现有方式,并且必须解决问题.有人可以建议任何指针/解决此问题.

我们最近从 Kotlin 1.1.51 升级到 1.2.10，清除了所有警告（我们使用 -Werror 将警告视为错误），并且项目已启动并运行。我们从命令行使用构建它mvn verify没有问题，以及使用 IntelliJ 构建它Build > Build project。

然后，我们决定升级到最新版本（1.2.21），在这里我们看到了一些问题：从命令行（mvn verify）编译项目时出现警告，导致编译失败：

[警告] 类路径条目指向不存在的位置：/Users/username/git/projectname/target/classes

有趣的是，如果我们Build > Build Project在 IntelliJ 上执行此操作，则不会出现任何警告，并且该项目将毫无问题地编译（和运行）。如果我们在 pom 文件上将 Kotlin 的版本降级到 1.2.10（而不是 1.2.21），它会再次从命令行和 IntelliJ Build 成功构建。

我们注意到，当我们执行“Build”>“Build Project”时，会在目标文件夹中创建两个目录：classes 和 test-class；而当命令行构建失败时，有两个不同的目录：kotlin-ic和maven-status。

我看到了似乎相关的问题（1、2或3），但它们的错误/警告似乎特定于某些库，而在这种情况下，它看起来像是更通用的东西（它不是我可以按照建议添加为依赖项的特定库关于答案）。

为什么命令行和 IntelliJ 构建之间存在这种差异？是什么原因导致该警告，我们如何解决它？

我有一个问题,一直在返回null的MySQL语句,虽然我能够弄清楚,但是原因让我有些困惑.

这是有问题的查询的简化版本:

SELECT id FROM users WHERE id = id = 2;

发生错误是因为id =重复,删除其中一个id =解决了问题(因为有一个用户的id为2).但令我有点困惑的是它如何"无声地失败",返回0行,而不是给出错误.

我在SQL Server上测试了类似的查询,并得到了错误消息Incorrect syntax near '='(类似于我对MySQL的预期).

最初,我认为MySQL 在前两个字段之间进行了比较,最后一个是比较的结果(0表示false,1表示true).像这样的东西:

SELECT id FROM users WHERE (id = id) = 2;

但后来我提出了一些与之相矛盾的问题.让我详细说明一下.

想象一下这个表(称为"用户"):

id  | username
----|----------------
0   | anonymous
1   | root
2   | john
3   | doe

如果我这样做SELECT * FROM users WHERE id = id = 1,我将获得所有4个用户.而且SELECT * FROM users WHERE id = id = …

我已经使用 Cordova/Phonegap 和 Web 技术开发了一个应用程序，并想对其进行一些个性化设置，但我找不到方法。

在 android 中，当用户按下概览按钮（方形按钮）时，他们可以看到每个打开的应用程序的带有卡片的概述，这些卡片有一个带有图标和应用程序名称的顶部栏。如此屏幕截图所示：

默认情况下，条形颜色为灰色，但我希望它是一种不同的颜色，以更好地匹配我的应用程序中的颜色。这可以在其他应用程序中看到，该栏具有不同的颜色（例如：Chrome 栏为蓝色，电子邮件栏为橙色等）：

我尝试使用theme-color元值，但这没有做任何事情。我还尝试了状态栏插件，这个插件在应用程序打开时更改了状态栏，但在概览卡模式下仍然显示默认的灰色栏。

是否可以使用 Cordova/Phonegap 自定义此概览栏颜色？怎么做？

我有一些代码看起来或多或少是这样的（例如减少了）：

html {
  background: #eee;
}

section {
  border-radius: 4px;
  border: 1px solid #ccc;
  background: #fff;
  margin: 1em;
  padding: 1em;
}

[tabindex]:focus {
  outline: 1px dashed blue;
}

<section tabindex="0">
  <h1>
    Section 1
  </h1>
  <p>
    This section will be highlighted but it won't go inside as 
    nothing inside has tabindex. I don't want it to be read at all.
  </p>
</section>

<section tabindex="0">
  <h1>
    Section 2
  </h1>
  <p>
    This section will be highlighted and there is an element inside with …

我需要帮助找出为什么div标签不包含它应该的形式.

<div class="modal-body">
                <form class="register" name="register">
                    <div class="form-group col-md-6">
                        <input type="text" placeholder="First Name" class="form-control" id="firstName">
                    </div>
                    <div class="form-group col-md-6">
                        <input type="text" placeholder="Last Name" class="form-control" id="lastName">
                    </div>
                    <div class="form-group col-md-6">
                        <input type="text" placeholder="Email Address" class="form-control" id="emailAddress">
                    </div>
                    <div class="form-group col-md-6">
                        <input type="text" placeholder="Birth Day mm/dd/yyyy" class="form-control" id="birthday">
                    </div>
                </form>                                         
            </div>

这是特定div的代码.如果您对此有任何想法,那将非常有帮助.

您可以在此链接上查看索引页面的源代码,以及此JSFiddle上的工作演示.要查看有问题的行为,请将结果框的大小调整为中等显示.

除了我创建自己的css之外,所有的js和css都是默认的bootstrap.