开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在Codepen中工作的JS在我的html页面上不工作

在Codepen中工作的JS在我的HTML页面上不工作可能是由于以下几个原因：

代码依赖问题：在Codepen中，你可能使用了一些外部库或框架，但在你的HTML页面中没有正确引入这些依赖项。请确保在HTML页面中正确引入所需的外部库或框架，并确保它们的版本与Codepen中使用的版本相同。
脚本位置问题：在HTML页面中，确保你的JS代码位于正确的位置。通常，将JS代码放在<script>标签中，并将其放置在HTML页面的<body>标签的末尾，以确保在DOM加载完成后执行JS代码。
元素选择器问题：在Codepen中，你可能使用了一些特定的元素选择器来操作HTML元素，但在你的HTML页面中没有相应的元素。请检查你的JS代码中的元素选择器，并确保在HTML页面中存在相应的元素。
浏览器兼容性问题：在Codepen中，你可能使用了一些浏览器特定的功能或语法，但在你的HTML页面中，你所使用的浏览器可能不支持这些功能或语法。请确保你的HTML页面在所使用的浏览器中能够正常工作。

如果以上解决方法都无效，可以尝试使用浏览器的开发者工具来调试你的HTML页面，查看是否有任何错误消息或警告，以帮助你找到问题所在。此外，你还可以参考腾讯云的云计算产品中与前端开发相关的产品，如腾讯云CDN（内容分发网络）来加速页面加载速度，腾讯云Web应用防火墙（WAF）来保护网站安全等。

相关搜索:HTML代码可以在codepen中工作，但不能在其他文本编辑器中工作 javascript toFixed在我的计算中不工作 JQuery/JS脚本不能在html中运行(在Codepen中工作)WAV音频格式在HTML5页面上不工作为什么我在“我的世界”1.16.5中的食谱不工作？为什么我的按钮在Electron JS中不工作？代码在Codepen中可以工作，但在我的电脑中不能工作在CloudHub设置中工作的属性在属性文件中不工作在mysql中，我的distinct查询不工作？我在Codepen上的一个项目不再工作了

相关搜索:

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

有帮助

没帮助

相关·内容

Github 项目推荐 | 基于 Three.js 的 web 3D 地球数据可视化的开源组件库

Gio.js 是一个基于Three.js的web 3D地球数据可视化的开源组件库。使用Gio.js的网页应用开发者，可以快速地以申明的方式创建自定义的Web3D数据可视化模型，添加数据，并且将其作为一个组件整合到自己的应用中。

02

原来“神笔马良”的那根“笔”也可以写代码

HTML5学堂：在大家都羡慕“神笔马良”拥有那支无所不能的笔时，在前端开发中，也出现了一支很神奇的“笔”——CodePen，顾名思义，code+pen，即是代码笔。它的出现可以说解决了使用手机查看代码的不方便问题，为技术文章的阅读提供了便利。为此以后HTML5学堂的文章也会把代码案例放在这个工具中，具体的使用，大家可以去即可进入CodePen（http://codepen.io/majiang/）来查看完整的代码案例。不多说，先介绍工具吧~~~ CodePen是什么呢？顾名思义就是code+pen =

05

phonegap + Framework7 之 ios 推送跳转测试

先说说项目情况：使用phonegap创建的ios项目，然后在使用html + css开发网页中又使用了一个框架Framework7(Framework7是一个构建仿原生ios和android应用的框架)。造成把网站打包成app之后，只有一个入口主页面（假设该主页面为index.html）, 然后在index.html页面引用所有要用的css和js。其他html页面只有部分html标签，不引用css和js，其他html页面的展示都是通过主页面index.html的链接进行跳转到那里！

03

曾经豪言“指哪爬哪”，如今被一个JS狠狠教做人

很久没有写有关爬虫相关的内容了，今天给大家分享一下最近工作中遇到的一个与JavaScript相关的数据采集案例。

01

js中几种实用的跨域方法原理详解

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。

01

js中几种实用的跨域方法原理详解

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被

08

