开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

我的JavaScript没有在CodePen中运行，我不知道这是不是我的代码出了问题

如果你的JavaScript代码没有在CodePen中运行，可能有以下几个原因：

代码错误：首先，你需要检查你的代码是否存在语法错误或逻辑错误。在JavaScript中，一个小的错误可能导致整个代码无法运行。你可以使用浏览器的开发者工具（通常按下F12键打开）来查看控制台中的错误信息，以帮助你找到问题所在。
依赖问题：如果你的代码依赖于外部库或框架，你需要确保这些依赖项已正确引入。你可以在CodePen的设置中添加外部资源，或者使用CDN链接来引入所需的库。
HTML结构问题：确保你的HTML结构正确，包括正确的标签嵌套和元素位置。JavaScript代码通常需要在DOM加载完成后执行，所以你需要将代码放在适当的位置，比如放在<body>标签的末尾或使用DOMContentLoaded事件。
运行环境问题：CodePen提供了不同的运行环境，比如JavaScript、React、Vue等。确保你选择了正确的运行环境，并且你的代码与所选环境兼容。

如果你仍然无法解决问题，可以尝试以下步骤：

简化代码：将代码简化为最小可运行的版本，以确定问题所在。逐步添加功能和代码，直到发现引起问题的部分。
搜索解决方案：在搜索引擎或开发者社区中搜索类似的问题，看看是否有其他人遇到过相似的情况，并找到解决方案。
寻求帮助：如果你仍然无法解决问题，可以在相关的开发者社区或论坛上寻求帮助。提供足够的代码和错误信息，以便其他人更好地理解和帮助你。

对于在腾讯云上进行前端开发的用户，推荐使用腾讯云的云开发服务。云开发是一种无服务器的云原生开发模式，提供了前端开发、后端开发、数据库、存储等一体化的解决方案。你可以使用云开发提供的云函数来运行你的JavaScript代码，并且可以方便地与其他腾讯云产品进行集成。你可以在腾讯云云开发的官方文档中了解更多信息：腾讯云云开发

希望以上信息对你有帮助，祝你顺利解决问题！

相关搜索:多线程，我的代码出了什么问题？我不知道我的代码出了什么问题，随机发生的事情我不知道我的数据库出了什么问题。显示错误我不知道我的查询出了什么问题我不知道这是什么时候的问题我不能理解我的python代码出了什么问题我似乎无法在CodePen中拆分我的图像和段落我只是想知道我在javascript中添加2个数组的代码出了什么问题我找不出我的代码出了什么问题我没有得到预期的结果，我想知道代码出了什么问题

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

这是我见过写得最烂的 Controller 层代码，没有之一！

接口定义工作中，少不了要定义各种接口，系统集成要定义接口，前后台掉调用也要定义接口。接口定义一定程度上能反应程序员的编程功底。列举一下工作中我发现大家容易出现的问题： 1....这个对应代码上，返回的类型是map，json，object，都是不应该的。实际工作中，我们会定义一个统一的格式，就是ResultBean，分页的有另外一个PageResultBean。...除了代码可读性不好问题外，尤其是参数出现当前用户信息的，这是个严重问题。...请对比吐槽我见过的最烂的java代码里面原来的代码查看，没有对比就没有伤害。最后说一句，先有统一的接口定义规范，然后有AOP实现。先有思想再有技术。...技术不是关键，AOP技术也很简单，这个帖子的关键点不是技术，而是习惯和思想，不要捡了芝麻丢了西瓜。网络上讲技术的贴多，讲习惯、风格的少，这些都是我工作多年的行之有效的经验之谈。

4723 0

这是我见过写得最烂的Controller层代码，没有之一！

接口定义工作中，少不了要定义各种接口，系统集成要定义接口，前后台掉调用也要定义接口。接口定义一定程度上能反应程序员的编程功底。列举一下工作中我发现大家容易出现的问题： 1....这个对应代码上，返回的类型是map，json，object，都是不应该的。实际工作中，我们会定义一个统一的格式，就是ResultBean，分页的有另外一个PageResultBean。...除了代码可读性不好问题外，尤其是参数出现当前用户信息的，这是个严重问题。...请对比吐槽我见过的最烂的java代码里面原来的代码查看，没有对比就没有伤害。最后说一句，先有统一的接口定义规范，然后有AOP实现。先有思想再有技术。...技术不是关键，AOP技术也很简单，这个帖子的关键点不是技术，而是习惯和思想，不要捡了芝麻丢了西瓜。网络上讲技术的贴多，讲习惯、风格的少，这些都是我工作多年的行之有效的经验之谈。

