小编rea*_*uar的帖子

我一直致力于提高我的网站页面速度。我计划使用 AVIF 格式的图像。此图像格式仅在最新的 Chrome 浏览器版本中受支持。为了提供后备图像，我使用了这个 CSS：

.banner-bg {
  background-image: url('https://cdn.xyz.com/content/images/desktop_banner_bg.jpg'), linear-gradient(90deg, rgb(246, 250, 255) 0%, rgb(244, 249, 255) 33%, rgb(213, 227, 255) 70%, rgb(211, 225, 255) 100%);
}

.banner-bg{
  background: url('https://cdn.xyz.com/content/images/desktop_banner_bg-updated.avif'), linear-gradient(90deg, rgb(246, 250, 255) 0%, rgb(244, 249, 255) 33%, rgb(213, 227, 255) 70%, rgb(211, 225, 255) 100%);
}

这在 Chrome 中工作正常，其中仅加载 AVIF bg 图像并忽略 jpg 格式。在旧版本的 Chrome 中，忽略 AVIF 格式，加载 jpg 格式。

页面中只加载了一张图片。而在 Firefox 和其他浏览器中，忽略 AVIF 格式并且不加载 jpg。我尝试使用下面的代码，它有效，但两种格式的图像都加载到页面中，这增加了我的页面大小。

.banner-bg {
  background-image: url('https://cdn.xyz.com/content/images/desktop_banner_bg.jpg'), url('https://cdn.xyz.com/content/images/desktop_banner_bg-updated.avif'), linear-gradient(90deg, rgb(246, 250, 255) 0%, rgb(244, …

我有一个场景，我在下面定义了修改器，当我编辑单元格时，它在使用通用修改器的地方不起作用？我想这是一个错误还是有其他方法可以做到这一点？

 var diffMutator_FEcontacted = function (value, data, type, params, component) {
    var start = moment(data.incident_start, 'DD/MM/YYYY HH:mm')                   
    var end = moment(data.First_expert_contacted_by_SE, 'DD/MM/YYYY HH:mm')       //common feild
    var new_value = end.diff(start, 'minutes');
    if (type == "edit") {
      console.log('edit');
      component.getRow().getCell("time_to_contact_first_exp_calc").setValue(new_value);
      return value;
    } else {
      return new_value
    }
  }

  var diffMutator_REcontacted = function (value, data, type, params, component) {
    var start = moment(data.incident_start, 'DD/MM/YYYY HH:mm')
    var end = moment(data.Right_expert_found_at, 'DD/MM/YYYY HH:mm') //common feild
    var new_value = end.diff(start, 'minutes');
    if (type == "edit") { …

data = [{
 id: "txv3vvBr8KYB",
 name: "room 1"
},{
 id: "txv3vvBr8KJB",
 name: "room 2"
},{
 id: "txv3vvBr8K",
 name: "room 4"
},{
 id: "txv3vvBr8LKP",
 name: "room 3"
},{
 id: "txv3vvBr8LDS",
 name: "room 5"
}]

roomList = [
 {
      room: {
        code: "r001",
        id: "txv3vvBr8KYB",
        name: "room 1",
        status: "FULL"
      }
    },
 {
      room: {
        code: "r002",
        id: "txv3vvBr8KJB",
        name: "room 2",
        status: "FULL"
      }
    },
 {
      room: {
        code: "r003",
        id: "txv3vvBr8LKP",
        name: "room 3",
        status: "FULL"
      }
    }
]

我在这里尝试做的是过滤 …

为什么我无法将自定义元素附加到另一个自定义元素？好吧，我可以，但结果是子元素现在被隐藏了。我不明白，因为我没有将它附加到父级的影子 DOM 或其他东西中。

https://jsfiddle.net/qehoLf8k/1/

超文本标记语言

<template id="text">
  <style>
    .text {
      color:red;
    }
  </style>
  <div class="text">Hello</div>
</template>

<template id="page">
  <style>
    :host {
      border:5px solid green;
      display: block;
      margin:20px;
      height:100px;
      width:100px;
    }
  </style>
  This is a page
</template>

<div id="my-body"></div>

JS

class Text extends HTMLElement {
    constructor(){
    super();
    this.attachShadow({mode: 'open'});
    const template = document.getElementById('text');
    const node = document.importNode(template.content, true);
    this.shadowRoot.appendChild(node);
  }
}
customElements.define('my-text', Text);

class Page extends HTMLElement {
    constructor(){
    super();
    this.attachShadow({mode: 'open'});
    const template = document.getElementById('page');
    const node = document.importNode(template.content, true); …

以下是项目目标的快速背景：我正在尝试构建一个简单的数学游戏，当您单击按钮时，该游戏会提供随机的数学问题。稍后，我会想办法检查答案是否正确。我通过创建一个输入表单开始了这个过程。

我正在尝试使用 HTML 中的按钮在 javascript 数组中调用随机函数。该按钮调用一个随机函数，该函数在我刷新页面时决定。一旦我刷新页面，a 函数就会被随机选择，按钮继续一遍又一遍地给出该函数的结果。如果我刷新页面，该按钮只会调用不同的函数。

我希望每次单击按钮时都让按钮在我的数组中调用一个随机函数。有谁知道我怎么能做到这一点？

这是我的代码：

const btn = document.querySelector('#START')

const randomFunc = [
  multiplication,
  division,
  addition,
  subtraction,
]

btn.addEventListener(
  'click', randomFunc[Math.floor(Math.random() * randomFunc.length)]
)

function multiplication(params) {
  let num1 = Math.floor(Math.random() * 13);
  let num2 = Math.floor(Math.random() * 13);
  let problemResult = num1 * num2;
  console.log(num1, '*', num2, '=', problemResult);
  document.getElementById('mathProblem').innerHTML = (`${num1} * ${num2} =`);
}

function division(params) {
  let num1 = Math.floor(Math.random() * 13);
  let num2 = Math.floor(Math.random() * 12) + 1;
  let problemResult …

我需要通过变量在浏览器上显示日期和时间。我只是python和flask的初学者。这是我的代码。请提出一两个想法来为我指明正确的方向。

from datetime import datetime
date = datetime.now()

from flask import Flask


app = Flask(__name__)

@app.route("/")
def home():
    return date

if __name__ == "__main__":
    app.run(debug=True)

但它显示“内部服务器错误”