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.οnlοad= 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].οnclick= 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 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>
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();
6 
7     }
8         setInterval(star,500)
9 </script>

8.监测宽高

window.οnlοad= 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.οnlοad= 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 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>

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

 

转载于:https://www.cnblogs.com/freewings/p/4350472.html