--H5--

最新推荐文章于 2022-06-08 15:51:30 发布

SuwanH

最新推荐文章于 2022-06-08 15:51:30 发布

阅读量191

点赞数

文章标签： html5 html javascript

本文链接：https://blog.csdn.net/SuwanH/article/details/120267935

版权

一、progress

1.progress 表示运行中的进度

<progress></progress>

（1）在HTML中放置progress标签，无内嵌属性和文本时，显示的是整个进度条被填满的状态

（2）给progress设置属性

<progess value='50' max='100'></progress>

其中value是进度条在框里的进度，注意：设置value属性时，一定要设置max属性，页面才有效果

二、input输入框

1.placeholder用来描述输入字段语气值的提示信息。注意：输入字段为空时显示

输入框：<input type='text' placeholder='输入'>

在鼠标点击输入框还没输入内容时，输入框会显示提示信息输入

当输入内容时，提示信息会消失

2.type的类型，可以设置为number或date类型等。注意：其兼容性较差，在火狐浏览器中没有效果，在谷歌有效果--->不推荐使用

三、音视频

1.video-->视频

属性：

（1）src需要引入的视频地址（2）controls 是否显示视频控件

（3）autoplay 在视频就绪后马上播放（4）muted 视频音频为静音模式

[注意：autoplay要与muted搭配使用，否则不能自动播放]

（5）loop 视频循环播放（6）volume 视频音量 0~1

（7）duration 视频总时长（8）currentTime 当前播放进度

（9）paused当前视频状态是否暂停暂停true （10）width、height 视频宽高

（11）playbackRate 设置或返回视频当前的播放速度

（12）end 视频是否播放结束结束返回true

方法：

（1）play() 播放（2）pause() 暂停（3）load() 重新加载当前视频

实例：利用按钮来控制视频

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>video</title>
</head>
<body>
    <!-- 设置视频 -->
    <video src="./MV.mp4" autoplay muted controls loop></video><br>
    <!-- 设置按钮 -->
    <div id="btns">
        <button>播放</button>
        <button>暂停</button>
        <button>快进</button>
        <button>快退</button>
        <button>快倍速</button>
        <button>慢倍速</button>
        <!-- 播放和暂停按钮合一 -->
        <button>▶</button>
        <button>百分比</button>
    </div>
    <script>
        // 获取视频
        var video = document.getElementsByTagName('video')[0];
        // 用事件委托
        var btns = document.getElementById('btns');
        btns.onclick = function(event){
            var target = event.target;
            console.log(target.innerText);
            switch(target.innerText){
                case '播放':
                    video.play();
                    break;
                case '暂停':
                    video.pause();
                    break;
                case '快进':
                    video.currentTime += 10;
                    video.play();
                    break;
                case '快退':
                    video.currentTime -= 10;
                    video.play();
                    break;
                case '快倍速':
                    video.playbackRate *= 3;
                    video.play();
                    break;
                case '慢倍速':
                    video.playbackRate *= 0.1;
                    video.play();
                    break;
                case '▶':
                // video.pause -->true暂停
                    if(video.paused){
                        video.play()
                    }else{
                        video.pause()
                    }
                    break;
                case '百分比':
                    var current = video.currentTime;
                    var total = video.duration;
                    var bee = (current/total*100).toFixed(2);
                    alert(bee + '%');
                    break;
            }
        }
    </script>
</body>
</html>

2.audio-->音频使用方式与video类似

四、画布-->canvas

1.canvas是专门来绘制图形的，在页面中放置一个canvas元素，相当于在页面上放置一块画布，canvas只是一个容器

2.绘制步骤

实例一：绘制矩形

（1）取得canvas对象（2）取得2d上下文

（3）设置绘图样式，使用图形上下文对象中的fillStyle填充样式，strokeStyle边框样式

（4）指定线宽，使用图像上下文对象中的lineWidth

（5）绘制矩形，使用图像上下文对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas-矩形</title>
</head>
<body>
    <!-- 设置画布 -->
    <canvas height="500" width="500" style="border: 1px solid black;"></canvas>
    <script>
        // 获取画布对象
        var canvas = document.getElementsByTagName('canvas')[0]
        // 获取2d上下文
        var context = canvas.getContext('2d');
        // 设置填充样式-->填充和描边
        context.fillStyle = 'palevioletred';
        context.strokeStyle = 'pink'
        // 设置边框
        context.lineWidth = '2'
        // 绘制矩形
        // context.fillRect(x坐标，y坐标，宽度，高度)
        context.fillRect(20,20,100,100);
        context.strokeRect(200,200,100,100);
        // 清除矩形
        context.clearRect(20,20,20,20)
        context.clearRect(100,20,20,20)
        context.clearRect(20,100,20,20)
        context.clearRect(100,100,20,20)
    </script>
</body>
</html>

实例二：绘制圆形

（1）取得canvas对象（2）取得2d上下文

（3）设定绘图样式，使用图像上下文对象中的fillStyle填充 strokeStyle边框样式

（4）指定线宽使用图像上下文对象中的lineWidth

（5）开始创建路径context.beginPath()

（6）设置路径content.arc(圆心x坐标，圆心y坐标，圆半径，开始的角度，结束的角度，绘制的方向false->顺时针)

