小编Ric*_*ard的帖子

请尝试运行以下代码段，然后单击该框。

const box = document.querySelector('.box')
box.addEventListener('click', e => {
  if (!box.style.transform) {
    box.style.transform = 'translateX(100px)'
    new Promise(resolve => {
      setTimeout(() => {
        box.style.transition = 'none'
        box.style.transform = ''
        resolve('Transition complete')
      }, 2000)
    }).then(() => {
      box.style.transition = ''
    })
  }
})

.box {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  background-color: #121212;
  transition: all 2s ease;
}

<div class = "box"></div>

我期望发生的事情：

• 点击发生
• Box 开始水平平移 100px（此操作需要两秒钟）
• 单击时，Promise还会创建一个新的。里面说Promise，一个setTimeout函数设置为2秒
• 操作完成后（两秒钟过去了），setTimeout运行其回调函数并设置transition为无。这样做之后，setTimeout也恢复transform …

虽然该<meta name="viewport">标签未标准化，但“由于事实上的主导地位，它受到大多数移动浏览器的尊重”。

它不是真正的 Web 标准的一个缺点是详细的文档不像其他标准那样可用。该CSS工作组对这个规范，所以这就是我主要用作为权威著作。

我的主要问题是：

以下声明之间的感知差异是什么？

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="viewport" content="initial-scale=1.0">

或者被问到，这两个@viewport CSS at-rules之间有什么区别：

/* Translated from <meta name="viewport" content="width=device-width, initial-scale=1.0"> */
@viewport {
    zoom: 1.0;
    min-width: extend-to-zoom;
    max-width: 100vw;
}

/* Translated from <meta name="viewport" content="initial-scale=1.0"> */
@viewport {
    zoom: 1.0;
    min-width: extend-to-zoom;
    max-width: extend-to-zoom;
}

我是如何得出这些@viewport翻译的：

width=device-width 到 min-width: extend-to-zoom; max-width: 100vw;

在CSS设备适配模块级别1号文件规定：

的width和height视口<META>特性被转换成width和height描述符，设置min-width/ …

我正在尝试模仿其他移动聊天应用程序，当您选择send-message文本框并打开虚拟键盘时，最底部的消息仍在视图中。似乎没有办法用 CSS 惊人地做到这一点，所以 JavaScript resize（唯一的方法是找出键盘何时明显打开和关闭）事件和手动滚动来救援。

有人提供了这个解决方案，我发现了这个解决方案，它们似乎都有效。

除了一种情况。出于某种原因，如果您MOBILE_KEYBOARD_HEIGHT在消息 div 底部的（在我的情况下为 250 像素）像素内，当您关闭移动键盘时，会发生一些奇怪的事情。使用前一种解决方案，它会滚动到底部。使用后一种解决方案，它会MOBILE_KEYBOARD_HEIGHT从底部向上滚动像素。

如果你滚动到这个高度以上，上面提供的两种解决方案都可以完美地工作。只有当你接近底部时，他们才会有这个小问题。

我想也许这只是我的程序导致了一些奇怪的杂散代码，但不，我什至复制了一个小提琴，它有这个确切的问题。我很抱歉让调试变得如此困难，但是如果您在手机上访问https://jsfiddle.net/t596hy8d/6/show（show后缀提供全屏模式），您应该能够看到相同的行为。

这种行为是，如果您向上滚动足够多，则打开和关闭键盘会保持该位置。但是，如果您在底部的像素内关闭键盘MOBILE_KEYBOARD_HEIGHT，您会发现它会滚动到底部。

这是什么原因造成的？

代码复制在这里：

window.onload = function(e){ 
  document.querySelector(".messages").scrollTop = 10000;
  
  bottomScroller(document.querySelector(".messages"));
}
  

