分类 JS 下的文章

js实现点击链接跳转到随机产生的网页

1
2
3
4
5
6
7
8
9
10
11
12
 <script language="javascript">
   function test(){
     var url=new Array();
     url[0]="http://www.baidu.com";
     url[1]="http://www.csdn.net";
     url[2]="http://bbs.voc.com.cn";
     var ints=parseInt(Math.random()*(url.length));
     window.open(url[ints]);//本窗口打开    
     //window.location=url[ints];//新窗口打开
    }
  </script>
 <a href="javascript:test()">test</a>

js日期倒计时区间

1
2
3
4
5
6
7
8
9
10
11
12
function a(jieshu,id){
var dangqian=new Date();
var kaishi=dangqian.getFullYear()+'-'+(dangqian.getMonth()+1)+'-'+dangqian.getDate();
var jieshu1=jieshu.split("-");
var kaishi1=kaishi.split("-");
var jieshu2=jieshu1[1]+'-'+jieshu1[2]+'-'+jieshu1[0];
var kaishi2=kaishi1[1]+'-'+kaishi1[2]+'-'+kaishi1[0];
var xc=parseInt((new Date(jieshu2.replace(/-/g, "/"))-new Date(kaishi2.replace(/-/g, "/")))/24/60/60/1000);
document.getElementById(id).innerHTML=xc;
};
a("2017-05-31","divdown1");
setInterval('a("2017-05-31","sssssssss")',1000);

返回某某时间到某某时间中间剩余的时间

JS获取操作系统信息

JS获取操作系统信息
脚本经常使用这些信息来处理不同浏览器等差异 这是很有效的方法之一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 function getOSInfo(){
var os = "未知";
var userInfo =navigator.userAgent;
var windows =(navigator.platform=="Win32")||(navigator.platform=="Windows");
//获取用户所使用操作系统类型
os = null;
if(windows){
//indexOf()可返回某个指定的字符串值首次出现的位置
//没有返回-1
var win2K = userInfo.indexOf("Windows NT 5.0")&gt;-1;
if(win2K) os ="Windows 2000";
var winxp =userInfo.indexOf("Windows NT 5.1")&gt;-1;
if(winxp) os ="windows xp";
var win7 =userInfo.indexOf("Windows NT 6.1")&gt;-1;
if(win7) os ="Windows 7";
var win10 =userInfo.indexOf("Windows NT 10.0")&gt;-1;
if(win10) os ="Windows 10";
}
return os;
}
console.log(getOSInfo());//打印出操作系统

Js实现浏览器震屏效果

具体操作如下,Chrome Firefox 因为权限问题 无法震动 IE下正常

具体兼容性可以自己写  下面是大体思路

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 window.resizeTo(400,400);//改变窗口大小
var loop = 0;//震动次数
var timer; //定时器易用
var offX;
var offY;
var dir = 1; //震动方向 1正,2反
timer=setInterval(function(){
window.moveTo(500, 180);//改变窗口位置
if(loop&gt;100){//震动次数超过100次就停止定时器
clearInterval(timer);
}
//随机获取震动方向
dir = Math.random()*10 &gt; 5 ? 1 : -1;
//随机获取X轴移动量
offX = Math.random()*20*dir;
//随机获取Y轴移动辆
offY = Math.random()*20*dir*-1;
window.moveBy(offX,offY);//移动便宜
loop++;
},10)

js生成五位六位N位随机数

执行函数 RndNum(传入自己想要的位数)

1
2
3
4
5
6
function RndNum(n){
var rnd="";
for(var i=0;i&lt;n;i++)
rnd+=Math.floor(Math.random()*10);
return rnd;
}

JS随机变化CSS样式多彩效果

本特效可用于tag标签随机多彩变化的超链接样式。使用非常简单,可以预设多个想要的CSS a样式,可以设置超链接文字大小、字体颜色、字体背景等不同样式,随机刷新网页时候JQ自动实现超链接文字多样css样式特效效果。

1
2
3
4
5
6
7
8
9
$(document).ready(function() {
var tags_a = $("a");
tags_a.each(function(){
var x = 4;
var y = 1;
var rand = parseInt(Math.random() * (x - y + 1) + y);
$(this).addClass("tag-level-"+rand);
});
})

 

icon动画图标

当鼠标指针穿过元素时,会发生 mouseenter 事件,与 mouseover 事件不同,只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件。

animate() 方法执行 CSS 属性集的自定义动画 例子:

1
$(".btn1").click(function(){ $("#box").animate({height:"300px"}); });

效果地址:http://www.29ym.com/demo/icoanimate.html

JQ上下切换幻灯效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$(function(){
var index=0;
var len=$(".num&gt;li").length;
var adTimer;
$(".num li").mouseover(function(){
index=$(".num li").index(this);
showImg(index);
}).eq(0).mouseover();
$(".ad").hover(function(){
clearInterval(adTimer);
},function(){
adTimer=setInterval(function(){
showImg(index)
index++;
if(index==len){
index=0;
}
}, 3000);
}).trigger("mouseleave")
function showImg(index){
var adHeight=$(".ad").height();
$(".slider").stop(true,false).animate(
{top:-adHeight*index},1000
);
$(".num li").removeClass('on').eq(index)
.addClass("on");
}
})

幻灯效果地址

淘宝搜索框切换效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
$(function(){
$(".bodys p").not(':first').hide();
$(".searchbox ul li").mouseover(function(){
var index=$(this).index();
if(index==0){
$(this).find("a").addClass
("style1");
$("li").eq(1).find("a")
.removeClass("style2");
$("li").eq(2).find("a").
removeClass("style3");
}
if (index==1) {
$(this).find("a").addClass
("style2");
$("li").eq(0).find("a")
.removeClass("style1");
$("li").eq(2).find("a")
.removeClass("style3");
}
if (index==2) {
$(this).find("a").addClass
("style3");
$("li").eq(0).find("a")
.removeClass("style1");
$("li").eq(1).find("a")
.removeClass("style2");
};
var index=$(this).index();
$(".bodys p").eq(index).show()
.siblings().hide();
})
})

效果地址

http://www.29ym.com/demo/tb_tab.html