zhaoyingbo/nodebook
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
RainSun 2019-10-20 14:56:42 +08:00
parent 8e61e00422
commit 7895ac1106
6 changed files with 382 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
20191019/20191019.md
View File

@ -31,4 +31,21 @@
}
},10)
}
```
```
* 轮播图按钮案例
[linkToHtml](./buttonslider.html)
* css定位一般不超过5级
* html 特殊字符
* `<` > 大于号
* `&gt;` < 小于号
* `&amp;` & 与号
* `&quot;` " 引号
* `&reg;` 已注册
* `&copy;` 版权
* `&trade;` 商标
* `&ensp;` 半方大的空白
* `&emsp;` 全方大的的空白
* `&nbsp;` 不断行的空

156
20191019/buttonSlider.html Normal file
View File

@ -0,0 +1,156 @@
<!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">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.slider {
width: 590px;
height: 470px;
padding: 10px;
border : 1px solid #ccc;
margin: 50px auto;
position: relative;
}
.slider .inner {
width: 590px;
height: 470px;
position: relative;
overflow: hidden;
}
.slider .inner ul {
width: 500%;
position: absolute;
}
.slider .inner ul li {
float: left;
}
.slider .btns {
/* position: absolute;
left: 10px;
right: 10px;
top: 50%; */
}
.slider .btns span {
/* display: inline-block; */
width:45px;
height: 45px;
line-height: 45px;
text-align: center;
font-size: 20px;
font-weight: 600;
color: #000000;
background: rgba(255, 255, 255, 0.8);
cursor: pointer;
position: absolute;
left: 10px;
top: 50%;
margin-top:-22px;
}
.slider .btns span:last-child {
right: 10px;
left: auto;
}
</style>
</head>
<body>
<div class="slider" id="slider">
<div class="inner">
<ul>
<li><a href="#"><img src="https://img20.360buyimg.com/pop/s590x470_jfs/t1/82345/16/13178/77786/5da93550E6449f58e/f5b14f641913efba.jpg.webp" alt="" srcset=""></a></li>
<li><a href="#"><img src="https://img13.360buyimg.com/pop/s590x470_jfs/t1/73861/8/7311/133024/5d562902E29c956c1/da390c8c345c48e0.jpg.webp" alt="" srcset=""></a></li>
<li><a href="#"><img src="https://img13.360buyimg.com/pop/s590x470_jfs/t1/79136/10/13206/197242/5da92d47Ee54665df/39d85a2990ba58d1.jpg.webp" alt="" srcset=""></a></li>
<li><a href="#"><img src="https://imgcps.jd.com/ling/22692212401/6JGh6JCE6YWS6ZKc5oOg/6YOo5YiGMuS7tjXmipg/p-5bd8253082acdd181d02fa02/153dad62.jpg" alt="" srcset=""></a></li>
<li><a href="#"><img src="https://img14.360buyimg.com/pop/s590x470_jfs/t1/46901/24/7545/62345/5d52317fEebadcf80/8fb168cddd5ef2b9.jpg.webp" alt="" srcset=""></a></li>
</ul>
</div>
<div class="btns">
<span>&lt;</span>
<span>&gt;</span>
</div>
</div>
<script type="text/javascript">
function my$(id) {
return document.getElementById(id)
}
//获取元素slider
var slider = my$('slider');
//获取inner
var inner = slider.children[0]
//获取ul
var ul = inner.children[0]
//获取btn
var btns = slider.children[1]
//获取图片的宽度
var imgW = inner.offsetWidth
//获取左边按钮
var prev = btns.children[0]
//获取右边按钮
var next = btns.children[1]
//添加右侧按钮的点击事件
//添加计数器
var index = 0
next.onclick = function() {
if(index < 4) index++
var target = -imgW * index
//ul移动 改变ul的left值
//向左移动一张图片的距离 点击一次
//向左移动2张图片的距离 点击2次
//向左移动3张图片的距离 点击3次
//向左移动4张图片的距离 点击4次
//向左移动5张图片的距离 点击5次
//...
aniamte(ul, target)
}
prev.onclick = function() {
if(index > 0) {
index --
}
var target = -imgW * index
aniamte(ul, target)
}
//给slider添加鼠标移入移出效果， 控制按钮的显示和隐藏
slider.onmouseover = function() {
btns.style.display = 'block';
}
slider.onmouseout = function() {
btns.style.display = 'none';
}
function aniamte(ele,target) {
clearInterval(ele.timer)
ele.timer = setInterval(function(){
var current = ele.offsetLeft
var step = 10;
step = target - current >= 0 ? step : - step
current += step
if(Math.abs(target - current) > step) {
ele.style.left = current + 'px';
} else {
clearInterval(ele.temer)
ele.style.left = target + 'px'
ele.temer = null;
}
}, 10)
}
</script>
</body>
</html>

5
20191020/20191020.md Normal file
View File

