首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

代码在Codepen中可以工作,但在我的电脑中不能工作

这个问题涉及到前端开发和代码运行环境的差异性。可能的原因有以下几点:

  1. 浏览器兼容性问题:Codepen是一个在线的代码编辑器和运行环境,它提供了一套统一的浏览器环境,可以自动处理一些兼容性问题。但是在你的电脑中,使用的浏览器版本或者设置可能与Codepen中的环境不同,导致代码无法正常运行。你可以尝试在不同的浏览器中运行代码,或者检查你的浏览器版本和设置是否与Codepen中的环境一致。
  2. 依赖项缺失:在Codepen中,你可能使用了一些第三方库或者框架,而在你的电脑中没有正确安装或者引入这些依赖项,导致代码无法正常运行。你可以检查你的代码中是否有依赖项,并确保它们在你的电脑中正确安装和引入。
  3. 环境配置问题:Codepen提供了一个预设的开发环境,包括HTML、CSS和JavaScript的编辑器和运行环境。但是在你的电脑中,你可能需要自己配置开发环境,例如安装和配置适当的代码编辑器、运行时环境和调试工具。你可以检查你的电脑中的开发环境配置是否正确,并尝试重新配置或者使用其他开发环境。

总结起来,要解决代码在Codepen中可以工作但在你的电脑中不能工作的问题,你可以尝试以下几点:

  1. 检查浏览器兼容性:尝试在不同的浏览器中运行代码,或者检查你的浏览器版本和设置是否与Codepen中的环境一致。
  2. 检查依赖项:确保你的代码中使用的第三方库或者框架在你的电脑中正确安装和引入。
  3. 检查环境配置:确保你的电脑中的开发环境配置正确,并尝试重新配置或者使用其他开发环境。

希望以上解答对你有帮助。如果你需要更具体的帮助,请提供更多关于你的电脑环境和代码的信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

我在工作中的常用代码管理

说是管理其实就是把常用的一些JS方法,自己保存下来,这样的以后的工作中可以比较方便的使用。 哪些方法可以、或是说值得保存呢?...还有一些是扩展型的函数,例如,判断数组,增加、删除数组什么的, 还有一些工具类的,什么复制属性啊,字数判断啊,DOM节点操作啊,轮播广告啊,日期操作 总之,上面列出的那些内容的JS代码都是与具体业务逻辑无关的...那完全可以把它们保存下来,用的时候直接拿过来改改就OK了,而不必每次都重复写它。当然我这个话是从效率的角度来说的啊。 保存的方式方法嘛, 一是按用途保存,组件类,工具类, 二是按方法名保存,a......============= 我写这些东西基本都是“思路或方法”的占多数,我觉得思维在层次上是高于具体实现的。...要看JS教程有很多地方可以看到很好的教程。 我希望关注我的朋友们,看我的微信公众号,能够体会一种“变通”的能力。不要我说一就是一,要懂得举一反三啊。 我再三提醒啊,不要僵化的去看待文中的内容。

85350

CSS粘性定位是怎样工作的

第二个原因是很多开发者并不能完全理解其工作原理背后的逻辑,这就是我的切入点。 ?...在第一个例子中,大家很容易就能看明白 当视口到达定义的位置时,元素会被粘住。 例: ? 但问题是,它有时候能用,而有时却不起作用。 当它工作时,元素会粘住,但在滚动到其他部分,它会停止粘贴。...当我在包装元素中添加更多元素时,它就能开始正常工作了。 这是为什么? 这是因为当一个元素被赋予 position: sticky 样式时,粘性项目的容器是它可以粘贴的唯一区域。...粘性元素没有任何要浮动的元素,因为它只能浮动在同级元素上,作为唯一的子元素,它不能浮动。...去CodePen查看演示效果:https://codepen.io/elad2412/pen/MZZVjw 我在开发中常用它来粘贴摘要表,也会用在粘性页脚导航上,这种方法非常适合。

