欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

js_methods

程序员文章站 2022-05-03 21:26:25
...

字符串去空格 加转义字符

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载入视频

 

上一篇： svg的stroke-dasharray及stroke-dashoffset属性

下一篇： 连接查询

推荐阅读