boboj1 - 个人主页动态

2021-10-08 14:48

已编辑

对象简介语法及对象新增 对象简介语法 let name = 'Strive'; let age = 18; let json ={  name, //name:name, age, //age:age /* showA:function(){ return this.name; } */ showA(){  return this.name; }, showB(){  return this.age; } }; console.log(json.showA(), json.showB());  对象扩展运算符 let { x,y,...z} = { x : 1,y : 2,a : 3,b : ...

0 点赞评论收藏

2021-10-08 14:47

已编辑

湖北第二师范学院 Web前端

ES6语法学习笔记（六）Promise

Promise  作用：解决异步回调的问题，Promise是一个对象 Promise对象有三种状态：pendding(正在请求),rejected(失败),resolved(成功)  语法： let promise = new Promise(function(resolve,reject){  //resolve 调用成功 //reject 调用失败 }); promise.then((res) => { //then中有两个参数，res对应resolve的回调，err对应reject的回调 },(err) => {  }) promise.catch((err) => {...

0 点赞评论收藏

2021-10-08 14:47

湖北第二师范学院 Web前端

ES6语法学习笔记（七）类-继承

类-继承 ES5中的继承方式  普通的继承方式  //父类 function Father(name) {  this.name = name; } Father.prototype.showName function() {  return `名字是:${ this.name}`; } //子类 function Son(name,age) {  Father.call(this,name); this.age = age; } Son.prototype = new Father(); Son.prototype.showAge = function() {  return `年龄是：${...

0 点赞评论收藏

2021-10-08 14:46

湖北第二师范学院 Web前端

ES6语法学习笔记（八）Symbol

新增数据类型symbol  js中的数据类型有：number、string、boolean、object、function、undefined、symbol symbol是es6新增的一种数据类型，它表示的是唯一的值(该值用Symbol声明后就是唯一的)  symbol的理解和使用  定义：  let syml = Symbol('aaa'); //括号里面的'aaa'并不是syml存储的值，它只是Symbol的描述 console.log(syml);//Symbol(aaa)   注意： 1.即使Symbol()后面的描述是一样的，但仍然是两个不同的值  let a = Symbol('a...

0 点赞评论收藏

2021-10-08 14:46

已编辑

湖北第二师范学院 Web前端

jQuery实现放大镜功能

该功能为三部分  1.小图部分 小图宽高为400px 2.放大镜 放大镜宽高为200px 3.大图部分 大图宽高为800px  大图小图都是同一张图片，通过css来设置宽高，通过鼠标在小图中的位置来控制大图的横向和纵向滚动条的位置来实现该功能 效果图：  html代码 左边为小图部分，右边为大图部分 <div id="smallBox"> <img src="/img/1.png" alt=""> <div id="zoom"></div> </div> ...

0 点赞评论收藏

2021-10-08 14:45

湖北第二师范学院 Web前端

ES6语法学习笔记（九）generator&async

generator  generator(生成器),整个Generator函数就是一个异步任务的容器，在需要暂停的位置使用yield语句 基本语法以及使用  function * show() {  yield '1'; yield '2'; return '3'; } let a = show(); //a.next() //{value: "1", done: false} //a.next() //{value: "2", done: false} //a.next() //{value: "3", done: true}  当...

0 点赞评论收藏

2021-10-08 14:45

湖北第二师范学院 Web前端

ES6语法学习笔记（十）Set和Map

Set  set数据结构类似于数组，但是里面不能有重复的值 注意：Set({a:1})这样使用是错误的，括号里面不能直接放对象,但可以通过add()方法进行添加 用法：  let a = new Set(['a','b']); console.log(a);//{"a", "b"}  set数据结构的几种方法  add() – 添加一项 该方法可以链式调用  let a = new Set(['a','b']); a.add(1); //a.add(1,2);//这样写也只会添加1进去 console.log(a);//{"a", &...

0 点赞评论收藏

2021-10-08 14:45

已编辑

湖北第二师范学院 Web前端

jQuery轮播图

html代码：  <div id="playBox" class="play-box"> <div id="imgList"> <a href="http://www.baidu.com" target="_blank" class="current"> <img src="/img/1.png" alt=""> </a> <a href="http://www...

0 点赞评论收藏

2021-10-08 14:44

已编辑

湖北第二师范学院 Web前端

原生js实现渐变轮播图

效果预览  全部代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t...

0 点赞评论收藏

2021-10-08 14:44

已编辑

湖北第二师范学院 Web前端

JS正则表达式练习

js正则表达式总结：正则表达式总结 练习： 1.邮政编码：由6个数字构成，第一位不可以是0  var reg = /^[1-9]\d{5}$/;  2.手机号码：由13/15/17/18开头的11位数字 var reg = /^1[3578]\d{9}$/;  3.QQ号：第一位不可以是0，位数在5-12位数字构成 var reg = /^[1-9]\d{4,11}$/;  4.检查是否是压缩文件：文件名由字母、数字、下划线构成，不可以以数字开头，后缀为.zip/rar/gz var reg = /^[a-zA-Z_]\w*\.(zip|rar|gz)$/;  5.密码：字母、数字、下划线构成...

0 点赞评论收藏

2021-10-08 14:44

已编辑

湖北第二师范学院 Web前端

Bootstrap网站页面练习实例

整体页面 整个页面分为6大部分  整体效果    在使用Bootstrap时要注意响应式，组件要看情况设置固定的宽高。 导航栏 在使用导航栏的时候要注意搜索框组件，它的宽度设置成响应式 @media screen and (min-width:768px) and (max-width:988px) {  .input-group {  width: 150px; } }  广告条 这里面就是先放一个巨幕组件，然后在巨幕中放轮播图和列表，轮播图中图片宽高设置成为100% 主体内容部分 该部分整体结构 <div class="container"> <div...

0 点赞评论收藏

2021-10-08 14:43

湖北第二师范学院 Web前端

CSS3新特性-rem

新增单位rem  em：根据父元素的大小来决定 rem：根据根元素(html)元素来决定  html元素默认字体大小为16px(基础字体大小) Chrome浏览器不支持12px以下的字体大小(字体大小小于12px后改字体一直为12px)，其他浏览器没问题  <div class="l1"> 文字 <div class="l2"> 文字 </div> </div>   html {  /* 根元素默认大小为16px */ /* 62.5% * 16 = 10px */ font-size: 62.5%; } ...

0 点赞评论收藏

2021-10-08 14:43

已编辑

湖北第二师范学院 Web前端

CSS3新特性-选择器

结构性伪类 :first‐child/last‐child 父元素中第一个元素和最后一个元素  <div> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </div>   div li:first-child {  color: red; } div li:last-child {  color: green; }  这个元素必须是li，并且这个li元素必须是div的第一个子元素（同理最后一个）  :nth‐child(n)/nth‐...

0 点赞评论收藏

2021-10-08 14:43

已编辑

湖北第二师范学院 Web前端

CSS3新特性-新增样式

新增样式  文本效果       文本阴影 文本裁剪 单词换行    边框       圆角边框 图片边框    背景       图片背景 渐变背景    盒子       盒子大小 界面上直接调节盒子尺寸 盒子阴影       文本效果 文本阴影 语法： text‐shadow: x y blur color;  x：水平方向上右为正 y：垂直方向上下为正 blur：模糊程度 color：文本颜色  <div> 我是一行文本 </div>   div {  text-shadow: 10px 5px 3px red; } </style>   文本裁剪 ...

0 点赞评论收藏

2021-10-08 14:42

已编辑

湖北第二师范学院 Web前端

快速掌握CSS3弹性布局

简介 display:flex; 弹性布局是css3的一种新的布局方式，它能够快速轻易的实现页面的各种布局。  采用弹性布局的盒子叫做弹性盒子 弹性盒子中的元素称为弹性项目 容器中有两条轴，沿水平方向的叫主轴，垂直于主轴的叫侧轴  常用属性 flex-direction: (控制项目的排列方向)  row(默认) row-reverse column(纵向) column-reverse  flex-direction: row;   flex-direction: column;   flex-wrap （如果一行放不下是否换行）  nowrap(默认) wrap(换行) wrap-reve...

0 点赞评论收藏

创作者周榜

关注他的用户也关注了：