js中三种弹出框[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。 Jetbrains全系列IDE使用 1年只要46元售后保障童叟无欺

05

这些年我开源的几个小项目

笔者是一个平平无奇的前端打工人，没有参与过啥热门开源项目的共建，所以每次说自己热爱开源都很心虚，充其量就是热爱使用开源项目，不过这两年来也陆续做了几个小项目，虽然只有时不时的来几个star，不过也给我安静的github平添了几分人气，本文就给大家推荐一下笔者的开源项目，如果觉得可以欢迎给个关注~

02

CSS 面试要点：定位(Positioning)

默认情况下，块级元素的内容宽度就是父元素宽的 100%，且与其内容一样高。内联元素的宽高与内容宽高一样。不能对内联元素设置宽度或高度——它们只是位于块级元素的内容中。如果要以这种方式控制内联元素的大小，则需要将其设置为类似块级元素 display: block。

01

用 JavaScript 实现酷炫的粒子追踪动画

你是否曾经想过用花哨的、闪闪发光的粒子动画分吸引你网站用户的注意力，而同时又在后台加载一些数据呢？幸运的是，没有必要用诸如 Three.js 之类的 3D 库进行非常深入的图形编程。相反，你需要的是 CSS 和 JavaScript 的一些基本知识以及轻便的动画库（例如 anime.js）。最后我们应该得到以下结果：

02

解决ajax跨域请求（总结）

ajax跨域请求，目前已用几种方法实现： 1）用原生js的xhr对象实现。 var url="http://freegeoip.net/json/"; //创建xhr对象 function createCORSXhr(url,method){ var xhr=new XMLHttpRequest(); if("withCred

08

又一个前端框架 - dagger.js

推荐一个轻量完备的开源前端框架：dagger.js：https://daggerjs.org

02

APP概括

移动端：运行在移动设备上的产品移动设备：手机平板我们做的页面只适用于安卓系统和ios系统，诺基亚是Windows Phone系统不用管

02

JavaScript中的三种弹出框

JavaScript中有三种弹出框，alert()，confirm(), prompt()。

00

Web 隐藏技术：几中隐藏 Web 中的元素方法及优缺点

在 Web 开发中出于多种原因，我们需要隐藏元素。例如，一个按钮应该在移动中可见，而在桌面视口中隐藏。或者，在移动设备上隐藏但要在桌面上显示的导航元素。隐藏元素时有三种不同的状态：

03

SpringBoot框架：第二章：SpringBoot中static和templates二个目录下的页面和静态资源访问的三个常见问题

在resources建立一个static目录和index.htm静态文件，访问地址 http://localhost:8080/index.html

01

JavaWeb项目为什么我们要放弃JSP？为什么要前后端解耦？为什么要动静分离？[通俗易懂]

以前的项目大多数都是java程序猿又当爹又当妈，又搞前端（ajax/jquery/js/html/css等等），又搞后端（java/mysql/oracle等等）。

04

springboot项目中静态资源的访问

springboot项目中静态资源的根目录是: src/main/resources/static 静态资源如html页面、图片、js、css等都放在此文件夹或该文件夹的子文件夹下。比如在sta

Java Web前端基础

Java Web的学习是需要一定的计算机基础的，主要有前端基础和Java基础和一定的网络基础，这些基础知识还是需要掌握到一定的程度的。

03

在页面中直接嵌入vue-sfc的方法

我们知道，Vue推荐使用单文件组件（Single File Component，简称SFC)，可以说SFC是Vue框架的特色。

04

Web页面组成

https://blog.csdn.net/chenmozhe22/article/details/80035871

02

webpack4：css/sass编译优化分离，处理引用资源

在上篇中，解决了webpack4关于多页面及分离第三方库js和共用自定义库js的配置，本篇将以此为基础继续配置css引入、分离等功能。

02

8 个 DOM 功能

你肯定用 addEventListener() 处理过将事件附加到 Web 文档中的元素。通常 addEventListener() 调用看起来像这样：

02

跨域请求数据解决方案整理

跨域请求数据解决方案主要有如下解决方法： JSONP方式表单POST方式服务器代理 Html5的XDomainRequest Flash request 分开说明：一、JSONP：直观的理解：就是在客户端动态注册一个函数 function a(data)，然后将函数名传到服务器，服务器返回一个a({/*json*/})到客户端运行,这样就调用客户端的 function a(data),从而实现了跨域. 诞生背景： 1、Ajax直接请求普通文件存在跨域无权访问的问题，甭管是静态页面、动态网页、web

