你的位置:首页 > Java教程

[Java教程]2015.03.19 笔记


1.js配置不同屏幕的样式


 1 < script type = "text/javascript" > 
 2 gaibian();
 3 window.onresize = gaibian;
 4 function gaibian() {
 5     var kuangdu = document.documentElement.clientWidth;
 6     if (kuangdu > 1024) {
 7         document.getElementById("links").href = "css/big_screen.css";
 8     } else if (kuangdu > 600 && kuangdu <= 1024) {
 9         document.getElementById("links").href = "css/mi_screen.css";
10     } else {
11         document.getElementById("links").href = "css/min_screen.css";
12     }
13 } 
14 < /script>

View Code

2.阻止默认行为和冒泡时间

1 function(e){
2 e.preventDefault();
3 e.stopPropagation();}

function(e){// 内容
return false;//作用同上}

e.isDefaultPrevent();//判断是否用了阻止默认事件
e.isPropagationStop();//判断是否用了阻止冒泡事件

e.stopImmediatePropagation() //取消事件冒泡,并取消该事件的后续事件处理函数
isImmediatePropagationStopped() //判断是否调用了 stopImmediatePropagation()方法
 

3.Js获取当前日期时间及其它操作


var myDate = new Date();
myDate.getYear();        //获取当前年份(2位)
myDate.getFullYear();    //获取完整的年份(4位,1970-????)
myDate.getMonth();       //获取当前月份(0-11,0代表1月)
myDate.getDate();        //获取当前日(1-31)
myDate.getDay();         //获取当前星期X(0-6,0代表星期天)
myDate.getTime();        //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours();       //获取当前小时数(0-23)
myDate.getMinutes();     //获取当前分钟数(0-59)
myDate.getSeconds();     //获取当前秒数(0-59)
myDate.getMilliseconds();    //获取当前毫秒数(0-999)
myDate.toLocaleDateString();     //获取当前日期
var mytime=myDate.toLocaleTimeString();     //获取当前时间
myDate.toLocaleString( );        //获取日期与时间


3.js 中的索引值

window.onload=function(){
          var oUl1=document.getElementById('ul1');
          var aLi=oUl1.getElementsByTagName('li');
          var oMeng=document.getElementById('meng');
          var oImg=document.getElementById('img1');
          //var timer=null;
          var index=0;
          for(var i=0;i<aLi.length;i++){
               aLi[i].index=i;
               aLi[i].onclick=function(){
               setTimeout(function(){
                    oMeng.style.display="block";//第一步的动画开始出来
               });
               setTimeout(function(){
                    location.href="index05.html";//动画过后执行的动作
                    },2000);
                    index=this.index;
                    oImg.src="img/tu"+index+".jpg";//改变图片的路径
               }
          }


     }

View Code

4.js在链接里面实现前进后退

history.back(0); 刷新
history.back(1); 前进
history.back(-1); 后退
javascript:history.back(-1);

5.预加载

 1 <script type="text/javascript">
 2     $(function(){
 3            setTimeout(function(){
 4                 $(".loading_1").hide();
 5            },8000)//加载动画
 6     })
 7 </script>
 8 <div >
 9 <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1254406391'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s95.cnzz.com/z_stat.php%3Fid%3D1254406391' type='text/javascript'%3E%3C/script%3E"));</script>
10 </div>
11 </body>
12 <?php
13 //分享内容
14 $url='http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'];
15 require_once 'js/share.php';
16 ?>
17 <script type="text/javascript">
18      function preload(arr) {
19     var i = arr.length,
20     o,
21     d = document,
22     b = document.body,
23     isIE = /*@cc_on!@*/0;
24     while (i--) {
25         if (isIE) {
26             new Image().src = arr[i];
27             continue;
28         }
29         o = d.createElement('object');
30         o.data = arr[i];
31         o.width = o.height = 0;
32         b.appendChild(o);
33     }
34 }
35 
36 window.onload = function () {
37     preload([
38         'http://new.yangyue.com.cn/wechat/dibiao/activity/tebo/img/shengzhi.png',
39         'http://new.yangyue.com.cn/wechat/dibiao/activity/tebo/img/shengzhi02.png',
40         'http://new.yangyue.com.cn/wechat/dibiao/activity/tebo/img/video_pic.png',
41         'http://new.yangyue.com.cn/wechat/dibiao/activity/tebo/img/p01_ti.png',
42         'http://new.yangyue.com.cn/wechat/dibiao/activity/tebo/img/p7_txt.png',
43         'http://new.yangyue.com.cn/wechat/dibiao/activity/tebo/img/p2_bg.jpg',
44         'http://new.yangyue.com.cn/wechat/dibiao/activity/tebo/img/p1_bg.jpg',
45         'http://new.yangyue.com.cn/wechat/dibiao/activity/tebo/img/p3_bg.jpg',
46         'http://new.yangyue.com.cn/wechat/dibiao/activity/tebo/img/p4_bg.jpg',
47         'http://new.yangyue.com.cn/wechat/dibiao/activity/tebo/img/p05_bg.jpg',
48         'http://new.yangyue.com.cn/wechat/dibiao/activity/tebo/img/kk.jpg',
49     ]);//预加载图片路径
50 }
51 </script>

View Code

