09 2022 档案
摘要：实现代码：https://codepen.io/huangchun/pen/rNvYBwa
阅读全文
摘要：1. router-link //不带参数 <router-link :to="{path:'/home'}"> <router-link :to="{name:'Home'}"> //带参数 <router-link :to={name:'Home',params:{id:1}}> 2. this
阅读全文
摘要：ajax详解 参考：https://www.cnblogs.com/dongfangshenhua/p/6858833.html 什么是 ajax 全称：Asynchronous JavaScript And XML（异步的JavaScript和XML） 作用：实现异步请求的技术。 什么是同步请求：
阅读全文
摘要：安装步骤 1、如果之前装有WebStorm版本, 可以先删卸载, 再重新安装 2、到官网下载WebStorm安装包 https://www.jetbrains.com/zh-cn/webstorm/download/other.html 推荐使用2021.2.2版本, 亲测有效 3、双击打开exe程
阅读全文
摘要：node: 16版本 npm：8版本 新手专用。 一、创建 1. 以下代码：注意my-vue-app为即将创建项目的名字，可以自行更改 # npm 6.x npm init vite@latest my-vue-app --template vue # npm 7+, extra double-da
阅读全文
摘要：以vue2为例 一、 创建并初始化项目 1、vscode打开一个空文件夹，打开终端 2、终端运行：vue create 【项目名】 ##注意项目名不要用驼峰标识，可以用“-”连接 3、按上下键选择 :Marually select features 4、按上下键移动光标，按空格键选择： 5、选择2.
阅读全文
摘要：效果图： 实现代码： //创建阴影画布 //创建画布 var canvas = document.createElement('canvas'); //设置画布大小 canvas.width = 128; canvas.height=128; //创建一个用于在画布上绘图的环境 var contex
阅读全文
摘要：要达到的效果 点的坐标相同，光圈在处理前被球面遮挡，处理后在球面显示。 处理前： 处理后： 核心代码实现 function createPointMesh( pos, texture ) { //创建点 var material = new THREE.MeshBasicMaterial( { ma
阅读全文
摘要：加载中国地图json数据 let loader = new THREE.FileLoader(); loader.load('model/chinaJson.json', function (data) { let jsonData = JSON.parse(data); initMap(jsonD
阅读全文
摘要：/** * 经纬度坐标转换为3D控件坐标 * lng:纬度 * lat:进度 * radius：半径 */ js方法转换 function lglt2xyz(lng,lat,radius){ const phi = (180+lng) * (Math.PI/180); const theta = (
阅读全文
摘要：/** * 通过两点绘制贝塞尔曲线 * v0：起点, * v3：终点 */ function addLines(v0, v3) { // 计算向量夹角 let angle = v0.angleTo(v3) * 270 / Math.PI / 10; // 0 ~ Math.PI let aLen =
阅读全文
摘要：实现效果 信号光圈由中心向外发散，并逐渐消失。 实现思路 使用画布制作光圈，以画布作为纹理，在循环渲染函数中改变mesh的尺寸和透明度。 具体实现 1、画布制作光圈 //创建画布 var canvas = document.createElement('canvas'); //设置画布大小 canv
阅读全文
摘要：效果： 基本思路 //一定要加上这两行，不然无法显示阴影 renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; //创建网格物体 //将网格物体设置为产生阴影的物体 //创建一个平面
阅读全文
摘要：基本思路 1、获取与鼠标射线相交的第一个物体 2、保留物体原来的颜色 3、改变物体的颜色 4、鼠标已开物体，将物体的颜色换回原来的颜色 实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</
阅读全文
摘要：1、常用命令 常用 git remote add origin git@github.com:yeszao/dofiler.git # 配置远程git版本库 git pull origin master # 下载代码及快速合并 git push origin master # 上传代码及快速合并 g
阅读全文
摘要：html代码 <div class="page-block"> <div class="page page-1"> <ul> <li class="article-hover"> <div class="info-content"> <a href="1.html" target="mainIfra
阅读全文
摘要：html: <ul> <li><a class="list-group-item text-center " href="#">中心简介</a></li> <li><a class="list-group-item text-center " href="#" >师资队伍</a></li> <li>
阅读全文
摘要：事件 onclick 点击事件 onload 用户进入某个页面的时候触发（onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。） onunload 用户离开某个页面的时候触发（onload 和 onunload 事件可用于处理 cookie。） oncha
阅读全文
摘要：input的事件： @input=“usernameInput()” 监听输入事件 @keyup.native=“userNameKeyup($event)” 监听键盘事件 @paste.native=“usernamePaste” 监听粘贴事件 @blur=“blurUsername()” 监听失
阅读全文
摘要：html代码： <div class="panel"> <!--公共盒子--> <div class="panel-foot"> </div> </div> CSS代码： .panel { <!--父框架--> position: relative; height: 3.875rem; border
阅读全文
摘要：transform属性： scale(number)：等比例方大number倍。课用于导航栏鼠标悬浮在导航项上时使得导航项等比方大。 rotate(*deg):旋转。360deg=1turn=400grad。 skew(*deg):倾斜。 translate（X,Y）:移动。 transform-o
阅读全文
摘要：table直接加边效果： table,table td{ border: 1px solid #000; } table td{ padding: 10px 30px; } table单边效果： table { width: 200px; border-top: 1px solid #999; bo
阅读全文
摘要：CSS实现一个旋转的加载页面 静态效果图： html代码： <body> <div class="loading"> <span>loading.....</span> </div> </body> CSS代码： <style> body{ margin: 0; padding: 0; height
阅读全文
摘要：实现效果： position:absolute; display: block;//不占据地方 width: 100%; height: 575px; background-color: orangered; transform-origin:0 0 ;//使得倾斜点为右上角 transform:
阅读全文
摘要：Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。它即可以应用于容器中，也可以应用于行内元素。 常用例子 子元素在容器中心位置（垂直居中、水平居中） display
阅读全文
摘要：2、溢出隐藏 文字溢出操作 效果图：单行+溢出隐藏 .nameBox { // 文字不允许换行（单行文本） white-space: nowrap; // 溢出部分隐藏 overflow: hidden; // 文本溢出后，使用 ... 代替 text-overflow: ellipsis; mar
阅读全文
摘要：<script> var t=null; t=setTimeout(time,1000); function time(){ clearTimeout(t);//清除定时器 dt=new Date(); var y=dt.getFullYear(); var mt=dt.getMonth()+1;
阅读全文
摘要：/* 背景图片 */ background-image:url('../images/bg2.jpg'); /* 背景图片位置固定 */ background-attachment:fixed; /* 背景不重复 */ background-repeat:no-repeat; /* 背景位置居中 *
阅读全文
摘要：点击查看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont
阅读全文