function bottomScroller(scroller) {
  let scrollBottom = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight;

  scroller.addEventListener('scroll', () => { 
  scrollBottom = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight;
  });   

  window.addEventListener('resize', () => { 
  scroller.scrollTop = scroller.scrollHeight - scrollBottom - scroller.clientHeight; …

我正在阅读Eloquent JavaScript的Map部分,我无法理解它的最后一段:

如果你确实有一个普通的对象,由于某种原因需要将其视为一个地图,那么知道Object.keys只返回一个对象自己的键而不是原型中的那些键是很有用的.作为in运算符的替代hasOwnProperty方法,您可以使用忽略对象原型的方法.

然后我假设Object.keys不返回对象从其原型的继承中获取的属性和方法.所以我尝试了以下方法:

var anObject = {};
console.log(Object.keys(anObject)); //Array []
console.log("toString" in Object.keys(anObject)); //true
console.log(anObject.hasOwnProperty("toString")); //false

显然,toString是在返回的数组中Object.keys(anObject),但是当我记录其键时返回一个空数组？我错误地理解了这段经文吗？

我正在按照 MDN 提供的指南进行remotely debug. 我已经确定我允许在我的 Android 手机上进行 USB 调试。我电脑的 Firefox72.0.1版本是 ，我手机的版本是68.4.1.

我已经完成了以下说明：

Enable Developer settings on your Android device.
Enable USB debugging in the Android Developer settings.
Enable Remote Debugging via USB in the Advanced Settings in Firefox on the Android device.
Connect the Android device to your computer using a USB cable.

Run Code Online (Sandbox Code Playgroud)

我的设备已被正确检测到。但是，它卡在"Waiting for browser..."我在手机的 Firefox 上打开了一个要调试的新标签页。我该如何解决这个问题？

作为参考，这里是图片"Waiting for browser..."：

编辑

原来我忘记Remote debugging via USB在 Android 设备上启用Firefox。

在Javascript中,我们可以方便地获得||运营商提供的各种选项之一.例如:

console.log('a' || '' || 0); // Yields 'a'
console.log(0 || 'b' || 'a'); // Yields 'b'

上面的结果很容易分配给这样的变量:

let test = 'a' || '' || 0;

但是在PHP中,当我尝试这个时:

$test = 'a' || '' || 0;给了我一个$test = 1与1意义true.在PHP中有没有办法获得导致它产生的表达式的字面值true？

假设我有以下代码：

//myjs.js
let testingVisibility = "hello";

<script type = "module" src = "myjs.js"></script>

当我想testingVisibility通过 Firefox 中的控制台访问变量时，testingVisibility未声明变量。

我试图从这里的网站模仿 CSS 动画：https : //stanographer.com/

我想复制网站的方式：

• 首先显示一个向右滑动的全屏黑色 div

• “加载”文本后面的黑色背景（div 标签）（如“嗨，我是酒井斯坦利”），从左到右扩展

  • 在黑色背景 div 上“加载”文本，从左到右扩展。

现在您可能会问，“为什么不检查页面，查看 div 和文本上的类，然后检查网络选项卡中的 CSS 表？” 我已经试过了。CSS看起来很奇怪。我的朋友说它是由 SASS 预处理的，不管是什么意思。无论如何，我无法破译密码。

我去过Google 上的几个不同的 StackOverflow 页面（这里是一个）和十多个不同的页面。我学会了使用关键帧，但我还没有想出如何在 Stanographer.com 上重新创建效果。拥有该网站的朋友也提供了此示例，但我不知道如何将其应用于单个 div。他说了一些关于使用 z-index 的内容，但我只是没有看到。

我知道要使页面以全黑屏幕开始然后滑出，我必须使用 JavaScript 触发类更改。我有：

let blackStuff = document.getElementById("blackness");

window.addEventListener("load", () => {
    console.log("loaded");
    blackStuff.setAttribute("class", "black-box-out");
  },
  false
);

.black-box {
  position: fixed;
  float: left;
  top: 0;
  width: 100%;
  height: 100%;
  bottom: 0;
  background-color: #000;
  z-index: 999999;
  -webkit-animation: powerslide 0.5s forwards;
  -webkit-animation-delay: 2s;
  animation: powerslide 0.5s forwards; …

我正在嵌套 Promise，我必须知道嵌套的 Promise 是被拒绝的 Promise 还是已完成的 Promise，才能知道是否触发外部 Promise 链的 catch。为了区分嵌套 Promise 是被拒绝还是被履行，我throw在嵌套 Promise 中使用 acatch来表示拒绝；throw当我的嵌套 Promise 中没有时，总是表明履行catch。请看下面的例子：

let test = new Promise((resolve, reject) => {
  resolve(42);
}).then((e) => {
  console.log(e);
  return new Promise((resolve, reject) => { //Error happens inside this nested Promise
    resolve(32);
  }).then((e) => {
    console.log(e);
    //Run other processes that may lead to an error
  }).catch((e) => { //I added this catch block for error detection, whatever error it might be …

如何wrap_content使用约束布局使多个按钮跟随具有最大宽度的按钮的宽度？

我想要的如下图所示：

所有按钮都遵循最后一个按钮的wrap_content宽度，因为它是最长的。

现在所有按钮都遵循第一个按钮的wrap_content宽度。

这个问题在这里被问到，但提供的解决方案非常黑客。我希望按钮保持单一Button（与使用 aTextView和空Button来形成一个Button用于显示的建议解决方案不同）。有没有更好的方法可以在不使用黑客解决方案的情况下执行上述操作？