js中的__proto__和prototype
谈谈对原型链的理解
数组排序几种实现方式
js中push(),pop(),unshift(),shift()的用法小结
字符串去空格 加转义字符
var myInput = document.getElementById("myInput").value;
var bb = myInput.replace(/\s/ig, '').replace(/\'/ig, "\\'");TIME
<div id="myDiv">
</div>
<script type="text/javascript">
//console.log(new Date());
function animate() {
let item = new Date();
let year = item.getFullYear();
let month = item.getMonth() + 1 < 10 ? "0" + (parseInt(item.getMonth()) + 1) : item.getMinutes();
let day = item.getDate() < 10 ? "0" + item.getDate() : item.getDate();
let hour = item.getHours() < 10 ? "0" + item.getHours() : item.getHours();
let minute = item.getMinutes() < 10 ? "0" + item.getMinutes() : item.getMinutes();
let second = item.getSeconds() < 10 ? "0" + item.getSeconds() : item.getSeconds();
let week = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")[new Date().getDay()];
let week_1 = "星期" + "日一二三四五六 ".charAt(new Date(new Date()).getDay());
let currentTime = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second + " " + week;
myDiv.innerHTML = currentTime;
//console.log(currentTime);
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);调用摄像头 开 关
<body>
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">点击拍照</button>
<canvas id="canvas" width="640" height="480"></canvas>
<script type="text/javascript">
// Grab elements, create settings, etc.
var video1 = document.getElementById('video');
// Get access to the camera!
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
// Not adding `{ audio: true }` since we only want video now
navigator.mediaDevices.getUserMedia({
video: true
}).then(function(stream) {
video1.src = window.URL.createObjectURL(stream);
//关闭相机
//_this.mediaStreamTrack = stream.getTracks()[0];
//this.mediaStreamTrack.stop();
video1.play();
});
}
// Elements for taking the snapshot
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');
// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
});
</script>
</body>this解析
1.通过函数名()直接调用：this指向window
function func() {
console.log(this);
}
func(); // this--->window
2.通过对象.函数名()调用的：this指向这个对象
function func() {
console.log(this);
}
var obj = { // 狭义对象
name: "obj",
func1: func
};
obj.func1(); // this--->obj
3.函数作为数组的一个元素，通过数组下标调用的：this指向这个数组
function func() {
console.log(this);
}
var arr = [func, 1, 2, 3];
arr[0](); // this--->arr
4.函数作为window内置函数的回调函数调用：this指向window
function func() {
console.log(this);
}
setTimeout(func, 1000); // this--->window
5.函数作为构造函数，用new关键字调用时：this指向新new出的对象
function func() {
console.log(this);
}
var obj = new func(); //this--->new出的新obj时间转星期
var s = '2018-06-09 14:20:31';
console.log(new Date());
console.log( "星期"+"日一二三四五六 "
.charAt(new Date(s).getDay()));
console.log(new Date().getDay()); //6
var b = new Date(Date.parse(s.replace(/\-/g, "/")));
console.log(b.getDay());20180710142546
function getNowFormatDate() {
var date = new Date();
var month = date.getMonth() + 1;
var strDate = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
if(month >= 1 && month <= 9) {
month = "0" + month;
}
if(strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
if(hour >= 0 && hour <= 9) {
hour = "0" + hour;
}
if(minute >= 0 && minute <= 9) {
minute = "0" + minute;
}
if(second >= 0 && second <= 9) {
second = "0" + second;
}
var currentdate = date.getFullYear() + month + strDate + hour + minute + second;
return currentdate;
}时间字符串转化成时间戳
var time = '2018-03-31 00:00:00';
var date = (new Date(Date.parse(time.replace(/-/g,"/")))).getTime() / 1000;
console.log(date)将毫秒转化成00:00
function sec_to_time(s) {
var t = "";
s = parseInt(s / 1000);
var min = Math.floor(s / 60) % 60;
var sec = parseInt(s % 60);
if(0 < min < 10) {
t += "0" + min;
} else if(min == 0) {
t += "00";
} else {
t += min;
}
if(sec < 10) {
t += ":0" + sec;
} else {
t += ":" + sec;
}
return t;
}
隐藏滚动条
.element::-webkit-scrollbar {
display: none;
}layer.js
layer.open({
icon: 1,
skin: 'layui-layer-molv',
title: '失败提示',
content: "上传失败",
yes: function() {
location.href = 'index.php';
},
});随机数
1.随机JS
<script type="text/javascript" charset="utf-8" src="" id="ll"></script>
<script type="text/javascript">
document.getElementById("ll").src="../../js/ajaxTimeP.js?v=" +Math.random();
</script>
2.随机数
Math.floor(Math.random()*(10000-0+1)+0)
3.随机颜色
function randColor(){
var r = Math.floor(Math.random() * (255 - 0 + 1) + 0);
var g = Math.floor(Math.random() * (255 - 0 + 1) + 0);
var b = Math.floor(Math.random() * (255 - 0 + 1) + 0);
return "rgb(" + r +"," + g +"," + b +")";
}
function randNum(max, min){
return Math.floor(Math.random() * (max- min+ 1) + min);
}iOS vs Android
function isIosAndroid() {
if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
return "ios";
} else if(navigator.userAgent.match(/android/i)) {
console.log("android");
return "android";
}
} 截取字符串
1. stringObject.substring(start,stop)
start 必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。
stop 可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。
如果省略该参数，那么返回的子串会一直到字符串的结尾。
返回值
一个新的字符串，该字符串值包含 stringObject 的一个子字符串，
其内容是从 start 处到 stop-1 处的所有字符，其长度为 stop 减 start。
说明
substring 方法返回的子串包括 start 处的字符，但不包括 end 处的字符。
如果 start 与 end 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。
如果 start 比 end 小，那么该方法在提取子串之前会先交换这两个参数。
如果 start 或 end 为负数，那么它将被替换为 0。
2. substr 方法
substr 方法用于返回一个从指定位置开始的指定长度的子字符串。
stringObject.substr(start [, length ])
参数 描述
start 必需。所需的子字符串的起始位置。字符串中的第一个字符的索引为 0。
length 可选。在返回的子字符串中应包括的字符个数。
说明
如果 length 为 0 或负数，将返回一个空字符串。
如果没有指定该参数，则子字符串将延续到stringObject的最后。
3. slice(start, end)
start可选。规定从何处开始选取。如果是负数，
那么它规定从数组尾部开始算起的位置。也就是说，-1
指最后一个元素，-2 指倒数第二个元素，以此类推。
end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，
那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，
那么它规定的是从数组尾部开始算起的元素。数组删除
1.数组删除
var arr = new Array();
arr[0] = 'a';
arr[1] = 'b';
arr[2] = 'c';
arr[3] = 'c';
arr[4] = 'e';
for(var i = 0; i < arr.length; i++) {
if(arr[i] == 'c') {
arr.splice(i, 1);
i = i - 1; // 必须对i减去1，否则后面的一个元素会被跳过去
}
}
2.清空数组
ary.splice(0,ary.length);//清空数组
3.数组排序
3.1升序
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b});
3.2降序
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return b-a});
3.3乱序
var arr = []
for (var i = 0;i < 9;i++) {
arr.push(i)
}
arr.sort(function(){return Math.random() - 0.5});
console.log(arr)
3.4冒泡
var arr = [3,7,9,1,5,10];
var temp = 0;
for (var i = 0; i < arr.length; i++){
for (var j = 0; j < arr.length - i; j++){
if (arr[j] > arr[j + 1]){
temp = arr[j + 1];
arr[j + 1] = arr[j];
arr[j] = temp;
}
}
}
console.log(arr);数组互换字符串
a = new Array(a,b,c,d,e);
b = a.join('-'); //a-b-c-d-e 使用-拼接数组元素
var str = 'ab+c+de';
var a = str.split('+'); // [ab, c, de]url获取参数
function getQueryString(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var r = window.location.search.substr(1).match(reg);
if(r != null) {
//return unescape(r[2]);
return decodeURI(r[2]);
}
return null;
}JS插入五十个不重复的数字
var arr = [];
for (var i = 0; i < 50; i++){
var a = Math.floor(Math.random() * 200);
if (arr.indexOf(a) == -1) arr.push(a);
}验证码
1.四位随机
var chars = [
'0','1','2','3','4','5','6','7','8','9',
'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z',
'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
var res = "";
for(var i = 0; i < 4 ; i ++){
var num = GetRandomNum(0, chars.length);
res += chars[num];
console.log(res);
}
function GetRandomNum(Min, Max) {
return(Math.floor(Math.random() * (Max - Min + 1) + Min));
}
2.PHP
$str = "";
// 1-9 a-z A-Z
// 随机0-2数字
for ($i = 0; $i < 4; $i++){
$p = rand(0, 2);
switch ($p){
case 0:
$num = rand(49, 57); // 1-9随机取一个
$str = $str.chr($num);
break;
case 1:
$num = rand(97, 122); // a-z 随机取一个
$str = $str.chr($num);
break;
case 2:
$num = rand(65, 90); // A-Z 随机取一个
$str = $str.chr($num);
break;
}
}
var_dump($str);select 初级
<select id="wupin_id" onchange="a()">
<option value="0" selected>请选择您要使用的设备类型</option>
<option value="001">惠普扫描仪G5590</option>
<option value="002">惠普扫描仪G2410</option>
<option value="003">惠普扫描仪G3110</option>
</select>
<script type="text/javascript">
function a(){
var myselect=document.getElementById("wupin_id");
// selectedIndex代表的是你所选中项的index
var index=myselect.selectedIndex ;
myselect.options[index].value;
myselect.options[index].text;
console.log( myselect.options[index].value);
}
</script>百度提示框
<p>您的输入框: <input type="text" size="40" baiduSug="2"></p>
<script charset="gbk" src="http://www.baidu.com/js/opensug.js"></script>空链接
<a href='javascript:void(0)' onclick='deBtn(this)' class='remove' num="+ id + ">删除</a>
<a class="upA" href="###">顶：35</a>返回顶部
1.空连接
2.
<div id="myDiv" onclick="back()">⬆️</div>
<script type="text/javascript">
function back(){
document.body.scrollTop = 0;
}
</script>
3.
function back(){
var timer = setInterval(function(){
var scrollTop = document.body.scrollTop;
var speed = scrollTop / 5;
document.body.scrollTop = scrollTop - speed;
if(scrollTop == 0){
clearInterval(timer);
}
},20);
}GET input value
ParseInt(document.getElementById("userName").value);
获取span里面的 数 值
ParseInt(document.getElementById("userName").innerHtml);计时器 定时器
计时器：每隔一定时间，触发一段相同代码
//结构：setInterval(avg1,avg2)
//avg1:要触发的代码，一般是一个方法
//avg2:间隔时间（单位是毫秒）
//创建计时器
var time = setInterval(function(){
console.log("this is my ");
},1000);
//销毁计时器
clearInterval(time);var time = setTimeout(function(){ alert("132"); },5000); 毫秒 clearTimeout(time);window.onload
<img src="001.jpg" alt="" id="myImg"/>
<script>
// 页面载入完毕触发的事件
window.onload = function(){
var d = document.getElementById("myImg");
console.log(d.offsetHeight);
// 图片加载需要时间, 但是这个时候, JS代码已经执行完了, 所以获取不到图片的高度
// 注意: 得在页面载入完毕的时刻, 去获取图片高度
}
</script>检测网络状态
var timer = setInterval(function() {
if(window.navigator.onLine == true) {
console.log("已连接");
} else {
console.log("未连接");
clearInterval(timer);
alert("网络未连接");
window.location.href = "http://www.baidu.com";
}
}, 1);检测手机PC
if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
window.location.href = "https://www.baidu.com/";
} else {
window.location.href = "http://news.baidu.com/";
}tween.js
<style type="text/css">
*{
margin: 0 auto;
padding: 0;
}
.wrap{
position: relative;
}
ul{
list-style: none;
}
li{
width: 80px;
float: left;
/*border: 1px solid black; */
text-align: center;
height: 18px;
}
.slider{
width: 80px;
height: 2px;
background: red;
position: absolute;
left: 0;
top: 20px;
}
</style>
</head>
<body>
<script src="tween.js" type="text/javascript" charset="utf-8"></script>
<div class="wrap">
<!--ul>li*5>a[href="###"]{按钮$}-->
<ul>
<li><a href="###">按钮1</a></li>
<li><a href="###">按钮2</a></li>
<li><a href="###">按钮3</a></li>
<li><a href="###">按钮4</a></li>
<li><a href="###">按钮5</a></li>
</ul>
<div class="slider"></div>
<script type="text/javascript">
var liArr = document.querySelectorAll(".wrap li");
var sliderDiv = document.querySelector(".slider");
var timer;
for(var i = 0; i < liArr.length; i++){
liArr[i].ind = i;
liArr[i].onmouseenter = function(){
var start = sliderDiv.offsetLeft;
var end = this.ind * this.offsetWidth;
var change = end - start;
var t = 0;
var d = 50;
clearInterval(timer);
timer = setInterval(function(){
t++;
if(t > d){
clearInterval(timer);
}
sliderDiv.style.left = Tween.Back.easeOut(t, start, change, d) +"px";
// t 动画 当前时间
// start 动画 开始位置
// change 动画 变化量
// d 动画 总时间
},20)
}
}
</script>
</div>
</body>
</html>获取手机屏幕
网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth DOM的offsetLeft,Left,clientLeft
progressDiv.style.width = progressDiv.offsetWidth - speed +"px";
//只能取值,不能赋值 只能赋值,不能取值
1.offsetTop :
当前对象到其上级层顶部的距离.
不能对其进行赋值.
设置对象到页面顶部的距离请用style.top属性.
2.offsetLeft :
当前对象到其上级层左边的距离.
不能对其进行赋值.
设置对象到页面左部的距离请用style.left属性.
3.offsetWidth :
当前对象的宽度.
与style.width属性的区别在于:
如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,
style.width都返回此百分比,
而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值
4.offsetHeight :
与style.height属性的区别在于:
如对象的宽度设定值为百分比高度,则无论页面变大还是变小,
style.height都返回此百分比,
而offsetHeight则返回在不同页面中对象的高度值而不是百分比值
5.offsetParent :
当前对象的上级层对象.
注意.如果对象是包括在一个DIV中时,此DIV不会被当做是此对象的上级层,
(即对象的上级层会跳过DIV对象)上级层是Table时则不会有问题.
利用这个属性，可以得到当前对象在不同大小的页面中的绝对位置．
6.scrollLeft :
对象的最左边到对象在当前窗口显示的范围内的左边的距离．
即是在出现了横向滚动条的情况下，滚动条拉动的距离．
7.scrollTop
对象的最顶部到对象在当前窗口显示的范围内的顶边的距离．
即是在出现了纵向滚动条的情况下，滚动条拉动的距离．
clientHeight 可视高度
4.获取元素的可见宽度/高度与获取元素的内容宽度/高度的属性是什么？
并说明可见宽度/高度的组成以及内容宽度/高度的组成。
可见：offsetWidth offsetHeight :border + padding +content
获取：clientWidth clientHeight : padding + content 不包括滚动条，不包括边框；
5.说明offsetTop/offsetLeft和clientLeft/clientTop属性的意思。
offsetTop 当前对象到其上级层顶部边的距离。
offsetLeft 当前对象到其上级层左部边的距离。
clientLeft 获取对象的border宽度
clientTop 获取对象的border高度
scrolltop 距离标签顶部的距离
scrollLeft 距离标签左部的距离
window.innerwidth 窗口的宽度Canvas
1.把img转换为canvas对象
function convertImageToCanvas(image){
//创建canvas DOM对象,并设置其宽高和图片一样
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
//坐标(0,0)表示从此处开始绘制,相当于偏移
canvas.getContext("2d").drawImage(image,0,0);
return canvas;
}
2.把canvas转换为img
function convertCanvasToImage(canvas){
//新Image对象,可以理解为DOM;
var image = new Image();
//canvas.toDataURL返回的是一串Base64编码的URL,当然,浏览器自己肯定支持
//指定格式PNG
image.src = canvas.toDataURL("image/png");
return image;
}
img 文件转base64
let reader = new FileReader();
reader.readAsDataURL(file.raw); //格式转换为base64
reader.onloadend = function() { //成功后回调
console.log("成功后回调");
var dataUrl2 = this.result;
dataUrl2 = dataUrl2.replace(/\+/g, "%2B");
dataUrl2 = dataUrl2.replace(/\&/g, "%26");
var data = 'image='+ dataUrl2;
_this.$http({
url: 'https://gym.omshantiyoga.cn:8443/task/api/file/uploadsiteimg',
method: 'post',
data: data,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then((res) => {
console.log(res);
if (res.data.code == 0) {
_this.pic_base64 = res.data.data.avatar
} else {
_this.$message({
showClose: true,
message: res.data.info,
type: 'error'
});
}
})
3.exp
<img src="./list-icon-5.png" alt="" id="photo" width="17" height="24">
<div id="canvasDiv" style="width: 300px; height: 30px;"></div>
<div id="convertedImg"></div>
<script src="./jquery-1.11.3.min.js"></script>
<script>
$(function(){
// 把image转换为canvas对象
var photo = document.getElementById('photo');//这个必须用原生
var cDiv = convertImageToCanvas(photo);
$("#canvasDiv").append(cDiv);
// image-->canvas
function convertImageToCanvas(image){
//创建canvas DOM对象,并设置其宽高和图片一样
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
//坐标(0,0)表示从此处开始绘制,相当于偏移
canvas.getContext("2d").drawImage(image,0,0);
return canvas;
}
// 把canvas转换为image的
var myCanvas = document.getElementsByTagName("canvas")[0];
var img = convertCanvasToImage(myCanvas);
$("#convertedImg").append(img);
// canvas-->image
function convertCanvasToImage(canvas){
//新Image对象,可以理解为DOM;
var image = new Image();
//canvas.toDataURL返回的是一串Base64编码的URL,当然,浏览器自己肯定支持
//指定格式PNG
image.src = canvas.toDataURL("image/png");
return image;
}
});
</script>
4.画图跨域
error:
Failed to execute 'toDataURL' on 'HTMLCanvasElement':
Tainted canvases may not be exported.
<canvas width="400" height="300"></canvas>
<img>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function() {
var cav = $('canvas')[0],
ctx = cav.getContext('2d');
var img = new Image();
img.src = 'http://ofuamxwhl.bkt.clouddn.com/6.jpg';
img.crossOrigin = '*'; //解决跨域问题，需在服务器端运行，也可为 anonymous
img.onload = function() {
ctx.drawImage(img, 0, 0); //img转换为canvas
var base64 = cav.toDataURL('http://ofuamxwhl.bkt.clouddn.com/6.jpg');
//注意是canvas元素才有 toDataURL 方法
console.log(base64);
$('img')[0].src = base64; //canvas 转换为 img
}
});
</script>
5.载入视频
<p>要使用的视频：</p>
<video id="video1" controls width="270" autoplay src="sintel.mp4"></video>
<p>画布（每 20 毫秒，代码就会绘制视频的当前帧）：</p>
<canvas id="myCanvas" width="270" height="135"></canvas>
<script>
var v = document.getElementById("video1");
var c = document.getElementById("myCanvas");
ctx = c.getContext('2d');
v.addEventListener('play', function() {
var i = window.setInterval(function() {
ctx.drawImage(v, 0, 0, 270, 135)
}, 20);
}, false);
</script>
6.
canvas载入视频
canvas载入视频
canvas载入视频
canvas载入视频
canvas载入视频
canvas载入视频
扫一扫
831
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
