小编ano*_*ran的帖子

这是一个tic tac toe游戏应用程序的尝试.我有两个数组playerMoves和winningCombinations.像这样.

var playerMoves= [0,1,4];
var winningCombinations = [
        [0,1,2],[3,4,5],[6,7,8],
        [0,3,6],[1,4,7],[2,5,8],
        [0,4,8],[2,4,6]
      ];

我需要过滤winningCombination数组,使得至少和最多两个playerMoves数组的值与每个数组匹配winningCombination.

findPossibleMove(playerMoves);
// should return [[0,1,2],[1,4,7], [0,4,8] ]

我的尝试

function findPossibleMove(arr){
  var found = 0;
  return arr.forEach((item)=>{
    winningCombinations.map((obj)=>{
      if(obj.indexOf(item) !== -1) {
        found++;
      }
      if(found===2){
        return obj;
      }        
    })
  })      
}

我有Codepen代码,我试图使用三个文件index.html,main.js和style.css在网页上复制.我尝试在HTML文件的head标签上加载这些脚本.

<script src="https://npmcdn.com/babel-transform-in-browser@6.4.6/dist/btib.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>

但是,它不起作用.我得到的只是这个错误

Uncaught SyntaxError: Unexpected token <

什么是将此反应代码加载到HTML的必要CDN脚本文件？

我正在创建一个反应游戏应用程序，我想在多个组件之间传递状态。为此，我第一次尝试使用 react context api。所以这是我的 GameContext.js

import React, { useState, createContext } from 'react';

const GameContext = createContext();

const GameProvider = ({ children }) => {
  const [name, setName] = useState('');
  const [color, setColor] = useState('');
  const [startgame, setStartgame] = useState(false);


  return (
    <GameContext.Provider value={[name, setName]}>
      {children}
    </GameContext.Provider>
  );
};

export { GameContext, GameProvider };

我可以name在子组件中使用

import { GameContext } from '../../context/GameContext';    
const [name, setName] = useContext(GameContext);
console.log(name);

但是现在我想将其他状态值从 GameContext.js获取到同一个子组件中，例如[color, setColor]和[startgame, setStartgame]。
如何将这些值放入子组件中？

我还有一个问题，不知怎的，我觉得这是一个非常愚蠢的问题，但为什么我不能在 GameContext.js …

我认为这是一项简单的任务,但它变得非常复杂.见代码.

    // Convert "rgb(255, 255, 255)" to (255, 255, 255) and then to Hex code
    var data = {
        color:"rgb(165,199,72)",
        color:"rgb(229,121,74)",
        color:"rgb(105,177,222)"        
    }
    // rgb To Hex Conversion
    var componentToHex = function(c) {            
        var hex = c.toString(16);
        return hex.length == 1 ? "0" + hex : hex;
    }       
    var rgbHex = function(r, g, b) {
        return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
    }


    //Substring "rgb(255, 255, 255)" to "(255, 255, 255)"
    var subStringRGB = function(c){
        var b = c.substring(4, …

我想使用CSS Flexbox创建这样的东西:

我通常使用浮点数和大量定位调整来实现这一点,在元素的顶部,底部,左侧和右侧添加边距,填充,百分比值以将其调整到某个视口,但它似乎在不同的视口中断开.

我知道这不是正确的方法,我最终写了太多的CSS,但在不同的视口上看起来仍然不一致.

将徽标完美地放在中心并垂直对齐是我在苦苦挣扎的地方.

这是HTML代码.

<nav class="navbar">
    <div class="sidebar-toggle">
        <button class="sidebar-toggler" type="button">?</button>
    </div>
    <div class="headerLogo">
        <a href="" class="logo">Logo</a>
    </div>
    <div class="headerLinks">
        <a href="">link1</a>
        <a href="">link2</a>
    </div>
    <div class="notifications">
        <div class="mailIcon"></div>
    </div>    
</nav>

我有一个这样的嵌套数组。

var arr = [[false,false,false,false],[false,false,false,false],[false,false,false,false],[false,false,false,false]]

我想检查每个值是否为假。我可以想到一种方法来做到这一点。

let sum = 0;
arr.forEach((row, i) => {
    row.forEach((col, j) => {
      sum = sum +arr[i][j]    
    });
});
if(sum === 0){
    console.log("all values false")
}

这有效。但我很好奇是否有更好的方法？检查所有值是否为真或假？

这是 HTML。

<navlink v-bind:href="#about">About</navlink>

而 main.js 代码是

Vue.component('navlink', {
    template: '<li class="item"><a><slot></slot></a></li>'
});

但我收到错误

[Vue 警告]：无法编译模板：-无效表达式：v-bind:href="#about"

如何解决这个问题？

这是我在Kendo UI中的热图的代码.

<div ng-repeat="h in row.hours" ng-style="h.styleStr" 
    data-value="{{params.compare ? h.percentChange : h.current[unit]}}" 
    data-time="{{$index}}">
        {{params.compare ? h.percentChange : h.current[unit]}}
</div>

它的工作完美.什么h.current[unit]在div里面,确实是,它显示的值(十进制).像这样..
但是我需要将十进制值显示为整数.像这样... 我有一个intFormat功能就是这样.例如: intFormat(79.952)将返回80.所以我试图使用intFormat函数格式化热图中的数字.怎么做到这一点？我不知道这是否合法,但我尝试过{{params.compare ? h.percentChange : intFormat(h.current[unit])}},但它不起作用.我正在使用Angularjs 1X和KendoUI.我可以在双花括号内使用功能吗？

我是async等待和承诺的初学者.我阅读了一些文章并观看了一些教程视频,但我仍然无法完全理解它.所以我有一个我现在正在处理的代码

}).then(function() {
  var responseArray = []
  [url1,url2,url3,url4].forEach((url)=>{
      makeRequest(url)
  }).then((response)=>{
      responseArray.push(response)
  })
  return responseArray
})

