判断是否为移动浏览器；判断是否支持滑动事件；通过手势来改变图片大小；使用手机GPS定位用户所在的城市；利用浏览器的cookie保存用户名；

本文链接：https://blog.csdn.net/dongzhaoqiliuxuefen/article/details/43456867

1、判断是否为移动浏览器；

<script>
   var userAgent = navigator.userAgent();
   if(userAgent.indexOf('AppleWebKit') > -1){
        alert(" 您现在正在使用移动浏览器");
   }else{
     alert("您现在正在使用普通浏览器");
   }

</script>

2、判断是否支持滑动事件；

<script>
     try{
            document.createEvent("TouchEvent");
            alert("支持Touch事件");
        }catch(e){
            alert("不支持滑动事件"+ e.message);
        }
</script>

3、通过手势来改变图片大小；

<script> 
     var div = document.getElementById("div");
        div.ongesturechange = function(e){           //采用触屏设备特有的手势事件ongesturechange
            //scale代表手势的缩放比例
            var scale = e.scale;
            var img = document.getElementById("img")[0];  //获取图片的DOM
            var w = img.width;                    //图片当前的宽度
            var h = img.height;                    //图片当前的高度
            if(scale > 1){
                w += 10;
                h += 10;
            }else{
                w -= 10;
                h -= 10;
            }
            
            img.width = w;                        //新的宽度
            img.height = h;                        //新的高度
            
        };
</script>

<body>
    <div id = "div">
       <img id = "img"  src="http://zhaoqidong.blog.163.com/blog/" width = "500"  height = "500"/>
  </div>
</body>

4、使用手机GPS定位用户所在的城市；

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
	function init(){
		//判断Google的城市是否可用
		if(google.loader.ClientLocation.address.city){
			//通过Google的API获取城市信息
			var locationCity = google.loader.ClientLocation.city;
			alert(locationCity);
		}
	}
</script>

/*智能手机可以通过与卫星的通信来定位手机所在的经纬度。但是，要想知道该经纬度所在的城市，需要依靠第三方地图API*/

5、利用浏览器的cookie保存用户名

<script type="text/javascript">
	function login(){
		var usernmae = document.getElementById("username");
		var pwd = document.getElementById("password");
		var rem_user = document.getElementById("rem_user");
			
		if(rem_user.checked){
			//把用户名保存在coolie里
			document.cookie = 'usernaem = ' + username.value;
			var date = new Date();			//当前的时间
			var ms = 10*24*3600*1000		//10天后失效
				
			/*getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。
			setTime(millisec) 方法以毫秒设置 Date 对象,要设置的日期和时间据 GMT 时间 
			1970 年 1 月 1 日午夜之间的毫秒数*/
			date.setTime(date.getTime() + ms);
			document.cookie += "; expires = " + date.toGMTString();
				
		}
	}
		
	function initUsername(){
		var username = document.getElementById("username");
		var c = document.cookie;		//提取当前cookie
			
		if(c != '' && c.indexOf('username') > -1){
			var arr = c.split(';');
			for(var i = 0 ; i < arr.length; i++){
				var key_val = arr[i].split('=');
				if(key_val[0] == 'username'){
					username = key_val[1];
				}
			}
		}
	}
		
</script>

  </head>
  
  <body onload = "initUsername()">
  
  	<form action = "#" method = "post">
  		姓名:<input type = "text" name = "username" id = "username"><br><br>
  		密码:<input type = "password" id = "password" ><br><br>
  		<input type = "checkbox" name = "rem_user" id = "rem_user">记住用户名10天<br><br>
  		
  		<input type = "button" value = "登录" onclick = login()>
  	</form>
  </body>