js定位\存储\websql笔记

定位

判断浏览器是否支持

	if (navigator.geolocation){
   
		navigator.geolocation.getCurrentPosition(showPosition);
	}else{
   
		x.innerHTML="该浏览器不支持获取地理位置。";
	}

获取定位的经纬度

	function showPosition(position){
   
		x.innerHTML="纬度: " + position.coords.latitude + "<br>经度: " + position.coords.longitude;	// coords 坐标  longitude 维度
	}

getCurrentPosition() 方法

定位信息失败返回代码

• case error.PERMISSION_DENIED: 用户拒绝对获取地理位置的请求。
• case error.POSITION_UNAVAILABLE: 位置信息是不可用的。
• error.TIMEOUT: 请求用户地理位置超时。
• UNKNOWN_ERROR: 未知错误。

用户拒绝定位

Permission denied - 用户不允许地理定位  
Position unavailable - 无法获取当前位置  
Timeout - 操作超时

成功获取经纬度和失败返回

navigator.geolocation.getCurrentPosition(showPosition,showError);

	function showError(error){
   
		switch(error.code) {
   
			case error.PERMISSION_DENIED:
				x.innerHTML="用户拒绝对获取地理位置的请求。"
				break;
			case error.POSITION_UNAVAILABLE:
				x.innerHTML="位置信息是不可用的。"
				break;
			case error.TIMEOUT:
				x.innerHTML="请求用户地理位置超时。"
				break;
			case error.UNKNOWN_ERROR:
				x.innerHTML="未知错误。"
				break;
		}
	}

精确设备定位 watchPosition

watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。
clearWatch() - 停止 watchPosition() 方法

使用API获取经纬度

• 引入百度地图API文件

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=7a6QKaIilZftIMmKGAFLG7QT1GLfIncg"></script>

• 初始化地图逻辑

	var x = document.getElementById('demo'); //获取元素
	function getLocation() {
   
	    // 创建百度地理位置实例，代替 navigator.geolocation
	    var geolocation = new BMap.Geolocation();
	    geolocation.getCurrentPosition(function(e) {
   
			console.log(this);
	        if(this.getStatus() == BMAP_STATUS_SUCCESS){
   
	            // 百度 geolocation 的经纬度属性不同，此处是 point.lat 而不是 coords.latitude
	            x.innerHTML = '纬度：' + e.point.lat + '<br/>经度：' + e.point.lng;
	        } else {
   
	            x.innerHTML = 'failed' + this.getStatus();
	        }
	    });
	}

video 视频播放

	<video width="320" height="240" controls autoplay>
	  <source src="./media/ziyan.mp4" type="video/mp4">
	  <!-- <source src="movie.ogg" type="video/ogg"> -->
	  您的浏览器不支持 HTML5 video 标签。
	</video>

控制video 播放

• 获取video元素

var myVideo=document.getElementById("video1"); 

• 暂停/播放

function playPause(){
    
	if (myVideo.paused) 
	  myVideo.play(); 
	else 
	  myVideo.pause(); 
}

• 变大

	function makeBig(){
    
	myVideo.width=560; 
}  

• 变小

	function makeSmall(){
    
	myVideo.width=320; 
} 

• 正常

	function makeNormal(){
    
	myVideo.width=420; 
} 

音频 audio

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

表单类型

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• week
• url

input属性：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rEzyk9kt-1646925602148)(media/20220309093205468.jpg)]

input标签全部属性

<input type="number" name="points" min="0" max="10" step="3" value="6">

HTML5 新的表单属性

	autocomplete		是否开启自动记录
	novalidate		 属性是一个 boolean(布尔) 属性. 属性规定在提交表单时不应该验证 form 或 input 域。
	autofocus			自动获取焦点
	form				表单
	formaction			修改表单action 
	formenctype			只对post请求发送 传送编码头部信息以及编码格式等
	formmethod			定义表单传送方式	
	formnovalidate		定义表单提交无需验证
	formtarget			返回结果是否开启新的窗口
	height 与 width
	list
	min 与 max
	multiple			针对file 开启选择多个文件属性	
	pattern (regexp)	正则表达
	placeholder			占位提示
	required			必须的 
	step				步进

输出值 oninput

• Edge 12及更早 IE 版本的浏览器不支持 output 元素。

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50"> +<input type="number" id="b" value="50"> = <output name="x" for="a b"></output>
</form>

修改表单action地址

<form action="http://www.baidu.com"