因此,如预期的那样,responseArray空的返回.我需要让它等到每个makerequest(url)的所有响应都被推送到responseArray.
这是我的尝试

}).then(function() {
      var responseArray = []
      [url1,url2,url3,url4].forEach((url)=>{
          async makeRequest(url)
      }).then((response)=>{
          await responseArray.push(response)
      })
      return responseArray
    })

任何人都可以帮我解决这个问题吗？

我正在尝试重写我用 pugjs 制作的应用程序并在 sveltejs 中表达。我真的很喜欢用 pugjs 写 html。我想知道我是否可以在 svelte 组件中使用 pugjs。我假设我可能需要使用svelte-loader并进行一些预处理，或者甚至可能吗？我正在使用Sapper以苗条的方式重写我的应用程序。谁能帮助我如何在 Sapper 中做到这一点？

我想根据时间在div中添加和删除一个类.它应该在6秒后添加一个类,并在4秒后将其删除.我尝试了一个基本的实现.为什么这不起作用？我假设问题是两个setTimeout一起像这样.如果我注释掉第二行,那么第一行就可以了.这里发生了什么？

setTimeout(addHighlight(), 6000);
setTimeout(removeHighlight(), 10000);

有人可以告诉我如何在一个delay参数的基础上编写一个同时执行这两个功能(添加和删除类)的函数吗？

我正在尝试用 Sapper（sveltejs）重写我的网站（Pug+Express）。我是 sveltejs 的初学者，如果我的问题可能真的很幼稚，请原谅。
我有一个 template.json 文件，其中包含我网站的所有静态数据。在 expressjs 版本中，我const template = require('template.json')使用 pug 模板渲染页面，如下所示

router.get('/:pageName', function(req, res, next) {
  res.render('pages/About', {template: template})

在 sveltejs/sapper 中实现此目标的等效版本是什么？到目前为止，我做了一个import template from 'template.json'在app/server.js文件中。然后呢？由于工兵模板使用波尔卡而不是快递，我很困惑如何正确使用它。有什么建议吗？

我正在为我的游戏应用程序使用 react context api，并创建了一个 GameContext.js

import React, { useState, createContext } from 'react';

const GameContext = createContext();
const GameProvider = ({ children }) => {
  const [startgame, setStartgame] = useState(false);

  return (
    <GameContext.Provider value={[startgame, setStartgame]}>
      {children}
    </GameContext.Provider>
  );
};

export { GameContext, GameProvider };

在 App.js 中，我提供了上下文。

import { GameProvider, GameContext } from './context/GameContext';

const App = () => {
    console.log(useContext(GameContext), 'Gamecontext');
    return (
      <GameProvider>

        <div className="App">
            {!startgame ? <WelcomeScreen />
        : <GameScreen />}
        </div>
      </GameProvider>
    );
  };
  export default …