Skip to main content

moregeek program

【js】js的历史:认识js的来龙去脉_wx63311348dcab6的博客-多极客编程

文章目录​​1 JavaScript 历史​​​​2 JavaScript是什么?​​​​3 JavaScript的作用​​​​4 Html/Css/Js的关系​​​​4.1Html/CSS 标记语言---描述类语言​​​​4.2 Js脚本语言 -- 编程类语言​​​​4.3 执行的区别​​​​5 JS的组成​​​​5.1 ECMAScript​​​​5.2 Dom​​​​5.3 Bom​​​​6

Read More

【web前瞻】css 容器查询来了,你不能错过的10个精彩案例分享!_品味前端的博客-多极客编程

导读:就像我们开始通过媒体查询构建响应式网站时一样,现在,CSS容器查询也终于来了!这项功能目前已经在 Google Chrome (105) 和 Safari 16 中得到支持。本文将解释容器查询的工作原理、我们如何使用它们以及语法是什么样的,并分享一些实际的使用示例来帮助你更好地理解它。介绍在设计组件时,我们倾向于添加不同的样式,并根据 ​​CSS​​ 类或视口大小更改它们。假设我们有一个卡片

Read More

使用vue的transition组件写一个数字滚动竟然如此简单_qq6310682252356的博客-多极客编程

使用vue的transition组件,来实现一个数字滚动效果,其实不仅可以是数字滚动,还可以是文字、段落滚动,代码片段使用了定位做的,还可以使用transform,只是一种思路,不限制方案。布局没有别人写的东西炫酷,我都不知道怎么写内容了,布局没啥好讲的,我这里会有一个容器包裹内部滚动的数字,主要是用于隐藏内部滚动的数字超出的部分,代码如下:<div class="roll-containe

Read More

js:监听页面滚动scroll,实现阅读进度条_彭世瑜的博客-多极客编程

实现原理 // 距顶部 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 可视区高度 var clientHeight = document.documentElement.clientHeight || document.body.clientHeight; // 滚动条总高度

Read More

那些你不知道的炫酷按钮交互效果_南城前端的博客-多极客编程

在日常开发中肯定都遇到过不少有按钮交互的地方,但你有用到什么炫酷的交互效果吗?日常开发中想必最多的就是点击按钮背景文字变色,阴影,按钮按下,加载中之类的效果,相对都比较平平无奇,都是一些按部就班的效果。一个好的前端页面在实现设计图的同时,如果也有极强的与用户交互效果,那么给用户带来的体验是极好的。近期整理了一组相对炫酷前端按钮交互动画,今天分享给大家。 今天分享的主要内容来源于 Aaron Ike

Read More

#yyds干货盘点#用css做事件监听_文本、的博客-多极客编程

平时工作中很多场合都要用到定时器,比如延迟加载、定时查询等等,但定时器的控制有时候会有些许麻烦,比如鼠标移入停止、移出再重新开始。这次介绍几个借助 CSS 来更好的控制定时器的方法,一起了解一下吧,相信可以带来不一样的体验。hover 延时触发有这样一个场景,在鼠标停留在一个元素上​​1s​​后才触发事件,不满​​1s​​就不会触发,这样的好处是,可以避免鼠标在快速划过时,频繁的触发事件。如果是用

Read More

[极致用户体验] 微信设置大字号后,ios加载网页时闪动怎么办?_hullqin的博客-多极客编程

大家好,我是公众号「线下聚会游戏」作者HullQin,开发了《联机桌游合集》,是个网页,可以很方便的跟朋友联机玩斗地主、五子棋等游戏。 背景 之前的文章,我提到网页开发的一个常见问题:《在微信大字号模式下,网页样式乱了怎么办?》。上文中提供了一种解决方案,在用户调整微信字体大小后,可以保证网页字体大小不变,解决了样式错乱的问题。 但是上面的解决方案,背离了微信「关怀模式」和「大字号模式」的初衷

Read More

【测试开发全栈--css」(1) css样式一探究竟_小小迷糊的博客-多极客编程

说到HTML,就不得不提到CSS样式,接下来我们就会讲解CSS在HTML语言中的使用。具体要讲解的内容有:  CSS简介  CSS基础选择器  CSS字体属性  CSS文本属性  CSS的引入方式  Chrome调试工具CSS的主要使用场景就是美化网页,调整页面布局的。这里就不得不提下HTML的局限性。HTML,只关注内容的语义,主要做结构,显示元素内容。比如<h1>表明这是一个大标题

Read More

还记得金碟豹唱片的图标吗?我用canvas实现了它_周杰伦本人的博客-多极客编程

还记得金碟豹唱片的图标吗?我用canvas实现了它 相信九零后们的同学们都看过金碟豹唱片,最经典的莫过于的它的图标从电视这边跳到那边了,那么这个跳动是怎么实现的呢?今天我就用canvas给大家实现下 首先定义画布,画布是正方形的,并显示边框 html部分: <canvas id="jay" width="500" height="500"></canvas> css部分:

Read More

javascript 如何将 html 转成 markdown?_安东尼漫长的技术岁月的博客-多极客编程

降低阅读负担,启发创作心智,轻松学习 JavaScript 技巧,日拱一卒,jym,冲~本篇带来:在 JavaScript 如何将 HTML 转成 Markdown?先收藏,总有一天要用到!!npm我们主要是借助 ​​Turndown​​ 这个库来实现的npm 安装npm i turndownes6 import 引入:import TurndownService from 'turndown'C

Read More

harmonyos - 纯css实现吹灭蜡烛动画_鸿蒙社区的博客-多极客编程