@ -0,0 +1,5 @@
# 20191020
![js](https://img.shields.io/badge/language-js-orange.svg)
*

0
git.md → Miscellaneous/git.md
View File

154
Miscellaneous/img2string.html Normal file
View File

@ -0,0 +1,154 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script>
let img = new Image();
let logo;
//加载canvas
window.onload = () => {
let canvas = document.getElementById("canvas");
canvasInfo = canvas.getContext("2d");
document.getElementById('btn').onclick = start
document.getElementById('upButton').onchange = getImg;
};
//执行
let start = () => {
console.log('start')
//清空字符画
logo = "";
//先记录比率,如果宽，那么先缩放宽,再用比率算出长,反之同理
let rate = img.width / img.height;
if (rate > 1) {
img.width = 400;
img.height = 400 / rate;
} else {
img.height = 400;
img.width = 400 / rate;
}
//将图片绘制在canvas上
canvasInfo.drawImage(img, 0, 0, img.width, img.height);
//从canvas上获取像素信息
var imgData = canvasInfo.getImageData(0, 0, img.width, img.height);
//调整字符大小，追求更高精度就在这里调小
let size = 5 - parseInt(document.getElementById("thisSize").value);
//调整是否为彩色
let color = document.getElementById("thisColor").value !== "false";
//生成主体，逐个读取字符
for (let i = 0; i < img.width; i = i + size) {
for (let j = 0; j < img.height; j = j + size) {
let curPoint = (i * img.width + j) * 4; //×4是因为，1为r，2为g，3为b，4为a，四个是一组rgba值
let gray =
imgData.data[curPoint] * 0.299 +
imgData.data[curPoint + 1] * 0.587 +
imgData.data[curPoint + 2] * 0.114; //计算灰度值
thisColor = `rgb(${imgData.data[curPoint]},${
imgData.data[curPoint + 1]
},${imgData.data[curPoint + 2]})`; //保存像素点rgb值
color ? toText(gray, thisColor) : toText(gray, false); //有颜色就转化rgb值，没颜色就不转
}
logo = logo + "</br>";
}
document.getElementById("rightDiv").innerHTML = logo; //将字符串填充到html
};
//读取图片
let getImg = file => {
var reader = new FileReader();
reader.readAsDataURL(document.getElementById("upButton").files[0]);
reader.onload = function() {
img.src = reader.result;
};
};
//根据灰度转化字符，添加颜色
function toText(g, thisColor) {
if (thisColor) {
logo = logo + "<span style='color:" + thisColor + "'>";
}
if (g <= 17) {
logo = logo + "M";
} else if (g > 17 && g <= 34) {
logo = logo + "N";
} else if (g > 34 && g <= 51) {
logo = logo + "H";
} else if (g > 51 && g <= 68) {
logo = logo + "Q";
} else if (g > 68 && g <= 85) {
logo = logo + "&";
} else if (g > 85 && g <= 102) {
logo = logo + "O";
} else if (g > 102 && g <= 119) {
logo = logo + "C";
} else if (g > 119 && g <= 136) {
logo = logo + "?";
} else if (g > 136 && g <= 153) {
logo = logo + "7";
} else if (g > 153 && g <= 170) {
logo = logo + ">";
} else if (g > 170 && g <= 187) {
logo = logo + "!";
} else if (g > 187 && g <= 204) {
logo = logo + ":";
} else if (g > 204 && g <= 221) {
logo = logo + "-";
} else if (g > 221 && g <= 238) {
logo = logo + ";";
} else {
logo = logo + ".";
}
if (thisColor) {
logo = logo + "<span>";
}
}
</script>
<title>图片转字符</title>
</head>
<body>
<!-- 图片上传 -->
<form id="uf">
<input type="file" name="file" id="upButton" οnchange="getImg()" />
</form>
<!-- 选择字符画大小 -->
请输入精度等级：
<select id="thisSize">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<!-- 选择颜色 -->
是否使用颜色：
<select id="thisColor">
<option value="true">是</option>
<option value="false">否</option>
</select>
<!-- 执行按钮 -->
<button id="btn">开始执行</button>
<!-- 辅助canvas，设为隐藏 -->
<div id="leftDiv">
<canvas id="canvas" width="400" height="400" style="display:none">Canvas</canvas>
</div>
<!-- 生成位置 -->
<div id="rightDiv" style="font-family:'Consolas';line-height: 0.5em;"></div>
</body>
</html>

49
README.md
View File

@ -1,5 +1,18 @@
# 吉软大前端笔记本
## Miscellaneous
![js](https://img.shields.io/badge/language-js-orange.svg)
* 图片转字符串
[linkToHtml](./Miscellaneous/img2string.html)
![git](https://img.shields.io/badge/language-git-green.svg)
* git常用命令总结
[linkToMd](./Miscellaneous/git.md)
---
## 20190925
![js](https://img.shields.io/badge/language-js-orange.svg)
@ -58,3 +71,39 @@
* [上课视频链接](https://pan.baidu.com/s/1l4mVVmklb1Hiz2uWQxBdxA)
提取码：nc9w
---
## 20191016
![js](https://img.shields.io/badge/language-js-orange.svg)
[linkToMd](./20191016/20191016.md)
* offset示例
* [上课视频链接](https://pan.baidu.com/s/1-iDQ03LSqXQ1Yu04IX0rgg)
提取码：ixle
---
## 20191018
![js](https://img.shields.io/badge/language-js-orange.svg)
[linkToHtml](./20191018/offset.html)
* offset示例
* [上课视频链接](https://pan.baidu.com/s/1hGA9ohkQ7J9b1GO6AjSMeQ&shfl=sharepset)
提取码：smie
---
## 20191019
![js](https://img.shields.io/badge/language-js-orange.svg)
[linkToMd](./20191018/20191019.md)
* 轮播图案例
* 轮播图按钮案例
* css定位一般不超过5级
* html 特殊字符
* [上课视频链接](https://pan.baidu.com/s/18LetxRVExyVBQAq20Xo3_g&shfl=sharepset)
提取码：pne2
---