1.8K10
  • 如何使用 Bootstrap 搭建更合理的 HTML 结构

    在平时的工作中,我一直和同事强调,一定要挖掘框架的精髓,尽可能的使用框架本身具有的类实现布局,几乎所有的 UI 布局都可以使用框架本身完成而不需要编写额外的冗余的样式。...建议在 CodePen 中打开查看效果,因为我的博客内容区较窄,所以只能看到响应式布局的小屏断点。... 注意,在 Bootstrap 4 中, .row 类不能省略,需要写成这样 .form-group row 才行。...表格结构 关于表格可以说的并不多,只是建议全部采用响应式表格结构,也就是添加 .table-responsive 元素。因为在实际工作中,表格的列数一般比较多,响应式表格应该是更通用的方案。...我在之前也写了一篇关于 helper 的文章《如何编写通用的 Helper Class》,感兴趣的话可以看一看。

    2.1K50

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

    我goggle搜索了像“CSS 3D cube”这样的关键词来确认我的想法,随后我回复Eugene说我可以。 Eugene下一个问题是问我是否愿意承担这个项目?我喜欢复杂的任务,所以我不能拒绝。...查看代码,由Anna Selezniova (@askd在 CodePen)上编写. 此外,在这个场景中对于所有物体而言只有一个视野角度。3D效果取决于观察点的位置。...所以,我需要将它们重新排列。演示如下: 查看代码,由Anna Selezniova (@askd 在 CodePen)上编写。...它决定了一个元素变换的中心点。我建了一个可以交互的样例,可以帮助你理解这个属性是如何工作的: 查看代码,由Anna Selezniova (@askd 在 CodePen)上编写。...同样,你也可以尝试拉出左边的黑三角上下拖动来手动控制旋转的角度(遗憾的是,这个特征在IE浏览器中无法工作)。看起来确实不错吧?而且性能也相当高(大概每秒60帧)。 我很高兴参与了这个网站的开发。

    86440

    反思脑机接口技术:机器真的能控制我们的大脑吗?

    1963年,他在一次危险的公共活动中展示了如何通过无线电控制大脑植入来阻止动物的暴力行为。 Delgado按下了手持无线电发射器上的一个开关,使植入公牛大脑中的电极通电。...比如,这些技术实际上是如何工作的?它们的功能又是什么? 在1964年,Delgado的技术就已经可以在人脑中引发一系列令人惊讶的操控。...即使我可以针对每个人使用相同的神经元,该神经元在不同人的大脑中的作用也会有所不同。”...他们可以知道一个人正在想什么数字、处于哪种情绪,或是否有自杀的念头。这种大脑-机器的思想主义是通过要求人们在fMRI机器中不断反复地具有特定的思想或认知经验来工作的。...当我在2018年遇到他时,Copeland的大脑植入物已被移除,因为电极的使用寿命有限。他说:“回头来看,如果被允许,我可以让他们在我的大脑中无数次植入电极。”

    50340

    8 个 DOM 功能

    你可以试着运行以下 CodePen 项目中关于 options 对象的一些代码: CodePen演示:https://codepen.io/impressivewebs/pen/GeJZYz/ 请注意,...: 'smooth' 5}); 这段代码与前面的例子相同,但在 options 对象中添加了 behavior 属性的smooth值。...可以通过修改代码中的数字更改值。 至于浏览器支持,似乎在兼容性上有些小问题,不过看上去现在几乎所有还在使用中的浏览器都支持可选参数功能,包括 IE10。...但需要注意以下几点: 我必须在其中一个文本节点上调用 wholeText,而不是元素(因此代码中的el.childNodes [0]、el.childNodes[1]也可以正常工作) 文本节点必须相邻,...中间不能有其他 HTML 分隔它们 你可以看到这两个功能以及 splitText() 方法已经用在了这个 CodePen 演示中【https://codepen.io/impressivewebs/pen

    1.8K20

    CSS粘性定位 - 它的真正工作原理!

    这篇文章详细解释了CSS中的sticky定位方式,并讲解了它的工作原理。 CSS中的sticky定位有很好的浏览器支持,但许多开发者并没有使用它。....some-component{ position: sticky; top: 0; } 有时候sticky定位能正常工作,有时候则不能。...当它正常工作时,元素会"粘"在一定位置,但在滚动的其他部分,它又会停止"粘"住。作为一个每天都在使用CSS的人,作者无法接受自己不能深入理解这个问题的根本原因,所以决定深入研究sticky定位。...Stick 探索 在尝试使用 sticky 定位的过程中,我很快发现,当一个具有sticky定位样式的元素被包裹起来,并且它是包裹元素内唯一的元素时,这个被定义为sticky定位的元素并不会"粘"住。...让我来解释一下: Relative 定位(或Static定位)- 粘性定位元素类似于相对定位和静态定位,因为它保持DOM中的自然间隙(保持在流中)。

    30620

    担心脑机接口控制人类思想?神经科学家:想多了

    他站在一头斗牛的对面,按下手中的无线电发射器开关,正在冲锋的牛突然停了下来。 因此 Delgado 认为,在大脑中植入电极可以抑制异常行为,实现一个「精神文明的社会」。...但在这些讨论中,事实和虚构的边界很容易变得模糊。 当前的 BCI 设备是通过数据分析来工作的,其原理和亚马逊预测你接下来要买哪本书差不多。...无论有什么文章在耸人听闻,我们要相信一个事实:放置在皮层中以激活假肢运动的电极是无法获得情感的,神经科学家还不了解如何通过神经回路中的脉冲对思想、情感、意志进行编码。 它究竟如何工作?...但是,即便有可能利用微电极进入单个神经元,神经科学家也无法像处理计算机代码一样对神经元进行解码,而是必须使用机器学习来识别与行为反应相关的神经元电活动模式。...即使可以针对每个人使用相同的神经元,在不同人的大脑中,该神经元的作用也会有所不同。」 尽管马斯克等人为脑机接口技术带来了极大的关注度,但技术从不是真正的瓶颈——生物学才是关键所在。

    33530

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

    每天你都会面临一个新的挑战,你必须使用相同的概念来创造它或类似的东西。创造力很受赞赏,尤其是在 CSS 社区中。 您在codepen提交您的解决方案。...如果您不知道 codepen 是什么,它是一种在线代码编辑器工具,可让您在浏览器中编写代码并在构建时查看实时结果。我建议检查一次。...在dribble 中,您可以选择任何您想要编码的设计并开始制作。 我建议你有一个伙伴程序员,你们可以互相挑战,看谁可以更快地克隆设计。...四、CodePen挑战 我之前提到过codepen ,它是一个供您编码的在线编辑器。但是,它远不止于此。Codepen还提供了一个社区,您可以在其中分享您的工作并查看其他人的工作。...它的好处在于您可以看到代码以及某人如何进行特定设计。我喜欢花时间在codepen 上,以了解一些最好的设计师和开发人员。我们可以从最好的人那里观看和学习,这是一种奢侈。

    77921

    ​脑机接口(BCI)与人工智能:仅用思想来控制周围事物是什么感觉?

    局部侵入性 BCI 局部侵入性BCI装置被植入颅骨内,但在大脑皮层。相比非侵入性BCIs能产生更高分辨率的信号,避免头骨组织使信号偏转和变形,并且不像侵入性BCIs容易在大脑中形成疤痕组织。...大脑皮层电描记术(ECoG)从颅骨下测量大脑的电活动,方法与非侵入性EEG方法相同,但电极被嵌入在皮层上方一个轻薄的塑料衬垫中。...另外,特征工程高度依赖于人类在特定领域的专业知识,人类的经验可能有助于捕捉某些方面的特征,但在更一般化的条件下是不够的。...CNN在一些研究领域取得的巨大成功证明了它具有极大的可扩展性和可行性(通过可用的公共代码)。因此,BCI研究者有更多的机会将CNN应用到他们的工作中。...电影业中,BCIs可以根据观众的大脑活动,辅助制作互动式电影。获或许在未来,观众能够通过他们共同的大脑活动来共同控制电影,实现彻底的沉浸式体验。

    1K10

    基础 | 面向对象实战之封装拖拽对象

    本文的例子会放置于codepen.io中,供大家在阅读时直接查看。如果对于codepen不了解的同学,可以花点时间稍微了解一下。...而在鼠标松开(mouseup)结束拖拽时,我们需要处理一些收尾工作。详情见代码。 7、 我又来推荐思维导图辅助写代码了 常常有新人朋友跑来问我,如果逻辑思维能力不强,能不能写代码做前端。...我的答案是:能。因为借助思维导图,可以很轻松的弥补逻辑的短板。而且比在自己头脑中脑补逻辑更加清晰明了,不易出错。...使用思维导图清晰的表达出整个拖拽过程我们需要干的事情 8、代码实现 part1、准备工作 part2、功能函数 因为之前已经贴过代码,就不再重复 part3、声明三个事件的回调函数 这三个方法就是实现拖拽的核心所在...,我将严格按照上面思维导图中的步骤来完成我们的代码。

    54410

    关于软件开发你真正需要知道的几个事情

    完全获取哪怕更小的块中的一个到你的头脑中也可以是很难的,但与此同时,你可以做到一些诸如只知道你正在看的代码行是错误的,以及如何修复这样的事情。那就是软件的领域了。...这工作往往很难且没有吸引力——但它至关重要,因为受到了以下定律的重大影响 墨菲定律 在计算机运算中,墨菲定律可以重新表述为“如果你不能证明它是不可能的,那么它一定会发生——而且往往很快。”...所以你不能避免写出bug。 但是你可以明智地减少bug: 1.注释 在代码中注释的目的不是为了解释代码做什么——可以读取代码!注释目的是为了解释当你写代码的时候是如何思考的。...——他们一点也没错——但在2016年,95%的世界已经对此不在意了。电脑是如此之快以致于可以弥补Python的低效率,并且在大部分时间中做到足够快。...不断学习,不断拓宽你的视野,保持睁大你的眼睛。 这个世界上总有一个地方,会让人们低下头来专注于一个小小的领域,但在我的经验中,有更多的地方值得人们去贪婪地学习并致力于解决碰到的任何问题。

    28410

    关于 CSS 反射倒影的研究思考

    注意:linear-gradient() 可以有更多的颜色断点,也可以用 radial-gradient() 替换。 在我们的 demo 中,我首先想到的就是给 .loader 元素添加这一属性。...我们也可以在 Firefox 中制作一个反射元素。 需要着重了解的一点就是 element() 函数不是递归函数,我们不能创建使用元素作为自身背景的图像。...我们也尝试在 Firefox 中执行动画。但是,如果我们把动画添加到之前在 Firefox 中运行良好的代码中,好像出现了一些问题。 ?...遗憾的是,我们不能在第二个 loader 元素上使用 mask ,因为它只在跨浏览器的 SVG 元素上有效。Edge 目前还不支持 HTML 元素的遮罩效果,但是你可以给官方提建议。...为了制作可以放置在图像背景 background 上的渐变反射,我们不能替换成 SVG 的方案(其自身也有很多问题)。 哪一种方案更好?

    2.5K90

    关于软件开发你真正需要知道的几个事情

    完全获取哪怕更小的块中的一个到你的头脑中也可以是很难的,但与此同时,你可以做到一些诸如只知道你正在看的代码行是错误的,以及如何修复这样的事情。那就是软件的领域了。...这工作往往很难且没有吸引力——但它至关重要,因为受到了以下定律的重大影响 墨菲定律 在计算机运算中,墨菲定律可以重新表述为“如果你不能证明它是不可能的,那么它一定会发生——而且往往很快。”...所以你不能避免写出bug。 但是你可以明智地减少bug: 1.注释 在代码中注释的目的不是为了解释代码做什么——可以读取代码!注释目的是为了解释当你写代码的时候是如何思考的。...——他们一点也没错——但在2016年,95%的世界已经对此不在意了。电脑是如此之快以致于可以弥补Python的低效率,并且在大部分时间中做到足够快。...不断学习,不断拓宽你的视野,保持睁大你的眼睛。 这个世界上总有一个地方,会让人们低下头来专注于一个小小的领域,但在我的经验中,有更多的地方值得人们去贪婪地学习并致力于解决碰到的任何问题。

    27710

    关于软件开发你真正需要知道的几个事情

    完全获取哪怕更小的块中的一个到你的头脑中也可以是很难的,但与此同时,你可以做到一些诸如只知道你正在看的代码行是错误的,以及如何修复这样的事情。那就是软件的领域了。...这工作往往很难且没有吸引力——但它至关重要,因为受到了以下定律的重大影响 墨菲定律 在计算机运算中,墨菲定律可以重新表述为“如果你不能证明它是不可能的,那么它一定会发生——而且往往很快。”...所以你不能避免写出bug。 但是你可以明智地减少bug: 1.注释 在代码中注释的目的不是为了解释代码做什么——可以读取代码!注释目的是为了解释当你写代码的时候是如何思考的。...——他们一点也没错——但在2016年,95%的世界已经对此不在意了。电脑是如此之快以致于可以弥补Python的低效率,并且在大部分时间中做到足够快。...不断学习,不断拓宽你的视野,保持睁大你的眼睛。 这个世界上总有一个地方,会让人们低下头来专注于一个小小的领域,但在我的经验中,有更多的地方值得人们去贪婪地学习并致力于解决碰到的任何问题。

    62950

    单行 JS 实现移动端金钱格式的输入规则

    金钱格式检验属于很普通的需求,记得工作中第一次遇到这个需求的时候,还不太会写正则表达式,搜到了一个类似的解决方案,看着正则的文档改成了自己需要的形式。...但是用户的输入操作是任意的,只是显示提示信息,这种方式虽然可以满足要求,但是感觉不友好。 其实移动端的很多应用在输入金钱时都是屏蔽错误输入,只能输入正确的格式。...先看一看金钱格式的输入规则有哪些: 1. 不能输入空白字符及字母 2. 只能输入数字及小数点 3. 首位不能为小数点 4. 小数点只能出现一次 5. 小数点后只有两位 6....不能输入首位是 0 的多位数  看似很简单的问题,其实要考虑的很周全才可以。但是代码可以写的很简洁,我费了不少心思摸索出来的。...$/, '$1$2').replace(/^0\d{1}/g, '0'); } 时间不早了,就写这么多吧,最后贴上我在 CodePen 写的 Demo,希望能帮到有需要的人。

    2.6K50

    MetaWork:拜托,这样远程结对编程超酷的!

    话说结对编程 众所周知,结对编程(英语:Pair programming)是一种敏捷软件开发的方法,两个程序员在一个计算机上共同工作。一个人输入代码,而另一个人审查他输入的每一行代码。...其中一人讲解代码,别的只能旁听。 git仓库一推送一拉取,看注释自行理解。费时费力不说,还费电。 在CodePen等代码共享平台,发一个供大家查看。...进入跟随状态 可以看到,对方的每次键入,都可以清晰观察到。 在超过2人时,每个光标都不同,便于区分 这就是所有代码协作都会设计到的功能:实时共享代码编辑,跟随团队其他成员的光标。 5....甚至....还可以聊天摸鱼,老板以为你在认真敲代码(误 美中不足的是,目前还不支持发送图片和表情包(这个老六我真的服了)。 6. 功能点:在线多人语音/视频 这一步直接省去开视频会议了。...体验总结 若放在疫情前,我不认为在线代码协作有什么应用前景。 但在如今,远程办公变为常态,在线课堂爆发性增长。时不时就会出现电脑不在身边,需要额外置办第二台的烦恼。

    95830

    电脑维修:电脑维修必备工具整理

    测电笔一般是家庭常备的工具,主要用来测量家庭电路中的电,通过电笔可以判断家庭电路中的供电是否正常,判断零火线,判断线路是否通畅,检查各种电路是否有电。因此有一个电笔对于家庭来说非常重要。...在维修笔记本电脑中,可以用它来检查电脑的内部硬件设施,对各个部分进行测试,查看是否带电,测试我们是否可以用手进行接触,以保证使用者的人身安全。 02 万用表 ?...万用表是所有家电维修中最重要的工具,在电脑维修中也是一样的,万用表是电脑维修最重要的工具。万用表可以测量很多的东西,可以检查电压,电流,电阻以及线路是否通断。...电压对于家庭电路中的用电器工作非常重要,电压太高会烧毁电器,电压太低用电器不能正常工作,必须有稳定的电压才能保证用电器的工作。假如我们所在的地区电压不稳,我们可以自己配备一个稳压器用来稳定电压。...在用电器中有的电路中的电流是属于轻微的,在人体的接受范围之内的有的电流比较大,不能接触,我们可以通过万用表来进行测试,根据数值判断是否可以接触。这是万用表非常实用的一个功能,可以保证我们的人身安全。

    2.5K20

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

    而在每个标签页进程中,浏览器会把不同的工作交给对应的线程,比如 GUI 渲染线程负责把 HTML 渲染成可视化的 UI;JavaScript 引擎线程负责解析和运行 JavaScript 代码逻辑;定时触发器线程负责处理...Worker 内的 JavaScript 代码不能操作 DOM,可以将其理解为线程安全的。要记住这一点,这是后面讲小程序双线程模型一个重要的基础。 那么为什么微信小程序不直接使用浏览器的线程模型呢?...除此之外,由于 Worker 的线程安全特性,Worker 内的代码运行过程中不会阻塞外层的 GUI 渲染线程,两者可以并行。...保证逻辑线程安全,不允许直接操作 UI 组件 小程序更新 UI 的方式与 Vue/React 等 MVVM 框架类似,JavaScript 代码不能直接操作 DOM(仅做类比,事实上小程序中没有DOM...对一个小程序的开发者来说,在工作中遇到技术难题时的解决方案往往是基于底层原理的(甚至更直白一点,当你找工作面试时,没人会问你小程序的语法)。

    2.6K50

    意念打字破新纪录!心中想着「说话」,词就蹦跶出来,斯坦福团队出品

    识别开口说话的神经活动情况 意念打字过去一直是脑科学领域的热门研究方向,也备受社会大众关注,更早之前的实现方法是——让受试者在脑中手写字母,或是在脑中读出特定读音,再靠系统识别。...2022年3月,经当事人同意,科学家为其在脑中植入四个微电极阵列,以检测语言相关神经活动情况。 在植入后的实验中,科学家先让受试者尝试做不同动作,观察相关区域的神经活动状况。...2021年登上Nature封面的意念打字研究中,他也是一作。跟上次一样,此番他表示——将会公布研究的代码和数据。...该项工作十分关键,因为当时他们使用的方法是——让受试者在脑中“写出”字母。 除该团队,在“意念打字”这件事上,还有更多科学家在努力。...在识别方式上,他们所想到的是——让受试者在脑中默念字母NATO代码(比如α代替a,β代替b),完成逐个字母输入,平均2秒可键入一个字母,最终平均字符错误率仅6.13%。

    30620
    领券