作者:炒栗子 前言 前段时间HarmonyOS 3发布了,吸引了不少的眼球,为了体验鸿蒙应用开发,决定动手实现一个案例——通过css动画实现吹灭蜡烛动画,看了一下鸿蒙应用开发文档,有js和ets两种开发方式,综合考量了一下,决定采用js方式实现。 效果展示 实现思路 通过变换translate()的X轴位置,实现最右边蜡烛眼睛移动效果; 通过改变height、width和left属性实现

Read More

《css揭秘》读书笔记-条纹背景(二)_wx612751f2ed44d的博客-多极客编程

垂直条纹水平条纹是最容易用代码写出来的,但用户在网页上看到的条纹图案很多都不是水平的。有些条纹是垂直的(如图1-1),而且某些形态的斜条纹或许更受欢迎,看起来更有趣。幸运的是,CSS 渐变同样也能帮助我们创建出这些效果,只是难度稍有不同。垂直条纹的代码跟水平条纹几乎一样的,主要区别在于:我们需要在开头加上一个额外的参数来指定渐变的方向。在水平条纹的代码中,我们其实也可以加上这个参数,只不过它的默认

Read More

推荐几个不错的 css 工具,持续收录!_唐志远的博客-多极客编程

原文链接:推荐几个不错的 CSS 工具,持续收录! Neumorphism ​Neumorphism 是一个很棒的工具,可以根据你的喜好选择颜色、编辑大小、半径、距离等为你的设计生成 UI CSS 代码。​​ Animista ​Animista 是CSS动画的中最佳的工具之一。你只需选择你喜欢的动画类型,并设置一些参数,然后将生成的 CSS 代码用到你的项目中。 ​ PurgeCSS ​

Read More

react中框架和目录结构_13339380的博客-多极客编程

ant-design一款react的移动端ui框架,提供了大量的组件,方便我们的开发​​官网​​, ​​移动端​​npm也是一个npm模块我们也可以通过npm来安装npm install antd-mobile安装完成,我们就可以在项目中使用这些组件了按需加载antd-mobile提供的组件太多,全部加载进来会使文件很大。所以要按需加载。我们就要为webpack添加babel-plugin-imp

Read More

程序员的中秋_紫轩蝶泪的博客-多极客编程

程序员的中秋 八月的夜,有点寒,凄凄的月色透过纱窗,无力地落到床前,淡淡的一片白,又给我带来了一个不眠之夜。明知无人与之同乐,只好由自己的思绪在夜色里游荡。好在白天闲来时,习惯于捡拾树荫底下那一片片破碎的阳光,放到口袋里,留到晚上寂寞时,用来温暖自己的心。   很久以前,曾一度热情,用年轻的心去图划未来,那份执着的追求,曾有过不少的亮点,虽然在商海里留下了伤痕,在爱海里,留下了伤痛,但内心仍然藏着

Read More

react中flux与redux_13339380的博客-多极客编程

混合react提供了组件的目的是为了复用虚拟DOM,所以react提供了混合的技术是为了复用组件的功能在ES5中,我们可以通过mixins使用,继承对象中的属性和方法但是ES6中,提供了extends关键字实现了继承,因此就移除了mixins,所以我们可以通过extends实现混合的继承。分成两步第一步 定义混合类,继承组件基类第二步 组件类,继承混合类这样组件类,通过混合类就继承了组件基类之所以

Read More

《css揭秘》读书笔记-条纹背景(一)_wx612751f2ed44d的博客-多极客编程

背景知识颜色渐变设置:background: linear-gradient(direction, color-stop1, color-stop2, ...);指定背景图片大小:background-size: length|percentage|cover|contain;难题在网页设计和其他传统媒介中,各种尺寸、颜色、角度的条纹图案在视觉设计中无处不在。想要在网页中实现条纹图案,通常我们的方

Read More

10天从入门到精通vue(六)webpack打包vue项目和mintui 组件使用_write less,do more。的博客-多极客编程

@[toc] 注意: 有时候使用npm i node-sass -D装不上,这时候,就必须使用 cnpm i node-sass -D 在普通页面中使用render函数渲染组件 在webpack中配置.vue组件页面的解析 运行cnpm i vue -S将vue安装为运行依赖; 运行cnpm i vue-loader vue-template-compiler -D将解析转换vue的包安装为开

Read More

10天从入门到精通vue(五)webpack打包自动打开浏览器、热更新和配置浏览器的默认端口号、打包css、less等_write less,do more。的博客-多极客编程

@[toc] 实现自动打开浏览器、热更新和配置浏览器的默认端口号 ⚠️注意:热更新在JS中表现的不明显,可以从一会儿要讲到的CSS身上进行介绍说明! 方式1 修改package.json的script节点如下,其中--open表示自动打开浏览器,--port 4321表示打开的端口号为4321,--hot表示启用浏览器热更新: "dev": "webpack-dev-server --hot -

Read More

使用html在线编辑器在ipad上写出精美网页_wx6123051953ddd的博客-多极客编程

那天尝试使用Lightly的​​HTML在线编辑器​​在iPad上编程,效果实在太惊艳啦!从导入素材到预览网页效果,我从来没想过在iPad上居然还可以文本高亮和自动填充,编程体验已经完全可以媲美电脑了。 在这篇教程中,我们主要在iPad上演示HTML在线编辑器的效果,大家可以根据自己的喜好随意选择其他平板或笔记本电脑作为编程设备哦!另外,这篇文章需要一定的 HTML 和 CSS 编程基础。之前从未

Read More