纯前端语言编写音乐播放器 app效果图： 播放器实现的功能 列表点击播放 自动循环播放 上一首 下一首 暂停、继续 随机播放 单曲循环 本文的音乐资源 http://www.softeem.xin:8888...-- 当前播放的歌曲名 --> 爱音乐 <!...position: fixed; top:10.25rem; right: 0.25rem; z-index: 1; color:#fff; /*设置字体图标颜色...，m是歌曲 musics.forEach((m, i) => { //每读取到一条数据创建一个dom节点 html
，第二、三个参数是弹窗的大小，第四、五个参数是弹窗弹出的位置（这是一个直角坐标），不设置默认为0,0也就是左上角 1.2window的子对象 1.2.1navigator对象（了解） 浏览器对象，通过这个对象可以判定用户所使用的浏览器...> innerText和innerHTML divEle.innerText//获取文本 "div1 span1 in div p in div span2 in div" divEle.innerHTML...如： obj.style.margin obj.style.width obj.style.left obj.style.position 对其属性值进行更改直接对象点属性等于属性值即可。...function () { this.innerText="呵呵"; } 示例1：用按钮控制背景颜色的切换 <meta charset="UTF-8...} 变色</button
CSS变量的实质应用 示例1 - 管理颜色 到目前为止，使用CSS变量的最佳候选者之一是管理网页的颜色。我们可以将它们放在变量中，而不是一遍又一遍地复制和粘贴相同的颜色。...如果有人要求我们更新特定的绿色阴影或使所有按钮变为红色而不是蓝色，那么只需更改该CSS变量的值，就是这样。您不必搜索和替换该颜色的所有实例。...示例2 - 删除重复的代码 通常，您需要构建一些不同的组件变体。相同的基本样式，略有不同。让我们使用一些颜色不同的按钮。典型的解决方案是创建一个基类，比如.btn并添加变体类。..."btn blue">HMOE 示例3 - 使一些属性可读 如果我们想要创建更复杂的属性值的快捷方式，CSS vars非常适合使用，因此我们不必记住它。...因此，如果多次声明自定义属性，则css文件中最低的定义将覆盖其上方的定义。下面的示例演示了动态操作用户操作的属性是多么容易，同时仍然保持代码清晰简洁。
常用元素的属性操作 1. innerText、 innerhTML 改变元素内容 2. src、href 3. id、alt、title 获取属性的值 元素对象.属性名 设置属性的值 元素对象....元素对象.属性名 设置属性的值 元素对象.属性名 = 值 表单元素中有一些属性如：disabled、checked、selected，元素对象的这些属性的值是布尔型。...样式属性操作 我们可以通过 JS 修改元素的大小、颜色、位置等样式。...因为class是关键字，所有使用className。...2. class因为是个保留字，因此使用className来操作元素类名属性 className 会直接更改元素的类名，会覆盖原先的类名。
大家好，又见面了，我是你们的朋友全栈君。 文章目录 前言 一、插入背景 二、头部 1.导航栏 2. 优化导航栏 3 时间 4....图标使用的是font-awesome库里的图。...优化导航栏 接下来给导航栏再添加一个点击时的背景，显得更好看一些 我们在header部分中的列表内添加一个用于存放该背景 设置添加的导航栏背景样式。...important; } 添加子节点 由于是便签嘛，所以想着应该需要记录写下便签的时间，所以我们首先，获取时间，然后添加便签的操作使用.append添加子节点就好啦。代码有注释，不懂得可以留言！
.属性名 = 值 表单元素中有一些属性如：disabled、checked、selected，元素对象的这些属性的值是布尔型。...样式属性操作 我们可以通过 JS 修改元素的大小、颜色、位置等样式。...因为class是关键字，所有使用className。...2. class因为是个保留字，因此使用className来操作元素类名属性 3. className 会直接更改元素的类名，会覆盖原先的类名。...使用 element.style 获得修改元素样式 如果样式比较少 或者 功能简单的情况下使用 var test = document.querySelector('div');
我一般也会根据项目情况使用它们。 它们非常有用且易于使用，但是前端开发人员通常可能会误用或误解它们。 简介 CSS变量是在CSS文档中定义的值，其目的是可重用性并减少CSS值中的冗余。...想象一下，对于一个大型项目，不同的CSS文件，如果哪天被要求更改颜色。 我们可以做的最好快的方式就是“查找并替换”。 使用CSS变量，可以更快解决这个问题。 定义变量名需要用--开头。...我能想到的最简单的示例是更改间距值。...如果我们想根据元素调整alpha值，这样做可以提供灵活性。唯一的缺点是无法使用DevTools颜色选择器来调整rgba值。 另一个例子是将它与background属性一起使用。...看到颜色 使用CSS变量时，看到颜色或背景值的视觉指示器是否有用？ Chrome和Edge证明了这一点。 计算值 要查看CSS变量的计算值，只要将鼠标悬停或单击即可。
使用 javascript 创建游戏是最有趣的学习方式。它会让你保持动力，这对于学习 Web 开发等复杂技能至关重要。...此外，你可以和你的朋友一起玩，或者只是向他们展示你做的小东西，他们也会感到很有趣的。在今天的博文中，我们将使用 HTML、CSS 和 Javascript 创建一个井字游戏。...为此，我创建两个实用程序类。玩家 X 的颜色为绿色，而玩家 O 的颜色为蓝色。...接下来，我们将使用三元表达式来更改当前玩家的值。如果是X，它将是O否则它将是X。现在，我们改变了我们用户的价值，我们需要更新innerText的playerDisplay，并应用新的播放器类的。...我们必须做的最后一件事是遍历图块并将innerText 设置回空字符串，并从图块中删除任何特定于玩家的类。
事件概述 JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。 简单理解： 触发--- 响应机制。...会保留空格和换行 设置内容时的区别： innerText不会识别html，而innerHTML会识别 案例代码 我是文字...获取属性的值 元素对象.属性名 设置属性的值 元素对象.属性名 = 值 表单元素中有一些属性如：disabled、checked、selected，元素对象的这些属性的值是布尔型。...因为class是关键字，所有使用className。..."message">请输入6~16位密码 // 首先判断的事件是表单失去焦点 onblur // 如果输入正确则提示正确的信息颜色为绿色小图标变化
返回指定元素的第一个子元素节点 lastElementChild 返回指定元素的最后一个子元素节点 名称 描述 getAttribute() 返回元素一个指定的属性值 直接使用属性名称获取 适用于部分属性...，即修改当前li元素的背景色，li元素是button元素的父节点，这里需要使用DOM属性获取元素父级节点 获取div内所有p元素和span元素，请补全横线处代码 ...如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性 通过属性名更改属性 对元素属性重新赋值可更改对应属性值 DOM添加 名称 描述 createElement(tagName) 创建一个由标签名称...________(lastItem) creatElement appendchild # 由题知，添加的为一个新li元素，所以需要创建元素，第一空应使用节点创建方法 # 由于需要在...item = document.querySelector('span') item.classList.remove('________') loading span元素的文字颜色是红色
主要介绍了JavaScript定时器设置、使用与倒计时案例,详细分析了javascript定时器的设置、取消、循环调用并附带一个倒计时功能应用案例,需要的朋友可以参考下： 运行效果图： 配套视频课程...window.onload = function () { // 1.1 默认展示为绿色 var defaultColor = 'green'; // 1.2 通过调用【更改颜色...，初始化值为 空 var timeout = null; // 定义临时变量 number 来存储 倒计时的数字,用于拼接 09 var number = null;...定义方法: 更改颜色 function changeColor(lightColor) { // 2.1 因为不确定传入的颜色是什么颜色，所以需要做个判断: if...(lightColor == 'green'){ //alert('传入颜色成功，颜色刚好是:' + lightColor) // 绿色倒计时 时长为 35s
如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性 通过属性名更改属性 对元素属性重新赋值可更改对应属性值 2....________(lastItem) 答案：createElement，appendChild 添加的为一个新li元素，所以需要创建元素，第一空应使用节点创建方法createElement...，使用style属性更改样式时，如果原CSS属性包含“-”，则需转换命名形式，此处应为修改命名形式后的背景颜色属性名。...使用classList中的remove方法。 （5）span元素的文字颜色是红色。...，需要使用只获取文本内容的DOM属性innerText。
, 文本中包含的标签不会被解析 let num = document.querySelector('div') num.innerText = '你好' num.innerText =...可以通过 JS 设置/修改标签元素的样式属性 比如通过 轮播图小圆点自动更换颜色样式 点击按钮可以滚动图片，这是移动的图片的位置 left 等等 1....是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名 可以同时修改多个样式 直接使用 className 赋值会覆盖以前的类名 // 使用ClassName修改样式 可修改多个样式 但会覆盖以前类名...' 表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代 表移除了该属性 比如： disabled、checked、selected <button...网页轮播图效果 获取元素 (图片和文字) 设置定时器函数 设置一个变量++ 更改图片张数 更改文字信息 处理图片自动复原从头播放 如果图片播放到最后一张就是第9张 则把变量重置为0 注意逻辑代码写到图片和文字变化的前面
下面呢，我们就以我相对熟悉的技术(Vite+React)来演示如何在项目中使用Tailwind CSS。 1. 创建项目 我们是用Vite来创建一个React+TS项目。...: rgba(247, 186, 30, 0.6); } 后期我们想要更改项目的颜色方案，我们需要找到此颜色的每个实例并在「所有地方」进行更新。...: "rgba(247, 186, 30, 0.6)", }, }, }; 在添加了一个名为primary的新颜色后，我们可以在整个应用程序中使用bg-primary设置背景颜色，或者使用...text-primary设置文本颜色： 标准按钮 第一个选项卡 这样...，当我们想要更改项目中的颜色方案时，我们只需在一个地方进行颜色替换：tailwind.config.js。
使用SASS做个可自定义主题的网页 Posted November 28, 2018 本篇的代码已托管在 jackeyGao / sass-theme ---- Sass 是对 CSS 的扩展，让 CSS...CSS 比较新的标准中增加 var() 变量功能， 这个可以非常方便的让我们切换 css 属性值， 从而达到切换主题的功能。 但只有只写现代化webkit内核浏览器才支持， IE 不支持。...介绍 切换主题我们仅举例最简单的例子， 通过点击相应的主题， 来改变一个区域(div)的背景颜色和文字颜色. 需要更改的 div: HTML <!...是一组 key: value 的集合. 这里我们主要存储我们的主题的配置....可以看到我们定义了六个主题， 每个主题我们都选择了一个背景颜色(bg)和适配于背景颜色的文字颜色(color).
[1]; //焦点的div var arr = my$("arr"); var pic = 0;//全局变量 //创建小按钮----根据ul中的li个数 for (var i =...属性IE中支持 * textContent火狐中支持 * dvObj.innerText="您好";设置innerText的值 * console.log(dvObj.innerText);获取innerText...的值 * 因为上述原因,inerText有时候需要设置值，有时候需要获取值 * 所以,需要写一个兼容的代码能在火狐中使用,也可以在IE中使用 * * * */ /* *设置innerText...}else{ element.textContent=content; } } /* * 获取innerText属性的值 * element 要获取的元素 * 返回的是该元素的...什么是闭包 闭包是在另一个作用域内创建一个封闭的词法范围 function add(n){ var num = n return function addTo(x) { return x + num
第一个参数是自定义属性名称。第二个参数是可选的，但必须是声明值。这个声明值的功能是当自定义属性值没有被定义时，作为一个备用值或默认值被应用。...倘若值是无效的或者未定义的，如果属性是可继承的，CSS解析器就会使用继承的值（比如说color或font）。...但是内的文本或是其他元素内的文本仍然是深灰色。 也可以使用style属性来设置自定义属性的值。比如说，style="--brand-color: #9a09af" 。...RGB系统用红、绿、蓝的比例来表达颜色，而HSL则使用一个颜色圈，色相是该圈上的一个度数位置，而色调或阴影则用饱和度和亮度值来定义。饱和度的范围从0%到100%，其中0%是灰色，100%是全色。...使用自定义属性，我们可以： 创建可重用的、主题化的组件 轻松调整内边距、外边距以及排版，以适应各种视口尺寸和媒体 改进CSS颜色值的一致性 变量有一系列的应用，在基于组件的设计系统中特别有用。
是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部，瀑布流的主要特性便是错落有致，定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式...实例 主体思路是记录每一列的高度，父容器相对定位，成员绝对定位，利用top与left属性控制位置，每次新增加成员时找到高度最低的那个将成员置于其下方，即可实现瀑布流布局。...如果不需要动态加入成员，而只是一次性加载供展示用，那么可以考虑使用flex布局将容器设置为flex-direction: column;以及flex-wrap: wrap;并给予容器一个合适的高度来实现...，还可以使用CSS3新增的column-*多列布局来实现，这两种也就是纯CSS实现的瀑布流布局的方式，但是由于这两种方式都是将成员纵向排列，并不适合需要动态插入成员的布局，当需要动态插入成员时还是需要使用...width: 300, // 定宽 color: colorList[random(0,colorList.length)] // 随机颜色
事件概述 JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。 简单理解： 触发---响应机制。...('div'); // div.innerText = '今天是： 2019'; // 2. innerHTML 识别html标签 W3C...表单元素的属性操作 获取属性的值 元素对象.属性名 设置属性的值 元素对象.属性名 = 值 表单元素中有一些属性如：disabled、checked、selected，元素对象的这些属性的值是布尔型...因为class是关键字，所有使用className。...我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况 // 3.
领取专属 10元无门槛券
手把手带您无忧上云