5743 0

怎么在Excel中截图？这是我常用的几种方法！

在Excel中截图，常用的方法包括在Excel中复制为图片、使用第三方截屏工具、使用键盘PrintScreen按钮等方法。...一、在Excel中直接复制为图片在Excel中，可以直接建数据复制为图片，具体如下图所以：在弹出的对话框中选择如屏幕所示或如打印所示，如下图：其中，选择如屏幕所示...，将得到屏幕中显示的样子，如果选择如打印效果，那么将是打印之后的效果，比如你如果在电脑中设置了背景色（如我图中的护眼豆沙色），如屏幕所示得到的是带背景色的结果，而打印效果则仍然是白色（无颜色）的情况。...，而且截图后可编辑性很强，还支持滚动截屏……如下图所示：三、使用键盘PrintScreen按钮这是最古老的截图方式了，即按键盘上的PrintScreen（PrtSc），这种方式会将整个屏幕拷贝下来...如下图所示：以上介绍了3中可以在Excel中实现截图的方法，各有优劣，在实际工作中按需要进行选择使用即可。『后台发送消息“截图”可获取Snagit』

4.3K3 0

我在移动web开发中遇到的各种问题

（在pc和ios中都能流畅地滚）目前（2015年8月3日15:02:24）在大部分安卓手机都发现这个问题，触发bug的条件知道了，但是原因未知。...触发bug的条件是需要横向滚动的层不能位于纵向滚动不是body的层下面（后面有具体解释）。...，我是横向滚动的文字，我是横向滚动的文字，我是横向滚动的文字， <li...，此时是正常的，安卓中ul能正常地左右滚动。...但是做web app，不能保证时时都能直接用body作为滚动层的，尤其是在弹窗中的时候，请问有更好，不使用js的解决方法吗？ div包着img时，div的高度希望自适应到与img一样？

1.7K2 0

我在自己的桌面端应用中运行了小程序

但这也是一种天马行空的想法，调研了一番，路径一：自己造轮子，这是不可能的，没有这个精力和时间。...直到偶然间看到阮一峰大佬的博客介绍到 FinClip 可以支持在移动端和桌面端（Windows、Linux和 macOS）运行小程序，那就随便上手试试。图片说干就干！...图片细细想下，这样标准容器化的好处，可以保证在开发语言环境存在差异下，“套壳子的小程序”能独立运行的同时，也可以与“其他套壳子的小程序”联动使用。...SDK 前还需要在 FinClip 的后台上架小程序，我上架了官方的示例小程序代码包，也尝试了直接把微信小程序的代码包上传到 IDE 中的，发现也能兼容。...以下是我桌面端实际运行小程序的结果。图片如果做一定适配优化，小程序的展示尺寸还可以适配打开窗口大小，效果也不错。

1.4K3 0

在没有DOM操作的日子里，我是怎么熬过来的（中）

通常这个阶段，可能会比较漫长，建议用国内淘宝的镜像cnpm。也是在这期间，经常有同学在安装某依赖模块时，会碰到命令行报错，说是node或者npm版本过低等问题。...，构建好的文件会输出到 "dist" 目录， npm run build #运行构建服务器，可以查看构建的页面 npm run build-server #运行单元测试 npm run unit 当你可以正常运行这个项目之后...说到组件，在项目中，你可能会看到公司前辈写的组件代码，都是以 .vue 为后缀的文件，打开后你会发现它的整体结构分三层，分别定义了三个 tag标签，template，script，style。...然后对应的代码在自己的标签里面各司其职，所有需要的html、css、javascript都在里面。...开发的时候，写好data 剩下的事情就是通过异步请求来交互data，UI层绑定事件改变data，在组件间传递data。后记在这个MVVM横行的时代，我已经渐渐的忘却了jQuery的存在。

1.6K11 0

方法论：在不是太懂源码的情况下，我是怎么定位源码问题的？

在日常开发中，我们多多少少会遇到些问题，有时候是自己的写法有错误，这时候可能就要先检查一遍，看看文档，看看是哪里的问题。...当然我还是稍微努力了一下下，准备提个 issue 看看。既然要提 issue，那就得首先觉得它是 pnpm 自身的问题，不是我写的代码有问题。...但是鸭，很多时候，开发者可能遇到问题了，却提供不出来，主要有以下原因：项目非常大，不知道哪里有问题，因此不知道怎么做一个最小复现的 Demo是公司的项目，不能将代码提供出去我是两个原因都有，因此不是我不想提供...调试代码光有决心还是没有的，得实际行动。但一个巨大的问题摆在面前，pnpm 的代码我也没看过鸭，调个啥玩意？？？因此，第一个问题，是怎么把 pnpm 源码跑起来调试呢？...直接注意的是，它的 package.json 没有 dependencies 字段pkg 对象根据 package.json 生成，这一句代码中，由于 pkg.dependencies 不存在，因此会导致使用了锁文件的

