马黑黑 发表于 2023-8-2 08:17

html : output标签

本帖最后由 马黑黑 于 2023-8-2 08:24 编辑 <br /><br /><p>output标签通常作为form的子元素出现，用于form内的表单元素的实时输出，具有value值。下面的output标签，标签内的数字就是它的value值：<br><br></p>
<pre>        &lt;output&gt;500&lt;output&gt;

</pre>
<p>一般情况下，output标签应该有自己的 id 标识，以便和表单元素捆绑，并通过编程实时输出表单指定元素的值。试看以下代码，我们虽然没有提供完整的form组件标签，但input标签和output标签一样可以捆绑、编程：<br><br></p>
<pre>        &lt;label for="age"&gt;年龄 ：&lt;label&gt;
        &lt;input id="age" type="range" min="0" max="130" value="18"
                oninput="ageout.value=this.value + '岁'" /&gt;
        &lt;output id="ageout"&gt;18岁&lt;/output&gt;

</pre>
<p>其中的 oninput="ageout.value=this.value + '岁'" 是嵌入式JS代码，oninput是可输入元素的输入事件，利用该事件，我们令ID标识为ageout的output标签的value值等于this.value，this指向有嵌入式JS语句的那个input表单元素标签。<br><br></p>
<p>效果如下：<br><br></p>
<p>
        <label for="age">年龄 ：</label>
        <input id="age" type="range" min="0" max="130" value="18" oninput="ageout.value=this.value + '岁'">
        <output id="ageout">18岁</output>
</p>

花飞飞 发表于 2023-8-2 08:31

四行代码写成一个在线演示。。神奇的代码大神用。。
看不懂的飘过一下~

红影 发表于 2023-8-2 09:49

“oninput是可输入元素的输入事件”，然后这个事件对应事件的值吧。
这个挺难懂{:4_173:}

醉美水芙蓉 发表于 2023-8-2 11:57

马黑黑 发表于 2023-8-2 12:58

红影 发表于 2023-8-2 09:49
“oninput是可输入元素的输入事件”，然后这个事件对应事件的值吧。
这个挺难懂

写成正规的JS代码：

元素.oninput = () => {
    ageout.value = 元素.value + '岁';
}

意思是，元素在输入时，元素的value值赋予 ageout 标签（即 id="ageout" 的 output 标签）的 value 值。

表单元素的输入，可以是文本的纯录入，可以是滑杆的滑动，或是上、下箭头的选值，以及单选按钮、多选按钮的选择等等。

马黑黑 发表于 2023-8-2 12:59

花飞飞 发表于 2023-8-2 08:31
四行代码写成一个在线演示。。神奇的代码大神用。。
看不懂的飘过一下~

这个认真研究一下立马能懂

红影 发表于 2023-8-2 14:15

马黑黑 发表于 2023-8-2 12:58
写成正规的JS代码：

元素.oninput = () => {


还可以有这么多舒服方式啊。

马黑黑 发表于 2023-8-2 18:16

红影 发表于 2023-8-2 14:15
还可以有这么多舒服方式啊。

嵌入式很多场合会用到，它实际上也是地道的JS

红影 发表于 2023-8-2 20:23

马黑黑 发表于 2023-8-2 18:16
嵌入式很多场合会用到，它实际上也是地道的JS

只是对它们总是感觉很陌生{:4_173:}

马黑黑 发表于 2023-8-2 20:32

本帖最后由 马黑黑 于 2023-8-2 20:33 编辑

红影 发表于 2023-8-2 20:23
只是对它们总是感觉很陌生
就是直接写在HTML元素里。例如：

<p onclick="javascript: alert('你点击了我');">点击我</p>也可以直接写成：
<p onclick="alert('你点击了我');">点击我</p>

花飞飞 发表于 2023-8-2 21:01

马黑黑 发表于 2023-8-2 12:59
这个认真研究一下立马能懂

{:4_181:}立马估计是不行了，慢慢懂吧

马黑黑 发表于 2023-8-2 21:03

花飞飞 发表于 2023-8-2 21:01
立马估计是不行了，慢慢懂吧

这个，语句少，逻辑清楚，再好理解不过

花飞飞 发表于 2023-8-2 21:06

马黑黑 发表于 2023-8-2 21:03
这个，语句少，逻辑清楚，再好理解不过

你感觉象一加一等于二，我感觉是高数。{:4_170:}

马黑黑 发表于 2023-8-2 21:07

花飞飞 发表于 2023-8-2 21:06
你感觉象一加一等于二，我感觉是高数。

这个绝对不是高数，是五毛六毛的问题

红影 发表于 2023-8-2 21:27

马黑黑 发表于 2023-8-2 20:32
就是直接写在HTML元素里。例如：

也可以直接写成：

直接写的这个就是嵌入式吧？

马黑黑 发表于 2023-8-2 22:50

红影 发表于 2023-8-2 21:27
直接写的这个就是嵌入式吧？

写在HTML标签里的JS语句是嵌入式

花飞飞 发表于 2023-8-3 12:32

马黑黑 发表于 2023-8-2 21:07
这个绝对不是高数，是五毛六毛的问题

{:4_170:}不是就好……有空学学这里的逻辑

马黑黑 发表于 2023-8-3 12:48

花飞飞 发表于 2023-8-3 12:32
不是就好……有空学学这里的逻辑

简单的一匹，比PS要简单不少

红影 发表于 2023-8-3 19:23

马黑黑 发表于 2023-8-2 22:50
写在HTML标签里的JS语句是嵌入式

哦，从JS嵌入HTML .

花飞飞 发表于 2023-8-3 20:25

马黑黑 发表于 2023-8-3 12:48
简单的一匹，比PS要简单不少
好哒。。。老师这么说就有信心了。{:4_173:}不然看着它望而却步
页: [1] 2 3 4
查看完整版本: html : output标签