（7）关闭路径（8）设定绘制样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas-绘制圆形</title>
</head>
<body>
    <canvas width="500" height="500" style="border: 1px solid black;"></canvas>
    <script>
        var canvas = document.getElementsByTagName('canvas')[0];
        var context = canvas.getContext('2d');
        context.fillStyle = 'palevioletred';
        context.strokeStyle ='pink';
        context.lineWidth = '2';
        // 创建路径
        context.beginPath()
        // 设置路径
        context.arc(200,200,100,0,Math.PI/180*360,false);
        // 关闭路径
        context.closePath();
        // 设定绘制样式
        context.fill();
        context.stroke();
    </script>
</body>
</html>

注意：与绘制矩形的些微不同点：绘制矩形的设置绘制样式是：context.fillRect() 和context.strokeRect()；而绘制圆形的设置绘制样式是：context.fill() 和 context.stroke()

实例三：渐变色

（1）取得canvas对象（2）获取2d上下文

（3）创建渐变对象，并添加渐变色gradiant

（4）设置填充模式（5）绘制矩形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas-渐变色</title>
</head>
<body>
    <canvas height="500" width="500" style="border: 1px solid black;"></canvas>
    <script>
        var canvas = document.getElementsByTagName('canvas')[0];
        var context = canvas.getContext('2d'); 
        // 起始和终点座位的坐标
        var gradiant = context.createLinearGradient(100,100,300,300);
        gradiant.addColorStop(0,'palevioletred');
        gradiant.addColorStop(0.5,'yellow');
        gradiant.addColorStop(1,'pink')
        context.fillStyle = gradiant;
        context.fillRect(100,100,200,200)
    </script>
</body>
</html>

实例四：图片

（1）取得canvas对象（2）获取2d上下文对象

（3）创建图像对象（4）在图像加载完成后绘制图像

（5）设置平铺模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cancas-图片</title>
</head>
<body>
    <canvas height="800" width="800" style="border: 1px solid black;"></canvas>
    <script>
        var canvas = document.getElementsByTagName('canvas')[0]
        var context = canvas.getContext('2d');
        // 创建图片对象
        var image = new Image();
        image.src = './12.jpg';
        // 在图片加载完成后执行方法
        image.onload = function(){
            // 绘制图片
            context.drawImage(image,10,10,100,100)
            // 创建平铺对象
            var pattern = context.createPattern(image,'repeat')
            context.fillStyle = pattern;
            context.fillRect(200,0,200,200)
        }
    </script>
</body>
</html>

实例五：文字

（1）取得canvas对象（2）取得2d上下文

（3）设定绘制样式（4）指定线宽

（5）绘制文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas-文字</title>
</head>
<body>
    <canvas height="500" width="500" style="border: 1px solid pink;"></canvas>
    <script>
        var canvas = document.getElementsByTagName('canvas')[0];
        var context = canvas.getContext('2d');
        context.fillStyle = 'pink';
        context.strokeStyle = 'yellow';
        context.lineWidth = '2';
        //设置文字
        context.font = '50px 宋体';
        context.textAlign = 'center';
        // 绘制文字
        context.fillText('hello wan',200,100);
        context.strokeText('hello su',100,200)
    </script>
</body>
</html>

页面预览：

五、拖拽--draggable

（1）拖拽元素：

dragstart-->开始拖拽；drag-->正在拖拽；dragend-->结束拖拽；

目标元素：

dragenter-->拖拽元素进入目标元素；dragover-->拖拽元素在目标元素中移动；

drop-->拖拽元素放置到目标元素中

（2）拖拽事件流：当拖动一个元素放置到目标元素上的时候将会按照以下顺序依次触发：

dragstart-->drag-->dragenter-->dragover-->drop-->dragend

（3）数据交互：dataTransfer

设置值：event.dataTransfer.setData()

获取值：event.dataTransfer.getData()

（4）拖拽需满足：

拖拽元素可拖拽-->draggable

目标元素可放置-->ondragover = function(){event.preventDefault()//阻止默认行为}

<style>
        body{
            height: 100vh;
        }
        .container{
            height: 100px;
            border: 1px solid palevioletred;
            margin: 0 auto;
        }
        .item{
            height: 100px;
            width: 100px;
            border: 1px solid palevioletred;
            margin-left: 10px;
            float: left;
        }
</style>
<body>
    <div class="container"></div>
    <div class="item" id="item1" draggable="true">1</div>
    <div class="item" id="item2" draggable="true">2</div>
    <script>
        
        // 目标元素
        var container = document.getElementsByClassName('container')
        var containers = Array.from(container);
        var body = document.body;
        containers.push(body);
        // 拖拽元素
        var item = document.getElementsByClassName('item');
        // 将其转为数组
        var items = Array.from(item);
        console.log(items);
        items.forEach(function(item){
            item.ondragstart = function(){
                // 一定要设置setData才能在getData中获得数据
                event.dataTransfer.setData('id',item.id)
                // 设置值
            }
        })
        containers.forEach(function(item){
            // 拖拽元素在目标元素中移动
            item.ondragover = function(event){
                // 阻止默认行为，使其目标元素可放置
                event.preventDefault();
            }
            // 拖拽元素放置到目标元素中
            item.ondrop = function(event){
                var id = event.dataTransfer.getData('id');
                var dom = document.getElementById(id);
                this.appendChild(dom);
                // 若想使其拖拽放置在body中，需要阻止事件冒泡
                event.stopPropagation();
            }
        })
    </script>
</body>

SuwanH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
--H5--

一、progress1.progress 表示运行中的进度<progress></progress>（1）在HTML中放置progress标签，无内嵌属性和文本时，显示的是整个进度条被填满的状态（2）给progress设置属性<progess value='50' max='100'></progress>其中value是进度条在框里的进度，注意：设置value属性时，一定要设置max属性，页面才有效果二、input..
复制链接

扫一扫