9142 0

方法论：在不是太懂源码的情况下，我是怎么定位源码问题的？

本篇文章讲解介绍我最近遇到的一个真实例子，在不是太懂源码的情况下，通过自己的一些经验、调试技巧，去定位问题发现问题在我的某个项目中，当我使用 pnpm i --fix-lockfile 时，一定会报如下错误...当然我还是稍微努力了一下下，准备提个 issue 看看。既然要提 issue，那就得首先觉得它是 pnpm 自身的问题，不是我写的代码有问题。...但是鸭，很多时候，开发者可能遇到问题了，却提供不出来，主要有以下原因： • 项目非常大，不知道哪里有问题，因此不知道怎么做一个最小复现的 Demo • 是公司的项目，不能将代码提供出去我是两个原因都有...调试代码光有决心还是没有的，得实际行动。但一个巨大的问题摆在面前，pnpm 的代码我也没看过鸭，调个啥玩意？？？因此，第一个问题，是怎么把 pnpm 源码跑起来调试呢？...（停不住可能是根本没运行这行代码，换个别的），就代表这一步已经成功了定位问题这一步才是最核心、但又最麻烦的步骤如何在茫茫源码中定位问题？

6441 0

我如何每次运行程序时，都会将数据添加到对应的keys中，而不是重新创建一个dict啊？

