无需 JavaScript 可以实现的 9 个网页功能

关注

发布于: 4 小时前

HTML 是超文本标记语言，它能够轻松地为网页创建元素，可以使用标签、属性、添加脚本等等。同时 HTML 比想象的更有用，在有些场景下可以不需要 JavaScript。今天跟大家分享 9 个不需要 JavaScript 能够实现的小功能。

1.颜色选择器

使用 HTML 标签 <input> 可以轻松的创建颜色选择器，将其类型设置为 "color" 的即可。

<label for="color-picker">颜色选择器：</label><input type="color" id="color-picker" value="#ff0000" />

复制代码

2.自动刷新

自动刷新和调整都可以通过 HTML 来实现，设置标签 <meta> 即可实现。在 HTML 页面的 <head></head> 内加入以下代码即可实现 10 秒刷新一次：

<meta http-equiv="refresh" content="10" />

复制代码

以下代码是 10秒 后跳转到指定 https://juejin.cn/ 首页，如果想直接调整，将 10 改为 0 即可：

<meta http-equiv="refresh" content="10; url='https://juejin.cn/'" />

复制代码

3.响应式图像

通常在开发响应式页面时，需要根据不同的分辨率适配不同的图片，以节省流量，减少等待时间，通常是借助 JavaScript 来实现。通过<picture>标签可以在无 JavaScript 的情况实现响应式。

<picture>      <source media="(min-width: 495px)" srcset="small.jpg">      <source media="(min-width: 768px)" srcset="mid.jpg">      <img src="high.jpg" alt="high"></picture>

复制代码

<source>标签的media属性为媒体查询表达式，srcset属性就是<img>标签的srcset属性，给出加载的图像文件。

浏览器按照<source>标签出现的顺序，依次判断设备是否满足media属性的媒体查询条件，如果满足则加载 srcset 属性指定的图片，并且不再执行后面的<source>标签和<img>标签。

4.进度条

<progress> 标签可以实现进度条效果，不需要 JavaScript。如：

<label for="finished">完成进度：</label><progress id="finished" value="80" max="100"></progress>80%

复制代码

效果如图：

5.显示和隐藏文本

在 HTML 中，可以不使用 JavaScript 的情况下实现文本的显示或者隐藏，使用 details 标签。

<details>元素可创建一个挂件，仅在被切换成展开状态时，它才会显示内含的信息。<summary> 元素可为该部件提供概要或者标签。

<details>    <summary>点击展开或者隐藏</summary>    <p>卡耐基对微笑有这样的描述：“它在家中产生，他不能买，不能求，不能借，不能偷，因为在人们得到它之前，对谁都是无用的东西，他给予后人之后，会使你得到别人的好感，它是疲倦者的休息，希望的阳光，悲哀者的力量，又是大自然免费赋予人们的一种解除苦难的良药。”</p></details>

复制代码

加一点样式：

details {    border: 1px solid #aaa;    border-radius: 5px;    padding: 1em;}
summary {    font-weight: bold;    padding: 0.5em;}

复制代码

6 定义度量衡

<meter> 标签可以用来定义度量衡，用于已知最大和最小值的度量指标，<meter>标签是双标签，在<meter></meter>之间的元素内容是不可见的。

<label for="bandwidth">带宽：</label><meter id="bandwidth" value="200" min="0" max="1024">2-1024</meter><br /><label for="memory">内存：</label><meter id="memory" value="0.6">60%</meter>

复制代码

效果如下：

progress为动态的 ; meter为静态的

7.下拉和搜索输入框

可以仅使用 HTML 在输入中创建下拉列表和可搜索文本，使用datalist标签。

<datalist>元素包含了一组<option>元素，这些元素表示其它表单控件可选值，搜索不区分大小写。

 <input list="words" /><datalist id="words">    <option value="Dream"></option>    <option value="Teamwork"></option>    <option value="Development"></option>    <option value="Cheer"></option></datalist>

复制代码

8.动态输出

在 vue 中经常有计数器的示例，其实 HTML 也可以实现类似的。通过标签 <output>，这个标签用来表示计算或用户操作的结果。

<form oninput="result.value=parseInt(a.value)*parseInt(b.value)">    <input type="number" id="b" name="b" value="2" /> ×    <input type="number" id="a" name="a" value="2" /> =    <output name="result" for="a b">4</output></form>

复制代码

上面的代码实现了计算器乘法运算，运行效果如下：

9.可编辑文本

可编辑文本容器，相比有 JavaScript 的富文本来说差一点，如代码：

<div class="editor-box" contenteditable="true">    卡耐基对微笑有这样的描述：“它在家中产生，他不能买，不能求，不能借，不能偷，因为在人们得到它之前，对谁都是无用的东西，他给予后人之后，会使你得到别人的好感，它是疲倦者的休息，希望的阳光，悲哀者的力量，又是大自然免费赋予人们的一种解除苦难的良药。”</div>

复制代码

效果如下：

上面的小功能是在不使用任何 JavaScript 的情况下在 HTML 中完成的。

发布于: 4 小时前阅读数: 4

原文链接:【http://xie.infoq.cn/article/ec272431b90b3beda282ad83e】。文章转载请联系作者。

devpoint

关注

细节的追求者 2011.11.12 加入

专注前端开发，用技术创造价值！

发布

暂无评论

创作场景

无需 JavaScript 可以实现的 9 个网页功能

1.颜色选择器

2.自动刷新

3.响应式图像

4.进度条

5.显示和隐藏文本

6 定义度量衡

7.下拉和搜索输入框

8.动态输出

9.可编辑文本

devpoint

评论