HTML5 学习札记

最新推荐文章于 2024-07-19 23:42:48 发布

Annie_tyn

最新推荐文章于 2024-07-19 23:42:48 发布

阅读量233

点赞数

分类专栏： HTML 文章标签： html5

本文链接：https://blog.csdn.net/qq_25034665/article/details/78483193

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、input标签自动完成功能

有的项目会要求实现自动完成或者输入提示功能，在HTML5的支持下将变得简单

<input type="text" autocomplete="on" name="demoAutoComplete" list="autoNames" />
<datalist id="autoNames">
       <option  value="实验楼" ></option>
       <option  value="HTML5" ></option>
       <option  value="input标签" ></option>
</datalist>

二、`autofocus`属性

demo:<input type="text" autofocus="autofocus"/>此属性可以设置当前页面中input标签加载完毕后获得焦点。

<input type="text" autofocus="autofocus" required pattern="\d+"/>

三、FileReader对象的三个读取文件数据方法

readAsBinaryString(Blob blob) 传入一个Blob对象，然后读取数据的结果作为二进制字符串的形式放到FileReader的result属性中。
readAsText(Blob blob, optional DOMString encoding) 第一个参数传入Blob对象，然后第二个参数传入编码格式，异步将数据读取成功后放到result属性中，读取的内容是普通的文本字符串的形式。
readAsDataURL(Blob blob) 传入一个Blob对象，读取内容可以做为URL属性，也就是说可以将一个图片的结果指向给一个img的src属性。

实例二：读取上传文件内容，然后将文件内容直接读取到浏览器上（注：需要引入jQuery）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        if(typeof FileReader == "undified") {
            alert("您老的浏览器不行了！");
        }

        function showDataByURL() {
            var resultFile = document.getElementById("fileDemo").files[0];
            if (resultFile) {
                var reader = new FileReader();
                reader.readAsDataURL(resultFile);
                reader.onload = function (e) {
                    var urlData = this.result;
                    document.getElementById("result").innerHTML += "<img src='" + urlData + "' alt='" + resultFile.name + "' />";
                }; 
            }
        } 

        function showDataByBinaryString() {
            var resultFile = document.getElementById("fileDemo").files[0];
            if (resultFile) {
                var reader = new FileReader();
                //异步方式，不会影响主线程
                reader.readAsBinaryString(resultFile);
                reader.onload = function(e) {
                    var urlData = this.result;
                    document.getElementById("result").innerHTML += urlData;
                };
            }
        }

        function showDataByText() {
            var resultFile = document.getElementById("fileDemo").files[0];
            if (resultFile) {
                var reader = new FileReader();
                reader.readAsText(resultFile,'gb2312');
                reader.onload = function (e) {
                    var urlData = this.result;
                    document.getElementById("result").innerHTML += urlData;
                };
            }
        }

    </script>
</head>
<body>
    <input type="file" name="fileDemo" id="fileDemo" multep/>
    <input type="button" value="readAsDataURL" id="readAsDataURL" onclick="showDataByURL();"/>
    <input type="button" value="readAsBinaryString"  id="readAsBinaryString" onclick="showDataByBinaryString();"/>
    <input type="button" value="readAsText"  id="readAsText" onclick="showDataByText();"/>
    <div id="result">
    </div>
</body>
</html>

四、Canvas绘图

要使用Canvas来绘制图形必须在页面中添加Canvas的标签

<canvas id="demoCanvas" width="500" height="500">
<p>
  请使用支持HTML5的浏览器查看本实例
</p>
</canvas>

只有上面的标签，只能是创建好了一个画布，其中width和height属性就是设置画布的大小。Id属性也是必须的，后面要用Id来拿到当前的Canvas的Dom对象。通过此Canvase的Dom对象就可以获取他的上下文（Context）了，Canvas绘制图形都是靠着Canvas对象的上下文对象
```
<script type="text/javascript">
//第一步：获取canvas元素
var canvasDom = document.getElementById("demoCanvas");
//第二步：获取上下文
var context = canvasDom.getContext('2d');
</script>
```
Context上下文默认两种绘制方式：

第一种：绘制线（stroke）

第二种：填充（fill）
用于绘制立体透明矩形、圆、线条、文本、图形等

Annie_tyn

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5 学习札记

一、input标签自动完成功能有的项目会要求实现自动完成或者输入提示功能，在HTML5的支持下将变得简单。二、autofocus属性demo:<input type="text" autofocus="autofocus"/>此属性可以设置当前页面中input标签加载完毕后获得焦点。三、FileReader对象的三个读取文件数据方法r
复制链接

扫一扫