6.定时执行动作

 1 <script type="text/javascript">
 2 function s() {
 3                 $(".phone").addClass("shake");
 4             }
 5             function ss() {
 6                 $(".phone").removeClass("shake");
 7             }
 8           setInterval(s,2000)                                 //要晃的湾湾
 9             setTimeout(function(){
10                 setInterval(ss,2000)
11             },1000)
12 </script>

View Code

7.随机数

1 <script type="text/javascript">
2     function star () {
3         var n=Math.ceil(Math.random()*10),
4                 m=n%5;
5         $(".star").eq(m).show().siblings().hide();

7     }
8         setInterval(star,500)
9 </script>

8.监测宽高

window.onload=function(){ 

// alert(document.documentElement.clientWidth);//文档可视区域宽度

}


  1 $(document).ready(function()

 2 {
 3 alert($(window).height()); //浏览器时下窗口可视区域高度
 4 alert($(document).height()); //浏览器时下窗口文档的高度
 5 alert($(document.body).height());//浏览器时下窗口文档body的高度
 6 alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度包括border padding margin
 7 alert($(window).width()); //浏览器时下窗口可视区域宽度
 8 alert($(document).width());//浏览器时下窗口文档对于象宽度
 9 alert($(document.body).width());//浏览器时下窗口文档body的高度
10 alert($(document.body).outerWidth(true));//浏览器时下窗口文档body的总宽度包括border padding margin
11 }
12 )

 

9.js 添加类class

function addClass(id,className){
var element = document.getElementById(id);
if(element.className == ""){
element.className = className;
}else{
element.className += " "+className;
}
}

addClass(id,classname);

 

10.不同准备条件执行的js 函数

只要加载到所要执行部分的结构就会执行

$(document).ready(function(){
})

-------------------------------------
其中window可以使任何对象

window.onload=function(){
//界面加载完了执行的内容
}

--------------------------------------------------
Javascript刷新页面的几种方法:

  history.go(0)
  location.reload()
  location=location
  location.assign(location)
  document.execCommand('Refresh')
  window.navigate(location)
  location.replace(location)
  document.URL=location.href

说明一下,jQuery没有发现刷新页面的方法。

window.resize(function (){
    上面选一个放到这里。
}); 



11.返回顶部&锚点链接

 1  <script type="text/javascript">
 2 $(function(){
 3    $(".xunren").click(function(e) {
 4           fun("#xunren")
 5            });
 6     $("#shequ").click(function(e) {
 7               fun("#bbs")
 8          });
 9        $("#hm").click(function(e) {
10             fun("#hongmi")
11          });
12      function fun(value){
13           var $topvalue=$(value).offset().top;
14           $("body,html").animate({
15                scrollTop:$topvalue+"px"
16                },1000)
17 
18           }
19 })
20 
21 </script>

View Code


12.分享代码(来自百度)


 1 <div  data-tag="share_1">
 2                <span >分享至:</span><a  data-cmd="tsina"></a>
 3      </div>
 4 <script>
 5      window._bd_share_config = {
 6           common : {
 7                bdText : '海洋套房免费住啦!快召集你的小伙伴一起来找茬吧!还有许多礼品哦!',
 8                bdDesc : '#海泉湾新品大找茬#',    
 9                bdUrl : 'http://m.osrzh.com/pickup_introduce.html',     
10                bdPic : 'http://m.osrzh.com/images/pickup_introduce.jpg'
11           },
12           share : [{
13                "bdSize" : 16
14           }],
15           slide : [{       
16                bdImg : 0,
17                bdPos : "right",
18                bdTop : 100
19           }],//浮标展示
20           image : [{
21                viewType : 'list',
22                viewPos : 'top',
23                viewColor : 'black',
24                viewSize : '16',
25                viewList : ["tsina"]
26           }],//图片分享
27           selectShare : [{
28                "bdselectMiniList" : ["tsina"]
29           }]
30      }
31      with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
32 </script>

View Code

 

13.1&0判断


 1 $(function(){
 2             var flag=1;/*赋值-->判断*/
 3             $("#qita03 input").bind("click",function(){
 4                 if(flag) {
 5                     flag=0;
 6                     $(".wt01 textarea").removeAttr("readonly");
 7                 }
 8                 else{
 9                     $(".wt01 textarea").attr("readonly","readonly");
10                     flag=1;
11 
12                 }
13             })
14         })


14.Tab栏的图标&内容切换For循环(找茬)

 1   <script type="text/javascript">
 2         $(function(){
 3            $(".nav_btn").find("a").bind("click",function(){
 4                var $index=$(this).index();
 5                var $indexb=$index+1;
 6                var $btn_lenth=$(".nav_btn>a").length;
 7                var i=0;
 8                for(i;i<$btn_lenth;i++ ){
 9                    var j=i+1;
10                    $(".nav_btn>a").eq(i).find("img")[0].src="img/nav_news-0"+j+".png";//tab栏图标的遍历后重置
11                }
12                $(this).find("img")[0].src="img/nav_news-0"+$indexb+"b.png";//tab栏当前状态图标设置
13                //alert(i)
14                //$(".bg").find("img")[0].src="img/nav_news-0"+i+".jpg";
15                $(".news_con").find("li").eq($index).show().siblings().hide();//tab栏内容的切换
16                })
17         })
18     </script>

View Code