H5--拖放、媒体元素、web存储

最新推荐文章于 2023-05-13 23:58:44 发布

Yi_xuan_sky

最新推荐文章于 2023-05-13 23:58:44 发布

阅读量288

点赞数

分类专栏： H5

本文链接：https://blog.csdn.net/Yi_xuan_sky/article/details/81741092

版权

H5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

将元素设置成可拖放draggable = "true" 拖放元素：ondrag // 整个拖放过程都调用 ondragstart // 拖放开始时调用 ondragleave // 鼠标离开拖放元素时调用 ...

摘要由CSDN通过智能技术生成

将元素设置成可拖放draggable = "true"

拖放元素：ondrag // 整个拖放过程都调用

ondragstart // 拖放开始时调用

ondragleave // 鼠标离开拖放元素时调用

ondragend // 拖放结束时调用

目标元素：ondragenter // 鼠标进入目标时调用

ondragover // 停留在目标元素上时调用

ondrop // 在目标元素松开鼠标时调用

ondragleave // 鼠标离开目标元素时调用

注意：默认情况下，目标元素是不允许接受元素的，所以要在ondragover或ondragend中阻止默认行为

e.dataTransfer保存拖放到浏览器的数据，获取时，只能在ondrop事件中获取

e.dataTransfer.setData(mime类型, 数据); e.dataTranster.getData(mime类型)

mime类型：text/html text/plain text/uri-list text/xml

例子：

补4张图，不会上传gif图，只能这样了

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		div {
			margin-left: 10px;
			float: left;
			width: 150px;
			height: 300px;
			border: 1px solid red;
		}
		li {
			list-style: none;
			height: 20px;
			text-align: center;
			line-height: 20px;
		}
		li:nth-child(even) {
			background-color: yellow;
		}
		li:nth-child(odd) {
			background-color: red;
		}
	</style>
</head>
<body>
	<div id="div1">
		<ul>
			<li draggable = "true" id="p1">拖走我啊-.-</li>
			<li draggable = "true" id="p2">拖我啊o.o</li>
			<li draggable = "true" id="p3">带走我吧-,-</li>
		</ul>
	</div>
	<div id="div2">
		<ul></ul>
	</div>

	<script src="my.js"></script>
	<script>
		var div1 = document.getElementById("div1");
		var div2 = document.getElementById("div2");
		EventUtil.addEventListener(div1, "dragstart", dragstartHandle);

		EventUtil.addEventListener(div2, "dragstart", dragstartHandle);

		EventUtil.addEventListener(div2, "dragover", dragoverHandle);

		EventUtil.addEventListener(div1, "dragover", dragoverHandle);

		EventUtil.addEventListener(div2, "drop", dropHandle);

		EventUtil.addEventListener(div1, "drop", dropHandle);

		function dragstartHandle(e) {
			e = EventUtil.getEvent(e);
			var target = EventUtil.getTarget(e);
			e.dataTransfer.setData("text/html", target.id);
		}

		function dragoverHandle(e) {
			e = EventUtil.getEvent(e);
			EventUtil.preventDefault(e);
		}

		function dropHandle(e) {
			e = EventUtil.getEvent(e);
			var target = EventUtil.getTarget(e);
			var id = e.dataTransfer.getData("text/html");
			var ul = target.children[0];
			ul.appendChild(document.getElementById(id));
		}
	</script>
</body>
</html>

音频(audio)和视频(video) （两个的属性是差不多的）

您的浏览器不支持video，赶紧换一个吧

</video>

autoplay：自动播放 controls：显示/隐藏控件 loop：循环播放

元素全屏：ele.requestFullscreen(); （这里要兼容，要加前缀）

播放与暂停：ele.play(); ele.pause();

当前播放进度与总时长：ele.currentTime ele.duration （得到的是以秒为单位的小数，要转换成00:00:00格式）

oncanplay：可以播放视频/音频时触发

ontimeupdate：当前播放位置发生改变时触发该事件

onended：播放完时触发，播放停止

web存储

window.sessionStorage：临时存储数据，5mb左右

①存储在当期页面（重新或再打开就没了） ②关闭页面，清除数据

方法先忽略；

window.localStorage：存储在硬盘上，网页关了，再打开也存在

setItem(key,value)：以键值对存储数据

getItem(key)：获取数据

removeItem(key)：删除数据

clear()：清空所以内容

key()：获得索引下的对应的数据

HTML5与CSS3权威指南上的例子：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>简单的web留言本</title>
</head>
<body>
	<h1>简单留言本</h1>
	<textarea id="memo" cols="60" rows="10"></textarea></br>
	<input type="button" value="追加" id="add">
	<input type="button" value="初始化" id="refresh">
	<hr>
	<p id="msg"></p>

	<script src="my.js"></script>
	<script>
		var add = document.getElementById("add");
		var refresh = document.getElementById("refresh");

		EventUtil.addEventListener(add, "click", function(){
			saveStroage("memo");
		});
		EventUtil.addEventListener(refresh, "click", function(){
			clearStorage();
		});

		function saveStroage (id) {

			var data = document.getElementById(id).value;
			var time = new Date().getTime();
			localStorage.setItem(time, data);
			alert("数据已保存");
			loadStoage("msg");
		}

		function loadStoage (id) {

			var result = "<table border = '1'>";
			for (var i = 0, len = localStorage.length; i < len; i ++) {

				// 获得索引下的对应的数据
				var key = localStorage.key(i);
				var value = localStorage.getItem(key);
				var date = new Date();
				// 把一个日期时间赋值给另一个 Date 对象
				date.setTime(key);
				// 把一个日期转换为一个字符串
				var datestr = date.toUTCString();
				result += "<tr><td>" + value + "</td><td>" + datestr + "</td></tr>";
			}
			result += "</table>";
			var target = document.getElementById(id);
			target.innerHTML = result;
		}

		function clearStorage () {
			localStorage.clear();
			alert("全部数据已被清除");
			loadStoage("msg");
		}
	</script>
</body>
</html>

Yi_xuan_sky

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
H5--拖放、媒体元素、web存储

将元素设置成可拖放draggable = "true" 拖放元素：ondrag // 整个拖放过程都调用 ondragstart // 拖放开始时调用 ondragleave // 鼠标离开拖放元素时调用 ...
复制链接

扫一扫

专栏目录