07

程序员最喜欢用的在线代码编译器，什么？你竟然不知道！可以在网页敲代码，运行调试！

支持 20+ 种编程语言，页面上没有杂七杂八的东西，非常简约，非常干净，另外，它上面的代码段还可以嵌入到网页之中。

03

明确告诉你，眼界不够，JS再好也成不了好前端

一般来讲，从陌生到基本了解一个新的行业，至少需要二年。你在任何一个行业工作超过二年之后，才能算基本了解这个行业的方方面面。前端开发行业，也不例外，从零开始到真正熟悉，至少需要二年时间。众多的招聘简单所要求的至少二年工作经验，也从侧面验证了这一点。但是，有没有想过，为什么非要二年呢？这二年时间能多出来什么呢？简单的讲，“前端行业的大局观”。就像我昨天写的文章一样，许多外行人对于前端开发的理解，只有二个方面，1，工资高；2，入门门槛低。只要搞定html，css，js就可以。所以他们的眼睛只是订着htm

08

如何简便快捷使用python抓爬网页动态加载的数据

最近朋友需要让我帮忙设计能抓取网页特定数据的爬虫，我原以为这种程序实现很简单，只要通过相应的url获得html页面代码，然后解析html获得所需数据即可。但在实践时发现我原来想的太简单，页面上有很多数据根本就无法单纯从html源码中抓取，因为页面展现的很多数据其实是js代码运行时通过ajax的从远程服务器获取后才动态加载页面中，因此无法简单的通过读取html源码获得所需数据。

01

再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载

浏览器的多线程中，有的线程负责加载资源，有的线程负责执行脚本，有的线程负责渲染界面，有的线程负责轮询、监听用户事件。

Ajax创建对象以及不同浏览器中的兼容性

1.在传统得到web应用中，采用的都是同步的交互方式，为了等待服务器的响应，可能需要较长的时间，客户体验有时候很不好，而Ajax可以实现异步的交互方式。在交互较多，局部刷新和按需取数据（频繁读取数据和数据分类良好）的情况下使用比较频繁。但是也有自身的缺点，Ajax大量使用javascript和Ajax引擎，这需要浏览器的支持。但是各个浏览器提供的创建Ajax的方式不同，使得我们需要测试各个浏览器的兼容性，这一点比较麻烦。虽然代码比较长，但是固定的，可以单独摘出来。另一方面对于flash等还不支持Ajax，现在手机也不能使用，但是很明显，这只是现在不能，以后一定可以的~

04

现代Web开发教程系列_02

引言本文从一个很小的前端工程说起，慢慢推导出我目前多个项目前端实践的工程结构。为Web前端项目建工程 Web工程需要建工程吗？不是建个目录就可以开搞的吗？你一定会这么问。但事实上面对越来越复杂的前端页面逻辑，真的有必要好好组织一下前端的代码结构。同时前端代码的依赖管理、编译方式真的需要考量一下。 mkdir -p demo1 cd demo1 npm install # 回答一系列回答后，一个npm工程就建好了创建前端源代码目录及编译后产物目录从Java带来的习惯，我是不习惯将源代码与编译后的产物放

07

2022年比较有前景的行业_2021idea创建web项目

IDE 是集成开发环境（Integrated Development Environment）的缩写。在以前，开发者一般是将 IDE 下载到本地，安装、配置后再开始开发。但随着 Web 技术的持续发展，就像绝大部分办公者已经在工作中使用在线文档来代替传统 Office 软件一样，越来越多的开发者开始尝试在线编写代码。结合云计算和容器的能力，使用 Web IDE 来开发应用程序更加方便、快捷，也拥有更强的扩展性。

03

如何将 JavaScript 文件引入到 HTML

JavaScript，也缩写为 JS，是一种用于 Web 开发的编程语言。作为与 HTML 和 CSS 一起使用的 Web 核心技术之一，JavaScript 用于使网页具有交互性并构建 Web 应用程序。遵循通用显示标准的现代 Web 浏览器通过内置引擎支持 JavaScript，无需额外的插件。

04

前后端分离原理

