- 博客(33)
- 收藏
- 关注
RSS订阅原创 利用JavaScript实现简单的点名表
如图，当点击开始start按钮时开始随机显示，当点击stop按钮时结束代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s...
2019-08-19 21:08:47
689
原创 利用JavaScript分别实现倒计时、跑马灯和打字机效果
倒计时代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...
2019-08-19 21:03:28
228
原创 利用JavaScript实现动态轮播图
在以前的文章中演示了静态轮播图的做法静态轮播图的做法本文来通过添加一个定时器实现动态轮播图代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt...
2019-08-19 20:56:10
278
原创 利用JavaScript实现简单的购物车功能
如图所示当点击加减号时总价，总件数与总价格也要改变代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0...
2019-08-19 20:50:21
786
原创 JavaScript利用函数实现简单的文本编辑
如图当点击编辑时可以改变文本，点击取消则返回代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g...
2019-08-19 20:46:09
182
原创 利用JavaScript实现静态轮播图
本篇例举的是静态轮播图，动态轮播图会在以后实现如图所示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g...
2019-08-19 20:40:19
510
原创 用JavaScript实现tab切换（选项卡）
如图所示当鼠标在顶部菜单栏滑动时下方内容会发生改变注意：本文只以改变红框部分为例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial...
2019-08-19 20:36:07
325
原创 利用JavaScript实现全选、反选、取消全选
如图所示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
2019-08-19 20:30:43
344
原创 利用JavaScript写出V字形
如图所示 <style> div{ width: 50px; height: 50px; background: #f00; position:absolute;} </style></head><body> <script> var len = 9 for(...
2019-08-19 20:23:34
933
原创 JavaScript利用循环嵌套写出九九乘法表和三角形
1.九九乘法表 <script> for(i=1;i<10;i++){ for(j=1;j<=i;j++){ document.write(j+'*'+i +'='+ i*j+' ') ...
2019-08-12 10:36:16
905
原创 JavaScript数据类型及转换
js 数据类型 弱类型的两大类基本数据类型 number string boolean null undefined引用数据类型(复合,复杂) Object (array object function)numbervar x = 1;// typeof 用来检测数据类型// typeof x typeof(x) ()按照实际的需求去省略console.log(typeof x)...
2019-08-11 15:49:58
171
原创 JavaScript中的关键字与保留字
ECMA-262 描述了一组具有特定用途的关键字。这些关键字可用于表示控制语句的开始或结束，或者用于执行特定操作等。按照规则，关键字也是语言保留的，不能用作标识符。以下就是ECMAScript的全部关键字（带号上标的是第5 版新增的关键字）：break do instanceof typeofcase else new varcatch finally return voidcontinu...
2019-08-11 15:44:53
210
原创 利用JavaScript实现手动输入改变图形大小与颜色
在上一篇中实现了图形形状与背景颜色的变化https://blog.csdn.net/weixin_45457515/article/details/98943246这次换一种输入方式，效果如图代码如下<!DOCTYPE html><html lang="en"><style> #box { font-size: 20px;...
2019-08-09 10:40:45
469
原创 利用JS实现图形形状与背景颜色的变化
今天使用JS简单实现如下功能当点击按钮时可以选择改变图形的形状与背景颜色代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia...
2019-08-09 10:34:02
770
原创 简述CSS3的弹性盒布局，以及适用场景
1）背景介绍：网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便2009年，W3C 提出了一种新的方案—-Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。（2）知识剖析：...
2019-08-05 18:09:25
1535
原创 在项目中如何做图片优化
（1）、降低图片的大小我们的目的是降低图片的大小kb，有很多方法可以做，压缩图片，选择更小kb的图片格式，以达到最优的显示效果,找在线压缩图的网站如TinyPNG:一个压缩PNG的神站 （2）、选择适当的图片宽度尺寸（即响应式图片）** （3）减少HTTP的网络资源请求 考虑CSSSprites(背景精灵图/雪碧图)**怎么使用精灵图？利用CSS的background-imag...
2019-08-05 17:19:07
849
原创 移动端常见布局
像素单位（相对单位）以下是1英寸下 像素分布为10的分布图（10px/1英寸）PPI（Pixels Per Inch）每一英寸的像素数量称为 像素密度。最典型的例子，iPhone 3gs的屏幕像素是320×480，iPhone 4s的屏幕像素是640×960。刚好两倍，然而两款手机都是3.5英寸的。在现实中，这两者效果却是一样的。这是因为Retina屏幕把2×2个像素当1个像素使用。比如原本4...
2019-08-03 14:57:50
322
原创 移动端布局之弹性盒（flex Box）
Web 应用的样式设计中，布局是非常重要的一部分。布局用来确定页面上不同组件和元素的尺寸和位置。随着响应式用户界面的流行，Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率。响应式用户界面设计中最重要的一环就是布局。需要根据窗口尺寸来调整布局，从而改变组件的尺寸和位置， 以达到最佳的显示效果。这也使得布局的逻辑变得更加复杂。弹性盒模型可以用简单的方式满足很多常见的复杂的布局需求。该布局模型在主...
2019-08-03 14:14:44
1161
原创 CSS3动画
一：过渡过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。帧动画：通过一帧一帧的画面按照固定顺序和速度播放。补间动画是各个状态的连接（关键帧）语法格式:transition: 要过渡的属性 花费时间 运动曲线 何时开始;二：变形 tran...
2019-08-03 11:14:19
242
原创 css3新增选择器+属性
1：c3属性前缀CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式。它暗示该CSS属性或规则尚未成为W3C标准的一部分。chrome 、Safiri 浏览器 ： -webkit-FireFox : -moz-IE: -ms-opera : -o-先写标准的CSS3属性,在写css3属性2：c3选择器(1)毗邻选择 和兄弟选择器/* E1 + E2 毗...
2019-08-03 09:54:51
394
原创 H5新增语义化标签以及属性
结构标签（1）<section></section> 独立内容模块 ，可以h1-h6组成大纲 ，表示文档结构，有章节、页眉、页脚或其他部分。（2）article （文章） 文章核心部分 （3）aside 标签内容之外相辅的信息 侧边栏（4）header 头部/标题(5)footer 底部(6)nav 导航（7）<figure>标签 代替原...
2019-08-03 09:44:20
2001
原创 CSS预处理语言——less
会计站项目1：采用rem+媒体查询+less实现less文件夹下的文件内容 【adapter.less适配文件index.less 首页对应less文件mixin.less 混合文件reset.less 重置样式文件var.less 变量定义文件】rem适配方案不好维护 设备会更新 设计稿尺寸 预设基准值咱们主要适配主流设备即可 十几种2:var.less 设置变量 ...
2019-08-02 21:07:11
270
原创 简述新图像文件格式——SVG
一、概述.jpg .png-8 png-24 .jpeg 位图 （固定的像素点 单位像素点） 缩放会失真SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。XML 没有明确的标签 储存数...
2019-08-02 16:57:36
3799
原创 简述CSS中的“BFC”规则
BFC(块级格式化上下文)BFC(Block formatting context)直译为"块级格式化上下文"。元素的显示模式我们前面讲过 元素的显示模式 display。分为 块级元素 行内元素 行内块元素 ，其实，它还有很多其他显示模式。那些元素会具有BFC的条件不是所有的元素模式都能产生BFC，w3c 规范：display 属性为 block, list-item, ta...
2019-08-02 16:33:14
434
原创 CSS经典多栏布局（多列自适应布局、等高布局、圣杯布局、双飞翼布局）
一、多列自适应布局自适应: 盒子宽度随着屏幕宽度发生变化 百分比1:两列自适应布局要求:左侧盒子固定,右侧盒子100% 左侧盒子加左浮动属性 ===>浮动元素会覆盖标准盒子2: 三列自适应布局左右两侧固定宽度,中间盒子自适应技术点: 负外边距 margin-left:-px + 相对定位 (left-,right-)+ 浮动并排二、等高布局hei...
2019-08-01 11:06:27
742
原创 前端常见的几个浏览器兼容问题及解决方法
1:ie8下图片边框问题<a><img src="./a/1.jpg"></a>解决办法:img { border:0; //去掉ie8下图片边框 display:block; or vertical-align:middle; 取消下间隙}2:图片下间隙解决: (1) 图片转换块元素 ...
2019-08-01 10:50:40
257
原创 CSS中浮动的作用与影响（包含清除浮动影响的方法）
今天来总结一下浮动浮动(float)作用:解决盒子并排问题标准流: 一行一个 从左侧边界开始放置浮动带来一个现象, 盒子并排放置 —> 脱离标准流 ,成为浮动流—> 不占界面位置float:left / right / none(默认值) ;left: 找父元素的左边界停靠right: 找父元素的右边界停靠none: 保持原有的位置 标准流每一个并排的盒子身上都...
2019-07-28 11:02:06
858
原创 简单利用CSS做出小三角图标
在浏览网页时，我们有时会看到这种三角形的小图标这里我们只需要一组简单的CSS代码即可实现首先创建一个盒子容器<body> <div class="box"></div></body>创建如下CSS代码<style> .box { width: 0px; height: 0px...
2019-07-28 10:40:00
602
原创 父子嵌套时的一个问题
现象:当子元素设置上外边距时,父盒子会和子元素一并向下移动解决方案:1: 给父元素设置1px上外边框或者1px上内边距(分割公共区域)2: 既然默认渲染导致外边距塌陷 就要使用浏览器的一个规则去改变默认渲染.规则:BFC (块级格式化上下文) 私人领域BFC规则不是浏览器的默认规则,所以我们得触发BFC规则overflow:hidden —>可以触发BFC规则...
2019-07-27 17:09:07
208
原创 CSS选择器
今天总结一下有关CSS选择器的相关笔记基础选择器1: 全局选择器 * {} （通配符）* { 选择的是包含body在内以及body的所有子元素} 2: 标签选择器标签名 { 属性名:属性值; 选择的是标签名符合所写的元素} 例如：div { }3:id选择器选择的是id名字为XXX的元...
2019-07-27 09:32:57
160
原创 有关HTML的一些基础知识
HTML标记语言:HTML : Hyper Text Markup Language 超文本标记语言超: 不仅仅可以放文字 ,还可以插入图片,插入链接, 视频,音频 .html标记: 就是浏览器可以识别的文字和符号目前常用的浏览器及它们的内核 1. Chrome （谷歌） 内核： Webkit ---> Blink 2. FireF...
2019-07-26 22:04:51
198
原创 Typora的一些常用快捷键
标题(1) ctrl+1/2/3/4/5/6(2) # 标题 enter插入图片ctrl+shift+i 代码<div></div> ```+ 语言名字+enter键 例如：```html enter / ```css enter列表+ 列表数据 enter 小黑点- 子项数据 enter 空心圆表格快捷方式...
2019-07-26 21:50:32
3482
转载 如何使用CSDN-markdown编辑器
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...
2019-07-26 14:37:38
148
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人