- 博客(54)
- 收藏
- 关注
RSS订阅原创 ES5中的新增方法：some
array.some(function(currentValue,index,arr))some()方法用于检测数组中的元素是否满足指定条件，通俗点查找数组中是否有满足条件的元素注意它返回值是布尔值，如果查找到这个元素，就返回true，如果查找不到就返回false如果找到第一个满足条件的元素，则终止循环不再继续查找currentValue：数组当前项的值index：数组当前项的索引arr：数组对象本身<!DOCTYPE html><html lang=".
2021-05-26 10:57:49
288
原创 ES5中的新增方法：filter
array.filter(function(currentValue,index,arr))filter()方法创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，主要用于筛选数组，注意它直接返回一个新数组currentValue：数组当前项的值index：数组当前项的索引arr：数组对象本身<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8".
2021-05-26 10:52:01
626
原创 ES5中的新增方法：forEach
array.forEach(function(currentValue,index,arr))currentValue：数组当前项的值index：数组当前项的索引arr：数组对象本身<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in.
2021-05-26 10:45:56
314
原创 商品查询案例(3)-利用数组新增方法操作数据some
<!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" /> <ti...
2021-05-26 10:08:44
208
原创 商品查询案例(2)-利用数组新增方法操作数据filter
<!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" /> <ti...
2021-05-26 09:58:33
159
原创 商品查询案例(1)-利用数组新增方法操作数据forEach
<!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" /> <ti...
2021-05-26 09:39:34
207
原创 Vue.js中深入剖析v-for
Vue.js中深入剖析v-for:<!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..
2021-05-06 20:02:23
144
原创 Vue.js中v-for的实例应用
Vue.js:通过v-for实现一个用户信息列表<!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.
2021-05-06 17:26:39
346
原创 ECharts(7)-折线图的实现
ECharts:需求：折线图的实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> .
2021-04-29 19:38:34
109
原创 ECharts(6)-散点图的实现
ECharts：需求：散点图的实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> .
2021-04-29 19:35:31
703
原创 ECharts(5)-雷达图的实现
ECharts:需求：雷达图的实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> .
2021-04-29 19:32:06
483
原创 ECharts(4)-地图的实现
ECharts:需求:地图效果的基本实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">.
2021-04-28 12:08:13
454
原创 Canvas-绘制动态笑脸
Canvas：需求：绘制动态笑脸<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0".
2021-03-29 16:42:48
639
1
原创 ECharts(1)-饼状图
ECharts：需求：绘制饼状图<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0".
2021-03-29 14:14:25
132
原创 ECharts(3)-百分比仪表图
ECharts:需求:绘制百分比仪表图<script src="js/echarts.min.js"></script><body> <!--创建容器：仪表图--> <div id="main" style="width: 800px;height: 600px;border: 1px solid red"></div> <script> //仪表图 .
2021-03-26 18:30:48
818
原创 ECharts(2)-分公司销售柱状图示例
ECharts:需求:绘制分公司销售柱状图<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale.
2021-03-26 17:20:35
282
原创 ECharts(1)-5分钟上手ECharts
入门示例-柱状统计图<!--加载js文件--><script src="js/echarts.min.js"></script><body> <!--创建容器--> <div id="main" style="width:800px;height:600px;"></div></body><body> <!--通过js创建图形--> ..
2021-03-26 16:56:29
191
原创 2D矢量图-SVG(3)-预定义形状,渐变,滤镜
SVG:需求1:画一个三角形需求2:画一个五角星<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-.
2021-03-26 15:50:13
201
原创 2D矢量图-SVG(2)-圆形
需求：(1)动态创建30个大小不同，颜色不同，透明度不同，位置不同圆形(2)当用户点击某个圆时慢慢变大变淡直到消失 删除圆<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-s..
2021-03-25 18:01:35
241
原创 2D矢量图-SVG(1)-创建流程(圆形为例)
SVG图形创建流程：（1）创建画布标签<svg id="svg" width="500" height="400"> ...</svg>（2）添加圆环标签<circle cx="" cy="" r="" fill="" stroke=""></circle>cx,cy 圆心坐标r 半径fill 填充stroke 描边通过js在svg画布上动态创建元素（1）字符...
2021-03-25 15:35:36
282
原创 JavaScript中字符串转数组
一.split()<script> var str="abcdefg"; console.log(str.split("")); //["a", "b", "c", "d", "e", "f", "g"] var str1 = "a,bb,cc"; console.log(str1.split()); // ["a,bb,cc"] console.log(str1.split("")); // ["a", "b"
2021-03-25 11:02:35
314
原创 JavaScript中数组转字符串
一.toString()<script> var fruits=["Banana", "Orange", "Apple", "Mango"]; console.log(fruits.toString(),typeof fruits.toString()); //Banana,Orange,Apple,Mango string</script>二.join()<script> var fruits=["Banana", "O
2021-03-25 10:46:09
79
原创 JavaScript高级-数学对象
Math对象中的方法(常用) 方法 说明 max(a,b,...,n) 返回一组数中的最大值 min(a,b,...,n) 返回一组数中的最小值 sin(x) 正弦 cos(x) 余弦 tan(x) 正切 asin(x) 反正弦 acos(x) 反余弦 atan(x) 反正切 atan2(x) 反正切 floor(x) 向下取整 ceil(x) 向上取整 random()
2021-03-24 21:46:04
102
原创 JQuery中假数据渲染页面(2)
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http.
2021-03-23 22:20:36
271
原创 JQuery中假数据渲染页面(1)
一.引入JQuery库文件<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>二.编写css样式<style> table{ border-collapse:collapse; margin:0 auto; } th,td{ width: 300px; height:
2021-03-22 20:54:57
480
原创 Canvas-绘图-路径-使用路径创建可以动态前进的圆环进度条
Canvas:需求：使用路径创建可以动态前进的圆环进度条<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimu.
2021-03-22 17:32:19
170
原创 Canvas-绘图-路径
路径：绘制不规则图形（复杂）path：由多个坐标点组成任意图形，图形本身不可见，可以描边或者填充ctx.beginPath();//开始一条新路径(上一条路径结束)ctx.moveTo(x,y);//移动到指定点(x,y)ctx.lineTo(x,y);//从当前点到指定点绘制一条直线(x,y)ctx.stroke();//描边ctx.fill();//填充ctx.closePath();//闭合一条路径(结束点到开始点画一条直线)ctx.arc(cx,cy,r,start.
2021-03-22 16:10:58
291
原创 Canvas-绘图-文本
ctx.strokeText(str,x,y);//绘制描边文字(空心)ctx.fillText(str,x,y);//绘制填充文字(实心)str:绘制文本x,y:字符串左上角位置(以文本基线为准)ctx.font="19px SimHei";//文本大小/字体样式ctx.textBaseline="top"//调整文本基线[top/alphabetic/bottom]<!doctype html><html lang="en"><head.
2021-03-22 15:01:49
154
原创 Canvas(在画布上绘制分公司销售统计图(2))
Canvas:需求：在画布上绘制分公司销售统计图(2)<style> body{ text-align:center; } canvas{ background-color:#ccc; }</style><body> <canvas id="canvas" width="500" height="400"></canvas></body>..
2021-03-22 14:09:44
181
原创 Canvas(在画布上绘制分公司销售统计图(1))
Canvas：需求：在画布上绘制分公司销售统计图<style> body{ text-align:center; } canvas{ background-color:#ccc; }</style><body> <canvas id="canvas" width="500" height="400"></canvas></body&g..
2021-03-20 17:14:44
220
原创 Canvas(在画布上绘制左右移动实心矩形)
Canvas：需求：在画布上绘制左右移动实心矩形<style> body{ text-align:center; } canvas{ background-color:#ccc; }</style><body> <canvas id="canvas" width="500" height="400"></canvas></body>&.
2021-03-19 20:14:58
1003
原创 Canvas制作(在画布四个角与中间位置画五个100*80，实心矩形要求颜色不同)
Canvas制作:需求:在画布四个角与中间位置画五个100*80的矩形，实心矩形要求颜色不同<style> body{ text-align:center; } canvas{ background-color:"#ccc"; }</style><body> <h1>Canvas矩形</h1> <canvas id="canvas.
2021-03-19 18:37:10
459
原创 Canvas基础使用
一.什么是Canvas？1.HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.2.<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。3.你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。二.Canvas基础使用：<style> body{ text-align: center; } canvas{
2021-03-19 18:02:36
134
转载 flex布局
flex布局原理--flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局采用Flex布局的元素，称为Flex父容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为Flex项目(flex item)，简称“项目”。体验
2021-03-08 21:49:44
95
原创 Nodejs中应用express创建web服务器
//创建商品路由器product.js，添加若干个路由，在服务器下引入并挂载app.js//引入express模块const express=require('express');//引入路由器模块const productRouter=require('./product.js');//创建web服务器const app=express();//设置端口app.listen(8080);//挂载路由器到web服务器app.use('/product',productRouter
2020-11-29 21:49:49
219
原创 应用Nodejs创建web服务器
//创建web服务器，设置端口，根据浏览器的URL做出响应 /index 响应'<h2>这是首页</h2>' /list 响应文件1.html /study 跳转到http://www.tmooc.cn 其他 响应404 not found//1.引入http模块const http=require('http');...
2020-11-29 17:29:55
320
原创 Node.js中用http模块创建web服务器
//1.引入http模块const http=require("http");//2.创建web服务器const app=http.createServer();//3.设置端口号app.listen(8080);//4.添加请求事件app.on('request',(req,res)=>{ //4.1设置响应的状态码和头信息 res.writeHead(200,{ 'Content-Type':'text/html;charset=utf-8'}); //4..
2020-11-29 17:11:12
421
1
原创 CSS-03表格样式、图片样式、背景样式
一.表格样式1.表格标题位置(caption-side)caption-side:取值;caption-side属性取值 属性值 说明 top 标题在顶部(默认值) bottom 标题在底部 2.表格边框合并(border-collapse)border-collapse:取值;border-collapse属性取值 属性值 说明 separate 边框分开，有空隙(默认值) collapse 边框合并，无空隙 3.表格
2020-10-08 23:38:24
276
原创 CSS-02边框样式、列表样式
边框样式属性 属性 说明 border-width 边框的宽度 border-style 边框的外观(实线、虚线等) border-color 边框的颜色 1.border-width：用于定义边框的宽度，取值是一个像素值2.border-style：用于定义边框的外观border-style属性取值 属性值 说明 none 无样式 dashed 虚线 solid 实线 3.border-color：取值可以是“关键
2020-10-08 22:24:20
179
原创 MYSQL简单查询和复杂查询
一.自增列AUTO_INCREMENT:自动自增，插入数据的时候，不需要设置编号，只需要设置为NULL，就会获取当前的最大值然后加1插入。注意事项：1.自增列，只能添加在主键列上 2.自增列允许手动赋值#练习：编写脚本文件01_tedu.sql，先丢弃再创建数据库tedu，设置编码为utf-8，进入该数据库，创建保存部门数据的表dept，包含有did(主键，自增)，部门名称dname(添加唯一约束)，插入以下数据10 研发部 20 市场部 30 运营部 40 测试部；创建保存员工数据的表e
2020-10-06 16:24:42
491
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人