标签: codepen

为什么这个 SVG 图像在这个 500 像素的容器内以 150 像素的高度显示？为什么是这个特定值？

我在 js bin 和 Codepen 中都发现了这种奇怪的行为，所以我认为这与我的代码有关，而不是与在线编辑器有关。

注意：一个 700px 的 div 容器会产生同样的结果。所以父母的身高并不重要。

<div style="padding: 30px; background-color: yellow; height: 500px; width: 500px; ">
<svg>

  <pattern id="basicPattern" x="10" y="10" width="40" height="40" patternUnits="userSpaceOnUse" >
      <rect x= "0" y="0" width="4" height="4"
            stroke = "red"
            stroke-width = "1"
            fill = "black"/>
  </pattern>
  <!-- <rect x="0" y="0" width="300" height="151" // why this deletes the bottom line? -->
  <!-- <rect x="0" y="0" width="300" height="150" // why this deletes 1 px from …

我在CodePen上有这个代码:https ://codepen.io/anon/pen/OdOyJX ,效果很好,我很困惑为什么这样做.

ReactDOM.render(
  <div>Hello, world!</div>,
  document.getElementById('root')
);

在JavaScript设置中,没有选择预处理器,所以我希望JSX语法失败,因为"<"是无效的令牌.是什么让这项工作在CodePen？

我正在研究现有的codoCircle.放下音量.

它按预期工作.

现在我想在codepen中使用相同的代码,我得到这个错误

TypeError:无法在'AudioBufferSourceNode'上设置'buffer'属性:提供的值不是'AudioBuffer'类型

我做了一些研究,我发现第一个答案很有用.

答案说

在我分配的时候playSound player.buffer = buffer,缓冲区仍然是未定义的,因为加载回调没有被触发.

这对我来说很有意义,所以我试着这样做 setTimeout:

setTimeout(playSound, 9000);

它没有成功.

你知道任何解决方法吗？为什么CodeCircle工作而不是Codepen？

http://codepen.io/JessieZhou/pen/VPgMdP,这是在CodePen中使用React的演示,但是浏览器给出了错误"Uncaught ReferenceError:Component not defined".但是,如果我在第一行中从'react'"插入一行"import {Component}",则错误将是"Uncaught ReferenceError:require is not defined".是否有可能使用'class'导致此问题？

这是我的代码:

//import {Component} from 'react'
class MyInput extends Component{
   constructor(props){
     super(props);
     this.handleChange = this.handleChange.bind(this);
   }

   handleChange(e){
     this.props.update(e.target.value);
   }

   render(){
     return <input onChange={this.handleChange} type="text"/>
   }
}
ReactDOM.render(MyInput, document.getElementById('myinput'));

这是我在CodePen中的javascript设置:codepen中的 javascript设置

我正在尝试将可真字体的样式表添加到Codepen中，但似乎无济于事，请任何人帮忙。

Codepen（https://codepen.io/kellett/pen/YreKaW）

以下是我插入HTML页面顶部的样式表。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">  

我正在尝试在我的Codepen 项目中使用 Javascript ES6 导入/导出功能，并且我认为根据我读过的一些文章它是受支持的，但我在让它工作时遇到了麻烦。我已经将我的 Codepen 项目设置为使用 Webpack 和 Babel 来处理我的 javascript 文件，甚至尝试使用 Chrome Canary 来查看是否支持 ES6（无济于事）。

在我的 Codepen 项目中，我编写了一个从一个文件导出字符串变量的基本示例：

//data.js
export let firstName = 'George';

然后将其导入到我的主要 javascript 文件中以登录控制台：

//index.js
import firstName from "./data";
console.log(FirstName);

不幸的是，Chrome 控制台报告错误：

Uncaught VM3034 index.js:1
SyntaxError: Unexpected token import

如果可能的话，有谁知道如何让它发挥作用？我什至找到了Codepen 项目成功使用 ES6 导入/导出的另一个示例，但我不确定我做了什么不同的操作来得到错误。任何帮助将非常感激。

How would I link any media files (swfs/mp4/mp3/png/other media embed files) to the source of my object embed: basically I want this:

<input type="file"></input>

to send the uploaded file (preferably an swf) to the Data and Value sources:

<object type="application/x-shockwave-flash" data=""  
 style="width:640px;height:480px;margin:1px 350px;">
<param name="movie" value="" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="wmode" value="opaque" />
<param name="quality" value="high" />
<param name="menu" value="false" />
</object>

Link to the full current project:

Codepen

我正在 Codepen 上用 Javascript 编写一个事件处理程序，它将采用表单输入并将其添加到无序列表中。尝试测试时，我收到“错误路径 /boomboom/v2/index.html”错误消息。我不确定这个错误是我的代码造成的还是 Codepen 的问题。谁能指出我如何解决这个问题？

我不知道该尝试什么，因为我不知道这个错误意味着什么。

这是 HTML：

<div class="card">
<div class="card-body">
    <h3 class="card-title">Today's To Do List</h3>
    <form id="todo-form">Week 5: To Do List
        <div class="form-group">
            <input type="text" class="form-control" id="todo-Week 5: To Do Listinput" placeholder="What else do you need to do?">
        </div>
        <div class="form-group">
            <input type="submit" id="todo-btn" class="btn btn-secondary btn-block" value="Add Item To List">
        </div>
    </form>
</div>
<ul class="list-group list-group-flush" id="todo-ul">
    <li class="list-group-item">Pick up groceries
            <i class="fas fa-trash-alt"></i>
    </li>
    <li class="list-group-item">Finish essay
        <i class="fas fa-trash-alt"></i>
    </li>
    <li class="list-group-item">Soccer …

我正在尝试在codepen中创建Web应用程序.我正在使用React,ReactDOM.一切都很好.但是当我将react-router-dom添加到我的项目中时,我收到了一个错误:

react-router-dom.min.js:1 Uncaught Error: Cannot find module "prop-types"

我怎样才能解决这个问题？

我最近一直在学习 HTML 画布，并制作了一个在桌面上完美运行的简单绘图应用程序。但在移动设备上我无法绘制连续的线，只能绘制单个点。知道我做错了什么吗？链接到我的 codepen 版本

https://codepen.io/ryan-rigley/pen/oNXEvwm?fbclid=IwAR0rekoc1wcT2d4of0vCW32F0bzQDX1kW8DsJKiDq8t0ymLky1IkHyu8ozc

let color = "black";
let strokeSize = 10;

function changeColorAndSize(data, width) {
  color = data;
  strokeSize = width;
}
window.addEventListener("load", () => {
  const canvas = document.querySelector("#canvas");
  const ctx = canvas.getContext("2d");

  //resizing
  canvas.height = window.innerHeight;
  canvas.width = window.innerWidth;

  //variables
  let painting = false;

  //functions
  function startPosition(e) {
    painting = true;
    draw(e);
  }

  function endPosition() {
    painting = false;
    ctx.beginPath();
  }

  function draw(e) {
    if (!painting) {
      return;
    }
    e.preventDefault();
    ctx.lineWidth = strokeSize;
    ctx.lineCap = …