queryselector | 易学教程

html,css,js实现的一个钟表

阅读更多关于 html,css,js实现的一个钟表

效果如图：实现代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Clock</title> <style> body { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100vw; height: 100vh; background: #2e1f27; } p{ color: #854d27; } code{ color: #f4c950; } .clock { --clock-width: 50vmin; width: var(--clock-width); height: var(--clock-width); position: relative; overflow: hidden; border: 6px solid #f4c950; border-radius: 50%; } .clock:after { content: ''; position: absolute; z-index: 10; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6px;

CSS瀹炵幇鑷畾涔夋粦鍔ㄦ潯(input)锛屽姩鎬佺洃鍚敼鍙樻暟鍊稽/span>

阅读更多关于 CSS瀹炵幇鑷畾涔夋粦鍔ㄦ潯(input)锛屽姩鎬佺洃鍚敼鍙樻暟鍊稽/span>

鏈夋椂鍊欐垜浠渶瑕佷竴涓粦鏉嗘粦鍔紝鍙互绉诲姩鐨勫悓鏃讹紝杩樿兘澶熻幏鍙栧埌浠庡皬鍒板ぇ鐨勬暟鍊硷紝濡傚浘锛欬/p> 鍚戝悗婊戝姩鍊艰秺澶э紝鑳藉鍋氬埌瀹炴椂鐩戝惉銆傛垜鐨勫彲鑳戒笉鏄渶浼樿В鍐虫柟妗堬紝浠呬緵澶у鍙傝€冿紒浠ｇ爜濡備笅锛欬/p> 杩欐槸寤虹珛涓€涓猧nput鍏冪礌锛屾渶灏忓€间负0锛屾渶澶у€间负100锛屾瘡娆″姞1锛岄粯璁ゅ€间负10. 鏍峰紡濡備笅锛 input[type=鈥渞ange鈥漖 { display: block; -webkit-appearance: none; background-color: #bdc3c7; width: 150px; height: 5px; border-radius: 5px; margin: 0 auto; outline: 0; } input[type=鈥渞ange鈥漖::-webkit-slider-thumb { -webkit-appearance: none; background-color: #49a9ee; width: 20px; height: 20px; border-radius: 50%; border: 2px solid white; cursor: pointer; transition: 0.3s ease-in-out; } input[type

document getElements系列

阅读更多关于 document getElements系列

1.getElementsByName() 方法 https://www.w3school.com.cn/jsref/met_doc_getelementsbyname.asp 2.getElementById() 方法 https://www.w3school.com.cn/jsref/met_doc_getelementbyid.asp 3.document.getElementByclassName（）方法 https://blog.csdn.net/boat_sea/article/details/80142875 4.querySelector() 方法 document.querySelector("h2, h3").style.backgroundColor = "red"; https://www.runoob.com/jsref/met-document-queryselector.html document.querySelector和document.getElementByClassName的区别 https://blog.csdn.net/u013718730/article/details/90474272 详解document.getElementById 和 document.querySelector的区别 https://blog.csdn

JS Web APIs-day06

阅读更多关于 JS Web APIs-day06

JS Web APIs-day06 1.1. 动画函数封装 1.1.1 缓动效果原理缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来思路：让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。核心算法： (目标值 - 现在的位置) / 10 做为每次移动的距离步长停止的条件是：让当前盒子位置等于目标位置就停止定时器注意步长值需要取整 1.1.2 动画函数多个目标值之间移动可以让动画函数从 800 移动到 500。当我们点击按钮时候，判断步长是正值还是负值 1.如果是正值，则步长往大了取整 2.如果是负值，则步长向小了取整 < title > Document < / title > < style > div { position : absolute ; left : 0 ; width : 100 px ; height : 100 px ; background - color : pink ; } span { position : absolute ; left : 0 ; top : 200 px ; display : block ; width : 150 px ; height : 150 px ; background - color : purple ; } < / style > < / head > < body > <

JavaScript练习-情话生成器

阅读更多关于 JavaScript练习-情话生成器

简介善于学习知识，然后利用到生活的方方面面应该是每个程序员都想过的。对于我这种渣渣程序员也不例外。学了JavaScript，碰巧在微信群里看到有网友发了这两个网站。渣男: 说话的艺术 https://lovelive.tools/ 骂人宝典 https://nmsl.shadiao.app/ 这两个网站都是调用本身存储的语句然后生成。想了一下用JavaScript实现其实也非常容易。在网络上总是有各种各样的新鲜项目，大牛的思维真厉害！基础知识 HTML DOM querySelector() 方法作用：返回文档中匹配指定 CSS 选择器的一个元素。语法：document.querySelector(CSS selectors) ## 获取文档中 id="demo" 的元素： document.querySelector("#demo"); ## 获取文档中第一个 <p> 元素： document.querySelector("p"); ## 获取文档中 class="example" 的第一个元素: document.querySelector(".example"); ## 获取文档中 class="example" 的第一个 <p> 元素: document.querySelector("p.example"); ## 获取文档中有 "target" 属性的第一个

javascript原生dom的那些事儿

阅读更多关于 javascript原生dom的那些事儿

今天是 2019 年，今天的世界由框架统治。尽管诸如 Angular 和 React 之类的框架让 jQuery 的热度大减，但它仍在被 6600 万个网站所使用，这是一个惊人的数字，约占全球所有网站的 74％。 jQuery 的遗产给人留下了深刻的印象，它给标准带来的影响力有一个很好的例子，那就是模仿 jQuery 的 $ 函数的 querySelector 和 query-SelectorAll 方法。讽刺的是，这两种方法可能是 jQuery 热度下降的最大元凶，因为这两种方法替代了 jQuery 最常用的功能：轻松选择 DOM 元素。但是原生 DOM API 很冗长。我的意思是说，一边是 $，另一边却是 document.query-SelectorAll。这就是让开发人员抵触原生 DOM API 的原因所在。但实际上这完全没必要。原生 DOM API 很棒，而且非常有用。是的，它很冗长，但这是因为它们是低级构建块，上面是要构建抽象的。而且如果你真的不想多打字的话：所有现代编辑器和 IDE 都提供出色的代码完成功能。你也可以为最常用的功能加上别名，我会在后文给出示例。我们开始吧！选择元素单元素要使用任何有效的 CSS 选择器选择单个元素，请输入： document.querySelector(/* your selector */)

JavaScript 函数工具

阅读更多关于 JavaScript 函数工具

组 all：布尔全等判断 const all = (arr, fn = Boolean) => arr.every(fn); all([4, 2, 3], x => x > 1); // true all([1, 2, 3]); // true allEqual：检查数组各项相等 const allEqual = arr => arr.every(val => val === arr[0]); allEqual([1, 2, 3, 4, 5, 6]); // false allEqual([1, 1, 1, 1]); // true approximatelyEqual：约等于 const approximatelyEqual = (v1, v2, epsilon = 0.001) => Math.abs(v1 - v2) < epsilon; approximatelyEqual(Math.PI / 2.0, 1.5708); // true arrayToCSV：数组转CSV格式（带空格的字符串） const arrayToCSV = (arr, delimiter = ',') => arr.map(v => v.map(x => `"${x}"`).join(delimiter)).join('\n'); arrayToCSV([['a', 'b'], ['c', 'd']

百度前端学院第19天作业

阅读更多关于百度前端学院第19天作业

这是别人的，转载自 https://www.jianshu.com/p/40b9c20ce34a 一、HTML DOM （文档对象模型）当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被构造为对象的树。 HTML代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Simple DOM example</title> </head> <body> <section> <img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."> <p>Here we will add a link to the <a href="https://www.mozilla.org/">Mozilla homepage</a> </p> </section> </body> </html> DOM结构： image.png 这里你可以看到，文档中每个元素和文本在树中都有它们自己的入口 —

前端之HTML

阅读更多关于前端之HTML

HTML是HyperText Markup Language的缩写，中文翻译为超文本标识语言。使用HTML元素编写的文档称为HTML文档，目前最新版本是5.0 。 HTML5的开发是由三个重要组织负责的，具体如下：　　 WHATWG :由Apple,Mozilla,Google,Opera等浏览器厂商组成，成立于2004年。WHATWG开发HTML和Web应用的API，同时为各浏览器厂商以及其他有意向的组织提供开放式合作。　　 W3C :W3C管辖的HTML工作组，目前负责发布HTML5规范。　　 IETF (因特网工程任务组):该任务组下辖HTTP等负责Internet协议的团队。HTML5定义的一种新API(WebSocket API)依赖于新的WebSocket协议，IETF工作组负责开发该协议。 HTMl的优势： (1)跨浏览器的兼容性 (2)增强交互功能 (3)更好的存储技术; HTML5中提供了本地存储功能。其中将比较老的技术cookie和客户端数据库融合。但是它比cookie更好用，因为支持多个存储，HTML5存储技术拥有更好的安全和性能，即使浏览器关闭也可以保存并且所有主流浏览器都支持。 (4)用户优先; (5)更简单的代码; 以浏览器原生能力替代复杂的JavaScript代码; 新的简化的DOCTYPE; 新的简化的字符集声明;

使用querySelector添加移除style和class

阅读更多关于使用querySelector添加移除style和class

document.querySelector(selector).style.styleName = 样式对dom节点添加一个样式 document.querySelector(".name").style.display = "block"; document.querySelector(".nameFa").classList.add('name'); 对dom节点添加一个class document.querySelector(".name").style.display = "block"; document.querySelector(".nameFa").classList.remove('name'); 对dom节点移除一个class 来源： https://www.cnblogs.com/autoXingJY/p/11696058.html

订阅 queryselector