自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

小脚的Blog

初出茅庐的一只小码农

  • 博客(48)
  • 收藏
  • 关注

原创 jQuery-canvas制作太极图

jQuery-canvas制作太极图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>太极图</title> <style type="text/css"> /* 设置动画效果 */ canvas{ /* border: 1px solid red; */ animation-name: move;/*动画.

2020-10-29 16:39:28 197

原创 jQuery基础

jQuery是一个Javascript库,是对于ECMAScript、dom、bom的一个浅封装,让用户更方便操作。特点:1)轻量级2)有强大的选择器 和css类似,更加丰富3)出色的dom封装和可靠的事件处理机制 jQuery对象-->jQuery实例方法4)不污染顶级变量 浏览器: window:{} Linux:global:{}5)完整的ajax 6)链式操作方法 Array.prototype.slice.call{lis}.

2020-10-27 23:19:03 180

原创 BOM浏览器对象模型

BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关。BOM的核心对象是window,它表示浏览器的一个实例,在浏览器中window对象有双重角色既是通过javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。窗口大小innerWidth 页面视图区的宽度innerHeight 页面视图区的高度outerWidth 浏览器窗口的宽度outerHeight 浏览器窗口的高度所有主流浏览器都支持innerWidth,innerHeight,o.

2020-10-25 15:51:23 92

原创 DOM事件

javascript与HTML之间的交互是通过事件实现的。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。事件三要素:1)事件目标(eventtarget)发生的事件与之相关联或与之相关的对象2)事件处理程序(eventhandler)处理或相应事件的函数3)事件对象(eventobject)与特定事件相关且包含有关该事件详细信息的对象事件流 描述的是从页面中接受事件的顺序1)事件捕获(从外向内解析函数)2)事件冒泡(从内向外执行函数)默认情况下.

2020-10-24 23:08:37 122

原创 Document Object Model(DOM)

DOM是针对HTML和XML文档的一个API(应用程序编程接口),DOM描绘了一个层次化的节点树,允许开发人员添加,移除,修改页面的某一部分。1998年10月DOM1级规范成为W3C的推荐标准,为基本的文档结构以及查询提供了接口。但是要注意,IE中的所有DOM对象都是以COM对象的形式实现的。这意味着IE中的DOM对象与原生JavaScript对象的行为或活动特点并不一致。DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型,每种类型分别表示文档中不同的信息或标.

2020-10-22 23:34:13 148

原创 面向对象程序设计

构造函数都是以大写字母开头,以大写字母开头的不一定是构造函数。Math对象比较1)Math.min():返回一组数中的最小值2)Math.max():返回一组数中的最大值取整1)Math.ceil():向上取整2)Math.floor():向下取整3)Math.round():四舍五入随机数1)Math.random():返回0-1之间的随机数,不包含1Date 日期对象 构造函数对象new date=new Date().

2020-10-21 23:15:34 122

原创 正则表达式

正则表达式是一个描述字符模式的对象。闭包闭包就是能够读取其他函数内部变量的函数。例如在javascript中,只有函数内部的子函数才能读取局部变量,所以闭包可以理解成“定义在一个函数内部的函数“。在本质上,闭包是将函数内部和函数外部连接起来的桥梁包装器函数1)Number() :Number.prototype.xxx 2)String() : String.prototype.xxx 3)Boolean():Boolean.prototype.xxxvar str="h.

2020-10-20 14:19:41 155

原创 迭代

迭代 1 //迭代: 函数作为参数,传递给具有迭代功能的另一个函数 2 var students =[ 3 {id:10,name:'zs',age:80}, 4 {id:20,name:'ls',age:8}, 5 {id:30,name:'ww',age:18}, 6 {id:40,name:'c1',age:22}, 7 ]; 8 //1.是否都是成年人?--》every 9 function check18(stu){ 10 return

2020-10-19 09:55:22 153

原创 js算法利用

用for循环实现10的阶乘 1 function jc1(num){ 2 var str ='10!='; 3 var sum =1; 4 for (var i=num;i>0;i--){ 5 sum =sum*i; 6 if (i==1){ 7 str =str+i+'='; 8 }else{ 9 str =str+i+'*'; 10 } 11 } 12 console.log('f.

2020-10-18 18:34:28 129

原创 数组(二)

数组的操作方法非静态方法:所有实例对象都可以调用1)concat():数组的拼接 返回值为一个新的数组2)slice(): 数组截取 不修改原数组参数不同时返回值不同:0:返回一个新的数组,并且和原数组一样1: index:从当前index位置开始截取,截取到数组末尾结束2: begin end 从begin位置开始截取,到end位置结束,不包含结束位置 -1代表最后一个元素3)splice(): 数组截取 修改原数组.

2020-10-18 00:43:46 90

原创 数组(一)

ECMAScript数组是有序列表,是存放多个值的集合。有以下特性:每一项都可以保存任何类型的数据,元素类型可以任意。数组的长度大小是可以动态调整。数组的length属性:可读可写,可以通过设置length的值从数组的末尾移除项或向数组中添加新项创建1.数组字面量var arr=[1,2,3,undefined,null,flase,function,{}];2.构造函数var arr=new Array();//创建空数组var arr=new Array.

2020-10-17 18:32:07 567

原创 函数

函数允许我们封装一系列代码来完成特定任务。当想要完成某一任务时,只需要调用相应的代码即可。方法(method)一般为定义在对象中的函数。浏览器为我们提供了很多内置方法,我们不需要编写代码,只需要调用方法即可完成特定功能。在构造函数时,最好将首字母大写,函数其实也是一个对象。创建函数字面量 var say=function(){} 函数的声明function say(){}解析时,先解析函数的声明,在解析使用var操作符声明的变量,但不赋值。匿名函数function (){} 需要立即执行(.

2020-10-16 14:46:24 93

原创 对象

ECMA-262对象的定义:无序属性的集合,其属性可以包含基本值,对象,或者函数。可以将对象想象成散列表:键值对,其中值可以是数据或者函数。ECMAScript中的对象其实就是一组数据(属性)和功能(方法)的集合。创建对象字面量var o={ key:value, key2:value }构造函数var o=new Object(); o.name='lisa';o.age=20;访问对象属性点操作符console.log(o.name);[][""]:o["name"] 必须是字符串类.

2020-10-15 17:43:45 101

原创 操作符及类型转换

值的传递和引用数据类型:赋值是从右向左赋值,10赋值给了a,c-->b-->a,console.log(b);一定会报错,b并没有被赋值,如果改成c=b=a;这时b,c都会被赋值。基本数据类型在进行值传递时,只是复制了一份属性值进行操作。引用数据类型在进行值的传递时,传递的是引用地址。栈区定义了一个 o1指向堆区lisi,将o1的属性传给o2,此时o1,o2的地址是相同的,o2直接将堆区内的name改为terry,所以o1访问时name也改变了。.

2020-10-14 23:07:10 183

原创 脚本语言JavaScript

JavaScript是一个编程语言,允许用户在浏览器页面上完成复杂的事情。浏览器页面并不总是静态的,往往显示一些需要动态更新的内容,交互式地图,动画,以及视频等。一个完整的JavaScript包括核心(ECMAScript),应用程序编程接口即API(比如DOM(DocumentObjectModel),BOM(BrowserObjectModel)),以及其他第三方API。JavaScript与HTML、CSS一同配合共同完成一个复杂页面的显示。node:JS运行环境,是JS解析器用户.

2020-10-14 15:17:36 293

原创 vi编辑器

基础应用如何打开vi编辑器:$vi 直接打开$ vi +number a.txt 使用vi打开a.txt,并将光标定位在第number行$vi a.txt 使用vi编辑器打开a.txt 默认在第一个字符如果vi打开的是新的文件 退出时会自动创建vi编辑器有三种状态:命令行模式:默认状态 对文本内容进行操作,复制代码,删除代码插入/编辑模式: 编写代码 退出编辑时需要先退出到命令行模式 从命令行模式进入到底行模式底行模式:vi编辑器的退出,配置设置命令...

2020-10-11 00:04:00 166

原创 linux用户操作

使用Xshell进行Linux操作操作系统:centos6.5使用软件:Xshell6用户操作:root:超级管理员,权限很高$ clear 清屏$ls list列出当前文件夹下的所有文件$ls /home 列出home文件夹下的所有子文件$ls -l: 列出当前文件夹下的所有子文件,以长列表的形式ls命令和ls -l命令的区别total 840:一共有多少个文件夹 840个drwxrwxr-x 2 terry webui 4096 Aug 11 1.

2020-10-11 00:03:39 190

原创 媒体查询

CSS的媒体查询模块允许在不改变代码的前提下对显示效果进行调整,媒体查询由两部分组成,一个可选的媒体类型,以及若干个css表达式。当媒体类型判断结果为true的时候,其中的css表达式被解析。如果媒体查询应用在link中,即使判断结果为false,样式表同样会被下载,但是不会应用。用媒体查询来实现响应式布局1.引入meta标签<meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1..

2020-10-11 00:01:37 313

原创 西游记动画制作

每个图片的宽度都一样,但是不同位置的动作是不同的,可以将一张照片划分成8个小图片,利用动画和浮动每次只显示一个小图片,连贯起来就是一系列动画。首先对外层div进行设置,相当于是人物的可视窗口,因为单个人物图片是1600,180;所以一小份就是200px;人物之间设置了50的间距50*3,之后对第一个图片的间距进行清除,所以可视区的总宽度就是200*4+50*3;绝对定位配合left,top进行居中设置,这时的位置是相对于body来说,所以还要向左移动可视区width的一半。...

2020-10-11 00:00:48 588

原创 轮播图-利用动画实现

在最外层设置一个div盒子,作为轮播图的展示区域,id=outer;设置它的定宽定高,并且居中放置,当图片溢出时隐藏在move中放置了5个div占据位置,以后可以用图片来替代。move的宽度是div图片设置的总宽度5*400px;高度是div图片的设置的高度120px;他们的大小和最外层设置的展示区的大小是相同的。然后对div图片进行浮动设置,使他们在一行排列。最后就可以设置动画效果了,为这个动画取名move,为动画设置完成一个循环所需的时间长度10s,因为设置了5个div图片,步...

2020-10-10 10:13:29 849

原创 CSS动画与变形

CSS动画-Animationsu由于该技术的规范还没有稳定,在使用前要先确保浏览器对其兼容性。Animations是css3的一个模块,使用keyframes定义如何随着时间的移动改变CSS的属性值,可以通过指定它们的持续时间,重复次数,如何重复来控制关键帧的行为。Animations由两部分组成:css动画的配置,以及一系列的keyframes(用来描述动画的开始、过程、结束状态)。不需要了解任何JavaScript技术即可完成动画的制作。动画序列(animationsequence.

2020-10-10 10:11:53 272 1

原创 智慧校园-评教系统

利用flex容器进行后台系统的设置,在最外层的div盒子设置float:flex;布局contanier设置伸缩盒布局,行布局,对头部绿色部分进行定宽定高。对于左侧的导航框也进行伸缩盒设置,占据200px的位置,将hover的触发颜色设置成同li背景颜色相同对右侧的部分设置伸缩盒占比1份,overflow:scroll;会对内容区设置滚动条必须要对外面整体高度设置100%,不然滚动条只在外层显示。...

2020-10-10 10:11:12 877

原创 伸缩盒布局

伸缩盒布局(Flexbox)CSS3弹性盒(FlexibleBox或flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。容器使用弹性盒布局的父元素display:flex;三列布局(一行中有3列)为了使得article分列显示,只需要为article元素的父元素section进行如下设置.section{display:flex;}修饰后,三列在一.

2020-10-10 10:10:30 227

原创 CSS定位布局

定位布局(Positioning)相对定位、绝对定位、固定定位元素都有定位属性left,right,top,bottom。静态定位(Staticpositioning) position:static;是所有元素的默认定位方式。意味着将一个元素定位在默认文档流中。搭配top,left没有效果相对定位(Relativepositioning) position:relative;与静态定位相似不脱离文档流,原先位置保留如果不设置top,bottom,left,right属.

2020-10-10 10:09:11 174

原创 CSS浮动布局

默认文档流(Normallayoutflow)默认文档流就是对页面布局不加任何修饰,元素自动的布局方式,其特点有1)元素在页面中的显示顺序与元素在代码中出现的顺序是一致的。2)块级元素独占一行空间,宽度默认为父级的100%,高度由其内容高度所决定。3)行内元素与其他元素共享一行空间,宽高由其内容所决定。但是默认文档流往往不能满足我们的布局需求,我们可以使用如下属性改变默认布局:1.display 通过为display属性指定值block,inline,inline-bloc.

2020-10-10 10:08:14 1054

原创 呼吸灯

利用盒子模型定宽定高的特性,改变父元素padding的大小,实现动画,制作了呼吸灯的动画效果。盒子类型必须是border-box对最外层的盒子div设置定宽定高 box-sizing:border-box;对first,second设置边框圆角,宽度自动填充为100%。此时两个圆会叠加在一起,这时对外层设置margin,也就是对out,first设置margin.接着设置动态效果,当鼠标移入时最外层的padding改变30px-->10px,动画效果发生时间.

2020-10-10 10:07:38 160

原创 盒子模型

1.默认盒子模型:W3C盒子使用box-sizing属性可以改变盒子模型,取值“content-box”的盒子为默认盒子模型。内容的高度一般由子元素填充,在框架布局时可以写上,内容填充好可以删除。padding填充\margin间隔,都有四个属性值的设置-top、-right、-bottom、-left。速写时四个值(上左下右),两个值(上下、左右)。margin上下间隔会叠加,上一个元素的margin-bottom,和下一个元素的margin-top会叠加,实际距离是两个中.

2020-10-10 10:07:03 177

原创 居中布局汇总

在页面的布局中,有许多需要居中对齐的布局,有以下几种方法:效果图首先放置四个div块级元素作为测试,并统一为div元素设置style方法一:对第一个div设置居中方式margin:0 auto;这里为了四个div元素排列美观,上下间距设置了20px有的时候块级元素内会添加文本,需要将文本也进行居中对齐设置:水平居中 text-align:center;竖直居中 为 line-height设置数值,与外部块级元素高度一致,这里外部块级元素div设置h.

2020-10-10 10:06:51 412

原创 CSS文本样式

字体样式color为字体指定颜色font-size为文字指定大小font-family为文字指定特殊的字体,浏览器只会使用浏览器可以访问到的字体font-style用于打开和关闭斜体文本font-weight为字体设置粗细程度text-align文字排列方式text-decoration设置或者取消文本修饰text-transform设置或者取消字体改变text-shadow设置或者取消字体改变1.color为字体指定颜色2.font-size为字体指定文字大小,取值可以为绝对单位.

2020-10-10 10:06:29 229

原创 CSS其他属性

级联级联(Thecascade),CSS是CascadingStyleSheets的简写,说明级联是非常重要的。从表层来看,级联表明CSS规则的顺序问题,但是级联远比这个复杂,在所有的选择器中某个选择器定义的规则是否能够胜出(即优先级)取决于三个元素:Importance,Specificity,Sourceorder权重1000:行内样式表 sytle属性100: #id10: .class [attr] :first1: ::after tag标签继承.

2020-10-09 09:14:36 82

原创 CSS选择器

一.基本选择器1.标签选择器 项目统一样式标签选择器又叫元素选择器,换句话说,文档的元素就是最基本的选择器,使用元素名称直接选中元素即可。例如:<style> p{ height:100px;border:1pxsolidred; }</style><p>one</p><p>two</p><p&gt.

2020-10-09 09:12:41 278

原创 使用图标库

一使用BootCDN图标库1.在线使用图标库官网打开https://www.bootcdn.cn/,然后在搜索库中搜索font选择第一个font-awesome尽量选择版本高的选择一个复制link在网站https://fontawesome.dashgame.com/选择自己需要的图标复制标签,例如fa-adjust需要修改的只有圈住的地方2.在本地使用图标本地使用时,需要把下载好的图标库移动到项目目标文件内,其他步骤同在线操作一样使用UR.

2020-10-09 09:11:06 334

原创 Axure的使用

元件库的使用热区比较重要的图像热区(绿色),在进行交互属性的建立时,热区在页面上是不显示的打开链接的方式可以在新的标签页打开,也可以在当前窗口打开在设置大小中可以设置移动后的字体效果标签页的切换首页设置交互样式为选中,并且设置填充样式,禁用选中复选框选择选中设置选择/选中,只有产品参数为真交互样式为选中,并且设置参数帮助同上三个标签设置相同名称的选择组,即可实现单项选择下拉列表的设置将元素进行整合显示隐藏动作中,将选定的组合可见.

2020-10-09 08:57:12 368

原创 win10电脑插入U盘不显示U盘盘符怎么办?

先考虑U盘朝里或者朝外稍稍拔一下,可能是接触不良造成的不能被识别。不过这种可能自己就可以排除,还没有解决的就只能试一试下面的方法:方法一:使用Win+I组合键,出现Windows10设置,点击里面的“设备”选项,在设备窗口,在已连接的设备中点击插入的U盘设备,鼠标点击,就会出现“删除设备”的按钮,点击删除U盘从计算机拔出U盘,然后再将U盘插入电脑,就会出现U盘盘符了。方法二:给U盘分配盘符右键点击桌面的此电脑,选择菜单中的“管理”,在计算机管理界面点击左侧的“磁盘管理”,然后.

2020-10-09 08:56:51 2080 1

原创 如何将写好的网页上传到服务器

1.在宝塔Linux面板中,打开站点所在根目录,点击上传按钮,将自己写好的网页代码单个文件或者整个文件夹上传点击开始上传按钮,上传完毕点击关闭2.点击上传好的文件夹,将文件内容全选-剪切,回到根目录-粘贴所有3.在浏览器打开时输入IP地址:端口号/完整的文件目录...

2020-10-09 08:54:27 3837 1

原创 Gitee的使用

首先需要在官网https://gitee.com/注册一个gitee账号,记住自己的用户名(@后面的是用户名)和密码。一.当你作为团队创建者时1.新建一个仓库填写项目基本信息后直接点击创建,这样一个远程仓库就已经创建完成了2.建好之后在本地新建一个团队项目文件夹3.使用Visual Studio code 打开刚刚建立的文件夹4.点击终端选项卡-新终端 ctrl + ~ 打开vscode的控制台5.git init 初始化本地仓库,会多一个 .

2020-10-09 08:53:06 241 1

原创 解决 WordPress“正在执行例行维护,请一分钟后回来”

WordPress在升级程序、主题、插件时,都会先切换到维护模式,也就是显示 “正在执行例行维护,请一分钟后回来(Briefly unavailable for scheduled maintenance. Check back in a minute)”,如果升级顺利,也就几秒左右就恢复正常;但是如果由于网速不佳等原因导致升级中断,WordPress就会一直停留在维护模式,不论前台还是后台,都一直显示“正在执行例行维护,请一分钟后回来“。如何解决这个问题呢?1.马上通过FTP登录你的网站,删.

2020-10-09 08:51:17 154

原创 动态面板和中继器的使用

简单的利用函数制作一个计算器和点赞数递增的效果动态面板超市大屏上图片展示一般都用到了轮播图,轮播图就是用动态面板制作的。在编辑页面元件库中插入一个动态面板,在不同的状态编辑中插入不同的图片,大小要和设置的动态面板大小相同,不然页面显示不完整。有两种不同的设置方式,第一种设置了条件和状态,1状态跳转到2状态,2跳转到3,以此类推。第二种只设置了状态,调整为下一个自动链接。下面制作了一个复杂的动态面板,实现了按钮的跳...

2020-10-09 08:50:09 877

原创 如何在宝塔Linux面板中建立多个站点

1.默认你已经建立一个站点,并且在阿里云添加了两个端口的安全组规则端口范围:需要放行哪一个端口就写哪个授权对象:一般都写0.0.0.0/02.在宝塔Linux面板中添加站点域名填写www.dddd.com 诸如此类形式的皆可其他配置按需选择,点击提交3.此时在新建的站点后点击设置-域名管理-添加在文本框内填写你需要的IP地址:端口号 添加并删除之前你添加的域名www.dddd.com端口号你放行了哪一个就添加哪一个4.复制第一个站点配置文件中所有内容到新的站点(在设置-.

2020-10-09 00:14:04 5922 2

原创 第一篇旅游攻略

青岛对于五一小假期来说,青岛成都济南都不失为旅游的好去处。这次的五一之旅我定在了青岛。从太原出发,坐火车12个小时,坐动车7个小时,青岛站和青岛北站都可以到达。晚上出发最为合适,睡上一觉就到站了(其实是不只一觉,睡到你怀疑人生),最好是在青岛站下车,因为附近交通景点住宿都很方便。第一站当然是栈桥 青岛栈桥全长440米,宽8米,钢混结构。桥南端筑半圆形防波堤,堤内建有民族形式的两层八角楼,名“回澜阁”,游人伫立阁旁,欣赏层层巨浪涌来,“飞阁回澜”被誉为“青岛十景”之一。桥北沿岸,辟.

2020-10-08 22:39:13 491 3

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除