案例
文章平均质量分 84
爱前端的杨同学
你好棒!我也是
展开
-
模仿京东倒计时秒杀效果
/ 我们先调用一次这个函数,防止第一次刷新页面有空白。/* 匹配到同级元素的前2个(包含第2个) */// 返回的是用户输入时间总的毫秒数。// times是剩余时间总的秒数。// 把剩余的小时给 小时黑色盒子。// 返回的是当前时间总的毫秒数。// 1. 获取元素。// 2. 开启定时器。// 小时的黑色盒子。// 分钟的黑色盒子。// 秒数的黑色盒子。原创 2022-08-22 21:00:46 · 234 阅读 · 1 评论 -
Web APIs第03天笔记——节点操作、 DOM的核心总结、事件高级、常用鼠标事件
关于dom操作,我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象就是事件对象。比如:谁绑定了这个事件。鼠标触发事件的话,会得到鼠标的相关信息,如鼠标位置。键盘触发事件的话,会得到键盘的相关信息,如按了哪个键。把事情委托给别人,代为处理。事件委托也称为事件代理,在 jQuery 里面称为事件委派。说白了就是,不给子元素注册事件,给父元素注册事件,把处理代码在父元素的事件中执行。.........原创 2022-08-15 15:52:11 · 241 阅读 · 2 评论 -
Web APIs第02天笔记——排他思想、自定义属性操作、节点操作
/ 1. 获取元素的属性值 // (1) element.属性 console . log(div . id);//(2) element.getAttribute('属性') get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index console . log(div . getAttribute('id'));自定义属性目的:是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。............原创 2022-08-14 09:26:23 · 423 阅读 · 2 评论 -
Web APIs第01天笔记——Web API介绍
API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,无需理解其内部工作机制细节,只需直接调用使用即可。举例解释什么是API。例如, C语言中有一个函数 fopen()可以打开硬盘上的文件,这个函数对于我们来说,就是一个C语言提供的打开文件的工具。 javascript中有一个函数alert()可以在页面弹一个提示框,这个函数就是js提供的一个弹框原创 2022-08-09 15:35:37 · 472 阅读 · 1 评论 -
JavaScript基础第06天笔记——内置对象、简单数据类型和复杂数据类型
前面两种对象是JS 基础 内容,属于 ECMAScript;第三个浏览器对象属于 JS 独有的, JS API 讲解内置对象就是指 JS 语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是。原创 2022-08-04 16:47:33 · 182 阅读 · 0 评论 -
小组项目——简易ATM机
输入有误,请重新输入''请输入您要的操作''请您输入存的钱数''请您输入取的钱数''余额不足,请选择''您现在的钱数是'原创 2022-07-24 15:50:05 · 227 阅读 · 1 评论 -
JavaScript基础第04天笔记——数组、函数
虽然for循环语句也能实现一些简单的重复操作,但是比较具有局限性,此时我们就可以使用JS中的函数。函数内部可以调用另一个函数,在同一作用域代码中,函数名即代表封装的操作,使用函数名加括号即可以将封装的操作执行。把数组中的每个元素从头到尾都访问一次(类似学生的点名),可以通过for循环索引遍历数组中的每一项。数组可以通过索引来访问、设置、修改对应的数组元素,可以通过“数组名[索引]”的形式来获取数组中的元素。函数的封装是把一个或者多个功能通过函数的方式封装起来,对外只提供一个简单的函数接口。......原创 2022-07-24 14:34:31 · 130 阅读 · 0 评论 -
javascript循环课后练习
1.求1-100之间所有数的总和与平均值 2.求1-100之间所有偶数的和 3.求100以内7的倍数的总和 4、使用for循环打印矩形,要求每次只能输出一个☆ 5.使用for循环打印三角形 6.使用for循环打印99乖法表 7.接收用户输入的用户名和密码,若用户名为"admin",密码为"123456",则提示用户登录成功!否则,让用户一真输入。 8.求整数1 ~100的累加值,但要求跳过所有个位为3的数【用continue实现】. ...原创 2022-07-24 13:24:08 · 928 阅读 · 2 评论 -
Javascript流程控制课后练习
1.判断时间阶段。比如用户输入12点 弹出中午好;用户输入18点 弹出傍晚好;用户输入23点 弹出深夜好。2.比较两个数的最大值 (用户依次输入2个值,最后弹出最大的那个值) 3.用户输入一个数,来判断是奇数还是偶数 4.根据用户输入的数值(数字1到数字7),返回星期几 5.接收班长口袋里的钱数?若大于等于2000,请大家吃西餐。若小于2000,大于等于15 6.分数转换给一个分数,判定等级。大于等于90 A,大于等于80小于90 B,大于等于70小于80 C,大于等于60小于70D,小于60E原创 2022-07-24 13:08:23 · 1210 阅读 · 0 评论 -
行内块(inline-block)并排影响布局
demo效果图当四个div都有内容时,并排显示正常。当第二个、第四个div没有内容时,惊讶的显示为如下效果:问题剖析 display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。(准确的说,应用此特性的元素呈现为内联对象,周围元素保持在同一行,但可以设置宽度和高度地块元素的属性) 但有一点需要注意的是:图片文字等内联元素默认的对齐方式是和父级的baseline进行对齐的。解决方法1、简单粗暴的给所有元素都加上内容原创 2022-06-27 12:06:43 · 311 阅读 · 0 评论 -
HTML5 第二天总结———rotate、设置元素旋转中心点(transform-origin)、2D 转换之 scale、鼠标经过图片放大案例、动画(animation)、动画序列、动画常见属性
案例:css书写三角——鼠标经过div 里面的三角旋转、分页按钮案例、 `2D` 转换综合写法以及顺序问题、 `scale` 的作用 - 用来控制元素的放大与缩小 ```css transform: scale(x, y) ```3. 知识要点 - 注意,x 与 y 之间使用逗号进行分隔 - `transform: scale(1, 1)`: 什么是动画、动画的基本使用、语法格式(定义动画)、 语法格式(使用动画)、速度曲线细节1. 速度曲线细节......原创 2022-06-11 23:51:47 · 2399 阅读 · 0 评论 -
HTML5 & CSS3 笔记——HTML5新特性、多媒体标签、视频标签、音频标签、新增的表单元素、CSS3新特性、CSS3 新增选择器、盒子模型、 CSS3 过渡
HTML5 的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题,基本是 IE9+ 以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这些新特性。以前布局,我们基本用 div 来做。div 对于搜索引擎来说,是没有语义的发展到了HTML5后,新增了一些语义化标签,这样的话更加有利于浏览器的搜索引擎搜索,也方便了网站的seo(Search Engine Optimization,搜索引擎优化),下面就是新增的一些语义化标签多媒体标签分为 音频 au原创 2022-06-09 23:34:42 · 192 阅读 · 0 评论 -
html+css 实现导航栏二级菜单——气泡框
HTML+CSS 实现二级菜单气泡框原创 2022-06-07 23:25:31 · 2371 阅读 · 1 评论 -
VSCode(Visual Studio Code )软件(插件)安装与使用
Visual Studio Code (简称 VS Code / VSC) 是微软公司推出的一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、GIT 等特性,支持插件扩展等等。推荐理由:比 sublime 开源,比 webstorm 更轻智能提示很强大自带 emmet插件安装非常方便自带强大的调试功能软件跨平台支持 Win、Mac 以及 Linux。官网下载地址: https://code.visualstudio.com/安装步骤:傻瓜式安装,直接下一步即可。放原创 2022-06-06 09:31:55 · 4806 阅读 · 0 评论 -
CSS第七天总结——精灵图、字体图标、CSS 三角、CSS 用户界面样式、vertical-align 属性应用、溢出的文字省略号显示 、常见布局技巧、CSS 初始化
精灵图(sprites)的使用、字体图标的优点、字体图标的下载、字体图标的引入、字体图标的追加、字体图标加载的原理、案例:京东三角、什么是界面样式、鼠标样式 cursor、轮廓线 outline、 防止拖拽文本域 resize、图片、表单和文字对齐、解决图片底部默认空白缝隙问题、多行文本溢出显示省略号、 margin负值运用...原创 2022-06-05 23:35:01 · 149 阅读 · 0 评论 -
HTML5 第一天——html5新增标签、多媒体音频标签、多媒体视频标签、新增 input 标签、新增表单属性、CSS3 属性选择器、结构伪类选择器
html5新增标签、多媒体音频标签、多媒体视频标签、新增 input 标签、新增表单属性、CSS3 属性选择器、结构伪类选择器、nth-child和nt-of-type的区别、伪类选择器、伪类元素的案例、2D转换之translate、translate语法、如何让一个盒子水平居中、2D转换rotate...原创 2022-05-20 19:54:10 · 98 阅读 · 0 评论 -
CSS第四天总结——CSS其它样式、浮动、常见网页布局、清除浮动、PS切图
一、其他样式1、圆角边框在 CSS3 中,新增了圆角边框样式,这样我们的盒子就可以变圆角了。border-radius 属性用于设置元素的外边框圆角。语法: border-radius:length; 参数值可以为数值或百分比的形式如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为 50%该属性是一个简写属性,可以跟四个值,分别代表左上角、右上角、右下角、左下角分开写:border-top-left-radius、border-top-right-r原创 2022-05-20 18:44:20 · 89 阅读 · 0 评论 -
CSS第三天总结——CSS的三大特性、盒子模型、PS基本操作
一、css三大特性1、层叠性 相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题 层叠性原则:样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式样式不冲突,不会层叠2、继承性 CSS中的继承: 子标签会继承父标签的某些样式,如文本颜色和字号。恰当地使用继承可以简化代码,降低 CSS 样式的复杂性。子元素可以继承父元素的样式: (text-,font-,line-这些元素开头的可以继承,以及color属性原创 2022-05-20 17:54:36 · 92 阅读 · 2 评论 -
设计一个图像画廊,采用无序列表加载五副图像,并利用marquee标记实现五副图像从右向左交替滚动显示。
设计一个图像画廊,采用无序列表加载五副图像,并利用marquee标记实现五副图像从右向左交替滚动显示。代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> &l原创 2022-05-18 22:17:28 · 2064 阅读 · 0 评论