<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" name="" id="username">
<button id="setData">设置数据</button>
<button id="getData">获取数据</button>
<button id="delData">删除数据</button>
<script>
var username = document.querySelector("#username");
document.querySelector("#setData").onclick = function(){
localStorage.setItem("username", username.value);
};
document.querySelector("#getData").onclick = function(){
alert(localStorage.getItem("username"));
};
document.getElementById("delData").onclick = function(){
localStorage.removeItem("username");
alert(localStorage.getItem("username"))
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" name="" id="username" placeholder="请输入姓名">
<button id="setData">设置数据</button>
<script>
var uaername = document.querySelector("#username");
document.querySelector("#setData").onclick = function(){
sessionStorage.setItem("username", username.value);
alert(sessionStorage.getItem("username"))
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<label for="">用户名：</label>
<input type="text" name="" id="username">
<button id="save">保存</button>
<script>
var username = document.querySelector("#username");
document.querySelector("#save").onclick = function(){
var val = username.value;
localStorage.setItem("username", val);
alert(localStorage.getItem("username"))
};
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<span>新的用户名：</span>
<span id="newval"></span>
<br>
<span>旧的用户名：</span>
<span id="oldval"></span>
<script>
var newdata = document.getElementById("newval");
var olddata = document.getElementById("oldval");
window.addEventListener("storage", function(e){
newdata.innerHTML = e.newValue;
olddata.innerHTML = e.oldValue;
});
</script>
</body>
</html>
2.2视频与音频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<video width="400px" src="/videos/cow.mp4" controls>
</video>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<audio src="#">
您的浏览器不支持audio
</audio>
</body>
</html>
在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<video src="#"></video>
<button>播放</button>
<button>暂停</button>
<button>静音</button>
<script>
var video = document.getElementsByTagName('video')[0];
var btn = document.getElementsByTagName('button');
btn[0].onclick = function(){
video.play();
};
btn[1].onclick = function(){
video.pause();
};
btn[2].onclick = function(){
video.muted = !video.muted;
}
</script>
</body>
</html>
2.3地理定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="demo">获得您的坐标</p>
<button onclick="getLocation()">试一下</button>
<script>
var x = document.getElementById('demo');
function getLocation(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition, showError);
}else{
x.innerHTML = '当前浏览器不支持地理定位';
}
};
function showPosition(position){
x.innerHTML =
'Latitude:' + position.coords.latitude +
'<br>Longitude:' + position.coords.longitude;
};
function showError(error){
switch (error.code){
case error.PERMISSION_DENIED:
x.innerHTML = "用户拒绝地理定位请求";
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "位置信息不可用";
break;
case error.TOMEOUT:
x.innerHTML = "获取用户位置请求超时";
break;
case error.UNKNOWN_ERROR:
x.innerHTML = '发生了一个不明错误';
break;
}
};
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=8njjwgcDQtyXUL51PNsopmPa2aaZWe4v"></script>
<title>地图展示</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// GL版命名空间为BMapGL
// 按住鼠标右键，修改倾斜角和角度
var map = new BMapGL.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMapGL.Point(119.9412356358156, 32.47623160903073), 11); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
</script>
申请百度账号和ak
2准备页面
根据HTML标准，每一份HTML文档都应该声明正确的文档类型，我们建议您使用最新的符合HTML5规范的文档声明：
您也可以根据需要选择其他类型的文档声明，这样浏览器会以标准的方式对页面进行渲染，保证页面最大的兼容性。我们不建议您使用quirks模式进行开发。
3适应移动端页面展示
下面我们添加一个meta标签，以便使您的页面更好的在移动平台上展示。
5引用百度地图API文件
6创建地图容器元素
地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素。
var map = new BMapGL.Map(“container”);
注意：
1、在调用此构造函数时应确保容器元素已经添加到地图上；
2、命名空间 API GL版使用BMapGL作为命名空间，所有类均在该命名空间之下，比如：BMapGL.Map、BMapGL.Control、BMapGL.Overlay；
8设置中心点坐标
这里我们使用BMapGL命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。（为天安门坐标）
var point = new BMapGL.Point(116.404, 39.915);
注意：
在使用百度地图JavaScript API服务时，需使用百度BD09坐标，如使用其他坐标（ WGS84、GCJ02）进行展示，需先将其他坐标转换为BD09，详细说明请参考坐标转换说明，请勿使用非官方的转换方法。
9地图初始化，同时设置地图展示级别
在创建地图实例后，我们需要对其进行初始化，BMapGL.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作
map.centerAndZoom(point, 15);
至此，我们就快速创建了一张以天安门为中心的地图。
地图配置与操作
JS API中的地图对象的外观与行为与百度地图网站上交互的地图非常相似。它支持鼠标拖拽、滚轮缩放、双击放大等交互功能。您也可以修改配置来改变这些功能。
比如，默认情况下地图不支持鼠标滚轮缩放操作，因为这样可能会影响整个页面的用户体验，但是如果您希望在地图中使用鼠标滚轮控制缩放，则可以调用map.enableScrollWheelZoom方法来开启。配置选项可以在Map类参考中找到。
地图切换
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 80%;height: 80%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=8njjwgcDQtyXUL51PNsopmPa2aaZWe4v"></script>
<title>地图展示</title>
</head>
<body>
<div id="allmap">
</div>
<select name="" id="changePattern">
<option value="BMAP_NORMAL_MAP" selected>标准地图</option>
<option value="BMAP_EARTH_MAP">地球模式</option>
<option value="BMAP_SATELLITE_MAP">普通卫星地图</option>
</select>
</body>
</html>
<script type="text/javascript">
// GL版命名空间为BMapGL
// 按住鼠标右键，修改倾斜角和角度
var map = new BMapGL.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMapGL.Point(119.940844, 32.46355), 10); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
map.setMapType(BMAP_SATELLITE_MAP)
document.getElementById('changePattern').onchange = function(){
var pattern = this.value;
// map.setMapType(pattern);
if(pattern == 'BMAP_NORMAL_MAP'){
map.setMapType(BMAP_NORMAL_MAP);
}
else if(pattern == 'BMAP_EARTH_MAP'){
map.setMapType(BMAP_EARTH_MAP);
}
else{
map.setMapType(BMAP_SATELLITE_MAP);
}
}
</script>
2.4 拖曳事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width:200px;
height: 200px;
border: 1px solid red;
float: left;
margin: 10px;
}
div:nth-child(2){
border: 1px solid blue;
}
div:nth-child(3){
border: 1px solid blue;
}
p{
height: 25px;
background-color: pink;
line-height: 25px;
text-align: center;
}
</style>
</head>
<body>
<div id="div1">
<p id="p1" draggable="true">拖曳内容1</p>
<p id="p2" draggable="true">拖曳内容2</p>
<p id="p3" draggable="true">拖曳内容3</p>
<p id="p4" draggable="true">拖曳内容4</p>
</div>
<div id="div2"></div>
<div id="div3"></div>
<script>
document.ondragstart = function(event){
console.log("原对象开始被拖动");
console.log(event.target.id);
event.dataTransfer.setData("text/html", event.target.id);
};
document.ondrag = function(event){
console.log("原对象被拖动过程中");
};
document.ondragend = function(event){
console.log("原对象被拖动结束")
};
</script>
</body>
</html>
1641
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