一、前言前几天在Python最强王者交流群【】问了一个Python项目实战的问题，问题如下：请问，我如何每次运行程序时，都会将数据添加到对应的keys中，而不是重新创建一个dict啊。...二、实现过程这里【东哥】基于粉丝的代码，做了一份修改，修改后的代码如下： import json def load_data(): try: with open('user.json...如果你也有类似这种Python相关的小问题，欢迎随时来交流群学习交流哦，有问必答！三、总结大家好，我是Python进阶者。...这篇文章主要盘点了一个Python项目实战的问题，文中针对该问题，给出了具体的解析和代码实现，帮助粉丝顺利解决了问题。...最后感谢粉丝【】提出的问题，感谢【东哥】给出的思路，感谢【莫生气】等人参与学习交流。

981 0

8 个 DOM 功能

你可以试着运行以下 CodePen 项目中关于 options 对象的一些代码： CodePen演示：https://codepen.io/impressivewebs/pen/GeJZYz/ 请注意，...可以通过修改代码中的数字更改值。至于浏览器支持，似乎在兼容性上有些小问题，不过看上去现在几乎所有还在使用中的浏览器都支持可选参数功能，包括 IE10。...但需要注意以下几点：我必须在其中一个文本节点上调用 wholeText，而不是元素（因此代码中的el.childNodes [0]、el.childNodes[1]也可以正常工作）文本节点必须相邻，...这是一种在 DOM 中移动元素的简单方法。这是使用 insertAdjacentElement()的 CodePen 演示。...Firefox 只允许最多三次点击，然后计数再次开始我已经包通过包含 blur 和 focus 来证明这些不符合条件并且总是返回0（即没有点击）在 IE11 等旧版浏览器中的行为严重不一致请注意，

1.8K2 0

30个前端开发人员必备的顶级工具

转自: 前端全栈开发者在本文中，我为前端Web开发人员汇总了30种顶级工具，从代码编辑器和代码游乐场到CSS生成器，JS库等等。...输入数值，预览结果，抓取生成的代码并运行。...虽然没有什么比得上直接在不同的浏览器和平台上测试网站和应用程序，但以这种方式覆盖所有基础不是我们大多数人的选择。下面列出的服务和应用程序可以提供帮助。...Caniuse https://caniuse.com/ 我不知道你是怎么想的，但当我需要了解浏览器对任何HTML、CSS、SVG和JavaScript功能支持的最新信息时--无论这些功能是多么新奇或晦涩难懂...由其团队定义如下： CodePen是一个社交化的开发环境。从本质上讲，它允许你在浏览器中编写代码，并在构建时查看其结果。

3K2 0

敢不敢接招：用CSS实现3D立方体

在这一刻，我还没有意识到我正陷入其中，但我无法确定是否可以完成。理解轴（字面翻译是磨斧）提醒下这个axes不是战斧，而是数轴的意思，正如我们在学校学到的三维直角坐标系一样的轴线。...如果太大，3D效果将减少到没有。查看代码，由Anna Selezniova (@askd在 CodePen)上编写. 此外，在这个场景中对于所有物体而言只有一个视野角度。...所以，我需要将它们重新排列。演示如下：查看代码，由Anna Selezniova (@askd 在 CodePen)上编写。...我需要展示1个像素的虚线，但看起来很糟糕模糊。查看地址，由Anna Selezniova (@askd 在 CodePen)上编写。我立马认识到问题出在哪了。...正弦余弦函数图 (图片: 维基共享资源) (查看大图) 在正弦余弦函数的帮助下，通过角度我轻松地计算出了每个标注的偏移。

8184 0

理解微信小程序的双线程模型

而在每个标签页进程中，浏览器会把不同的工作交给对应的线程，比如 GUI 渲染线程负责把 HTML 渲染成可视化的 UI；JavaScript 引擎线程负责解析和运行 JavaScript 代码逻辑；定时触发器线程负责处理...这是经典的线程安全（也称为线程同步）问题，在多线程编程领域有很多解决方案，比如加入锁机制，但这样却又带来了更多的复杂性，与 JavaScript 简单易用的设计初衷相违背。...当然，还有性能，性能问题是 iframe 老生常谈的问题了，我就不多说了。所以，不仅要使用 iframe，还需要引入额外的 JavaScript 编译器。...保证逻辑线程安全，不允许直接操作 UI 组件小程序更新 UI 的方式与 Vue/React 等 MVVM 框架类似，JavaScript 代码不能直接操作 DOM（仅做类比，事实上小程序中没有DOM...Webview 是一个完整的类浏览器运行环境，本身具备运行 JavaScript 的能力，但是小程序并不是将逻辑脚本放到 Webview 中运行，而是将逻辑层独立为一个与 Webview 平行的线程，使用客户端提供的

2.4K5 0

5 个网站将您的前端技能提升100倍

我发现前端开发比后端开发困难得多。一般来说，在后端开发中，我知道我在做什么以及所有东西应该如何交互，代码是否能正常运行。但是，当涉及到前端时，整个故事就不一样了。...但是，我更专注于发展我的网页设计技能和 HTML、CSS 和 JS 的基础知识。在花费大量时间进行研究并深入了解互联网的广阔世界后，我列出了这 5个我认为最适合练习前端技能的网站。...每天你都会面临一个新的挑战，你必须使用相同的概念来创造它或类似的东西。创造力很受赞赏，尤其是在 CSS 社区中。您在codepen提交您的解决方案。...如果您不知道 codepen 是什么，它是一种在线代码编辑器工具，可让您在浏览器中编写代码并在构建时查看实时结果。我建议检查一次。...它的好处在于您可以看到代码以及某人如何进行特定设计。我喜欢花时间在codepen 上，以了解一些最好的设计师和开发人员。我们可以从最好的人那里观看和学习，这是一种奢侈。

7102 1

Web Components 并没有你想象中的那么复杂

大佬们总是不可避免地掩盖 Web Components 需要大量的 JavaScript 代码才能正常运行的这个问题，或者深入一些看起来无关紧要的细节。到了这个环节我的目光就开始变得呆滞，开始发呆。...但是在最近的一个作为参考文献的项目[4]中，为了让学习 HTML 变得更容易，作为一个完美主义者的我决定我必须涵盖规范中的每一个 HTML 标签。...在这个过程中，我总结出了一些经验 —— Web Components 并没有我们记忆中的那么复杂。...注册 Web Component 就像我说的那样，确实需要一些 JavaScript 代码才能上面的这些代码能够正常工作，不过并没有我想象中的那么复杂 —— 数千行、深入细节的 JavaScript 代码...但是这只是你在前端看到的样子，事实上它在 DOM 中并不是这样工作的。自定义标签中的内容会出现在它原本的位置，而 Shadow DOM 更像是一个蒙版，被放置在自定义标签的顶部。 ?

5462 0

前端练级攻略(第一部分)

我记得我刚开始学习前端开发的时候。我看到了很多文章及资料，被学习的资料压得喘不过气来，甚至不知道从哪里开始。本指南列出前端学习路线，并提供了平时收藏的一些有效的资源。...在本节中，有两个实践旨在为你提供构建网站和界面的实践。我用“实践”这个词是因为在实践中，你从失败中学到的东西和你从成功中学到的一样多。实践 1 在我们的第一个实践中，我们将使用 CodePen。...CodePen 是一个前端平台，你可以在这里编写 HTML 和 CSS 代码，而不必在本地存储文件。它还提供了实时预览，可以在保存代码时立即更新。通过使用 CodePen，你可以一石二鸟。...另一方面，你创建一个基本的进度组合。我们还将使用 Dribbble，这是一个充满设计灵感的网站。在 Dribbble 找到一个简单到可以在几个小时内编写代码的设计。...你的代码在 Safari 和 Chrome 上运行得一样的吗? 你是否可以用类似于 Skeleton 的网格系统替换一些布局代码? 你经常使用 !important 标志吗?你怎么解决这个问题?

1.3K0 0

先来聊聊JavaScript

因此，大量的公司正在招聘JavaScript开发人员，但是在就业市场上并没有这么多会JavaScript的程序员。...因素四：你可以用它构建哪些项目这是JavaScript真正牛逼的地方。 JavaScript可以在任何具有浏览器的设备上运行(设备的浏览器是运行JavaScript的平台)。...Python也遇到了同样的问题：“我怎么把我编写的游戏分享给我的朋友？更好的是，有没有一种方式，能让我将这种游戏安装在我的手机上，以至于我可以在学校通过手机向孩子们展示，而孩子们没有必要安装它。...“ – 在放弃用Python作为教学语言后， James Hague如是说。与之成对比的是，我们开源社区的成员在Codepen的浏览器中编写了一些app。...以下是新出炉的最全面编程语言速度比对的结果：图表：各编程语言速度比对结果反对二：但JavaScript不是静态类型的像Python和Ruby一样，JavaScript是动态类型化的，这是很方便，

1K5 0

前端开发，从草根到英雄（第一部分）

我还记得当我刚开始学习前端开发时，我被大量的技术文章淹没，当时让我非常困惑的是：我究竟需要学多少知识才算足够，我甚至不知道从哪里开始。...我用“实验”这个词的目的是：在实验中，你从失败中学到的东西将会和你从成功中学到的一样多实验1 第一个试验中，我们将学习使用CodePen。...当你开始动手时，尝试在CodePen中写代码，如果你卡住了，记住StackOverflow是你的朋友，另一种非常有价值的练习则是登录像Medium，AirBnB或Dropbox这样的网站，使用Chome...当你在重构代码时，你需要问自己几个问题：你的类名是否模糊不清？在六个月后吗，你还会记得这些类名的意思吗？你的HTML和CSS具有语义吗？当你在此审视你的代码时，你还能快速辨别结构和关系的意义吗？...第二篇文章介绍了使用Javascript和JavaScript库/框架添加交互性。此外，如果你想要我详细说明任何事情或有任何问题，随时留言或Tweet给我。

1.1K5 0

CSS 预处理器中的循环

虽然这不是一个消灭邪恶机器人好办法，但是它会惹恼使用你代码的人。所以循环的使用是有限度的——通常是由一些递增的循环体或者对象集合定义。...在 Less 中，你做每件事都会遇到困难（原文评论中有很多人提出了反对意见）。这是它的特点。社交媒体按钮遍历列表很有用，但是很多时候你想遍历对象。...你可以在课后把它转成 Less 和 Stylus 的代码。我已经看腻了。特殊的 while 循环真正的 while 循环很少见，但是我偶尔会使用。当我看一条路径指向何处时会非常有用。...我经常这样做，但是如果你在我的代码中搜索 Sass 的 @while，你是找不到的。...我相信你可以比我做的更漂亮。 Getting Loopy! 如果你不知道该什么时候使用循环，时刻留意循环体。你是不是有大量遵循相同模式的选择器，或者重复的计算？

4.3K6 0

前端开发，从草根到英雄（上）

我还记得当我刚开始学习前端开发时，我被大量的技术文章淹没，当时让我非常困惑的是：我究竟需要学多少知识才算足够，我甚至不知道从哪里开始。...我用“实验”这个词的目的是：在实验中，你从失败中学到的东西将会和你从成功中学到的一样多实验1 第一个试验中，我们将学习使用CodePen。...当你开始动手时，尝试在CodePen中写代码，如果你卡住了，记住StackOverflow是你的朋友，另一种非常有价值的练习则是登录像Medium，AirBnB或Dropbox这样的网站，使用Chome...写出高质量代码是一个不断迭代的过程。这篇CSS架构：重构你的CSS很好的讲述了如何开始重构你的代码。当你在重构代码时，你需要问自己几个问题：你的类名是否模糊不清？...第二篇文章介绍了使用Javascript和JavaScript库/框架添加交互性。此外，如果你想要我详细说明任何事情或有任何问题，随时留言或Tweet给我。

6121 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