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";

     } else {

         document.getElementById("links").href = "css/min_screen.css";

     }

 } 

 < /script>

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

 function(e){

 e.preventDefault();

 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";//改变图片的路径

               }

          }





     }

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 style="display: none;">

 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>

 </div>

 </body>

 <?php

 //分享内容

 $url='http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'];

 require_once 'js/share.php';

 ?>

 <script type="text/javascript">

      function preload(arr) {

     var i = arr.length,

     o,

     d = document,

     b = document.body,

     isIE = /*@cc_on!@*/0;

     while (i--) {

         if (isIE) {

             new Image().src = arr[i];

             continue;

         }

         o = d.createElement('object');

         o.data = arr[i];

         o.width = o.height = 0;

         b.appendChild(o);

     }

 }

 

 window.onload = function () {

     preload([

         'http://new.yangyue.com.cn/wechat/dibiao/activity/tebo/img/shengzhi.png',

         'http://new.yangyue.com.cn/wechat/dibiao/activity/tebo/img/shengzhi02.png',

         'http://new.yangyue.com.cn/wechat/dibiao/activity/tebo/img/video_pic.png',

         'http://new.yangyue.com.cn/wechat/dibiao/activity/tebo/img/p01_ti.png',

         'http://new.yangyue.com.cn/wechat/dibiao/activity/tebo/img/p7_txt.png',

         'http://new.yangyue.com.cn/wechat/dibiao/activity/tebo/img/p2_bg.jpg',

         'http://new.yangyue.com.cn/wechat/dibiao/activity/tebo/img/p1_bg.jpg',

         'http://new.yangyue.com.cn/wechat/dibiao/activity/tebo/img/p3_bg.jpg',

         'http://new.yangyue.com.cn/wechat/dibiao/activity/tebo/img/p4_bg.jpg',

         'http://new.yangyue.com.cn/wechat/dibiao/activity/tebo/img/p05_bg.jpg',

         'http://new.yangyue.com.cn/wechat/dibiao/activity/tebo/img/kk.jpg',

     ]);//预加载图片路径

 }

 </script>

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(){

                 setInterval(ss,2000)

             },1000)

 </script>

7.随机数

 <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();
6 
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>

12.分享代码（来自百度）

 1 <div class="bdsharebuttonbox" data-tag="share_1">
 2                <span class="shareto">分享至：</span><a class="bds_tsina" 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>

 

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>