用原生js实现的几个比较常用的小函数
1、产生随机色
function color(){
return "rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")";
}
2、添加类名、移除类名
function hasClass(elements, cName) {
return !!elements.className.match(new RegExp("(//s|^)" + cName + "(//s|$)"));
// ( //s|^ ) 判断前面是否有空格 (//s | $ )判断后面是否有空格 两个感叹号为转换为布尔值 以方便做判断
};
//添加类名
function addClass(elements, cName) {
if(!hasClass(elements,cName)) {
elements.className += " " + cName;
}
}
//移除类名
function removeClass(elements, cName) {
if(hasClass(elements, cName)) {
elements.className = elements.className.replace(new RegExp("(//s|^)" + cName + "(//s|$)"), " ");
//replace方法是替换
}
}
3、判断某天是该年第几天
function dayOfYear(year,month,day){
var a=[0,31,28,31,30,31,30,31,31,30,31,30,31];
if (year%4==0&&year%100!=0||year%400==0) {
a[2]=29;
}
var sum=day;
for(var i=0;i<month;i++){
sum+=a[i];
}
return sum;
}
4、产生5个不重复的数字加入到数组中
//随机数 function getAutoNum(max, min) { return parseInt(Math.random() * (max - min + 1) + min); } function lottery() { var arrayNum = []; while(arrayNum.length < 5){ var num=getAutoNum(23,1),i=0; for (var i = 0;i<arrayNum.length;i++) { if (arrayNum[i]==num) { break; } } if (i<==arrayNum.length) { arrayNum.push(num); } } return arrayNum; }
另一种方法
var array = [];
for(var i = 0;; i++) {
var num = parseInt(Math.random() * (23 - 0 + 1) + 0);
//检验随机数是否重复
var isRepeat = true;
//如果重复,继续生成下一个随机数
document.write(num + " ");
for(var j = 0; j < array.length; j++) {
if(array[j] == num) {
isRepeat = false;
}
}
//不重复加入到数组中
if(isRepeat) {
array.push(num);
}
if(array.length == 5) {
break;
}
}
5、获取属性的数值 (去掉单位)
//获取属性的数值 eg:div.style.width的值
function getStyle(obj,attr){
if (obj.currentStyle) {
return obj.currentStyle[attr];//针对IE
} else{
// alert(attr);
return getComputedStyle(obj,false)[attr];//针对除IE外的浏览器
}
}
6、弹性摩擦运动框架
function startMove(iTarget) {
clearInterval(timer);
timer = setInterval(function() {
speed+=(iTarget-div.offsetLeft)/5;
speed*=0.7;
//最佳组合 5和0.7;
//摩擦力
div.style.left = div.offsetLeft + speed + 'px';
}, 20);
}
7、两个对象的碰撞检测
//这个方法的使用前提是:两个对象必须有x,y,w,h属性
function checkCrash(obj1,obj2){
//先求临界值
var disX=obj1.w/2
+obj2.w/2;
var disY=obj1.h/2
+obj2.h/2;
//计算两个矩形中心点的距离
var centerX=Math.abs((obj1.x+obj1.w/2)
-(obj2.x+obj2.w/2));
var centerY=Math.abs((obj1.y+obj1.h/2)
-(obj2.y+obj2.h/2));
if (centerX<disX&¢erY<disY) {
return true;
}else{
return false;
}
}
canvas画多边形
eg:画五角星
drawNrect(圆心,圆心,半径,几角,正n角星/正n边形);
drawNrect(200,200,100,5,true);
function drawNrect(x,y,r,n,bool){
var n = n+1;
pen.beginPath();
for(var i = 0;i<n;i++){
//Math.cos()需要传入弧度,将i度转化为弧度(i*Math.PI/180);
pen.lineTo(x + r*Math.cos(i*Math.PI/((n-1)/2)),y+r*Math.sin(i*Math.PI/((n-1)/2)));
//注释下面这句就画正n边形,加上就是画正n角星;
if(bool){
pen.lineTo(x + 2*r*Math.cos((i+0.5)*Math.PI/((n-1)/2)),y+2*r*Math.sin((i+0.5)*Math.PI/((n-1)/2)));
}
}
pen.stroke();
}
原创文章,作者:Maggie-Hunter,如若转载,请注明出处:https://blog.ytso.com/13858.html