前后端分离已成为互联网项目开发的业界标准使用方式，通过Nginx+Tomcat的方式（也可以中间加一个Node.js）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。核心思想是前端HTML页面通过Ajax调用后端的restuful api接口并使用json数据进行交互。

06

面试官：说说你对前后端分离的理解

前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。

03

为什么要前后端分离？有什么优缺点

前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。

04

JavaScript预备知识

编译原理 : https://blog.csdn.net/z929118967/article/details/123778003在解释型语言中，代码自上而下运行，且实时返回运行结果。

01

如何使用Vue.js和Axios来显示API中的数据

Vue.js是一个用于构建用户界面的前端JavaScript框架。它的设计从头开始逐步采用，并与其他图书馆或现有项目完美集成。这使它非常适合小型项目以及与其他工具和库一起使用的复杂单页应用程序。

02

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

我参加了一个技术交流大会，看到一些大佬演示 Web Components，感觉它非常漂亮，但是好像有点复杂过头了 —— 用近千行的 JavaScript 代码来表示个位数行数的 HTML 代码。大佬们总是不可避免地掩盖 Web Components 需要大量的 JavaScript 代码才能正常运行的这个问题，或者深入一些看起来无关紧要的细节。到了这个环节我的目光就开始变得呆滞，开始发呆。

02

Angular JS + Express JS入门搭建网站

06

为什么要前后端分离？有什么优缺点

前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。

06

一小时速成html

插件:emmet，自动补全代码，提高前端编程的效率。在VSCode中开启:vscode不支持emmet快捷输入了，该如何开启？ (newsn.net)，参考学习教程Emmet-HTML/CSS代码自动补全语法 (z01.com)。

02

程序员最喜欢用的在线IDE代码编译器，什么？你竟然不知道！

支持 20+ 种编程语言，页面上没有杂七杂八的东西，非常简约，非常干净，另外，它上面的代码段还可以嵌入到网页之中。

02

20个为前端开发者准备的文档和指南

1.Keyboard Event Viewer(键盘事件可视器) 它是一个可配置的交互式的工具,可以让你观察键盘事件的数据,它可以像在UI事件说明书里显示离线的事件信息那样显示原始信息。 2. jQu

零基础想要学好前端开发，必须先“学好切图做静态页面”

开头第一句，这个文章针对的是零基础学员。 WEB前端开发，是用JS来操作DOM和DATA，响应用户的操作，实现前端的交互，包括更新view和ui以及更多。 Dom，就是HTML页面。你点击一个DOM元素，触发一个JS事件，请求一个API接口，返回一个JSON，调用tpl或其它，生成或更新DOM。等待下一次事件触发。这算是一个简单版的交互流程。很多零基础的同学，被WEB前端职位的高薪所吸引，向往之，追求之。付出了很多的时间，精力，也确实是学会了HTML,CSS,JS,JQ。但对“WEB前端开发”却依然是不

06

如何在 Vue.js 中引入原子设计？

本文为翻译文章，原文链接： https://medium.com/@9haroon_dev/introducing-atomic-design-in-vue-js-a9e873637a3e

02

写 JSP 的痛点，真的非常痛！

前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。

01

Wijmo 更优美的jQuery UI部件集：从wijwizard和wijpager开始

本文演示了如何使用Wijmo的其中两个部件，wijwizard 以及 wijpager。如果你期望看到Wijmo的其他文章，请参阅Wijmo 更优美的jQuery UI部件集：发现 Wijmo。在这个快速入门，你将学习如何向一个HTML工程添加众多Wijmo部件中的两个，wijwizard 以及 wijpager。你将从添加并且自定义一个wijwizard部件入手，可以了解到一些独特的功能，然后你将学习如何通过连接到wijpager部件对wijwizard添加分页导航支持。第一步是创建一个HTML页面，

07

用机器学习搞艺术，谷歌 Megenta 项目集锦（附 Github）

雷锋网 AI 研习社按：本文为雷锋字幕组编译的技术博客，原文 Make Music and Art Using Machine Learning，作者 magenta。

02

用机器学习搞艺术，谷歌 Megenta 项目集锦（附 Github）

雷锋网 AI 研习社按：本文为雷锋字幕组编译的技术博客，原文 Make Music and Art Using Machine Learning，作者 magenta。

02

为什么要前后端分离？有什么优缺点？

前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