js.事件函数

Posted Html5Skill

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js.事件函数相关的知识，希望对你有一定的参考价值。

1、

2、

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">

    <script type="text/javascript" >
    <!--

        function StrokeDasharray(_value)
        {
            console.log("dash array : "+_value);
            var svgForStrokeLine = document.getElementById("svgForStrokeLine");
            svgForStrokeLine.setAttribute("stroke-dasharray", _value);
        }

        function StrokeDashoffset(_value)
        {
            console.log("dash offset : "+_value);
            var svgForStrokeLine = document.getElementById("svgForStrokeLine");
            svgForStrokeLine.setAttribute("stroke-dashoffset", _value);

            var value01 = svgForStrokeLine.getAttribute("stroke-dashoffset");
            console.log("dash offset - value : "+value01);
        }

    -->
    </script>
</head>

<body>

    <svg id="svgForStroke" width="400" height="200" xmlns="http://www.w3.org/2000/svg">
     <g>
      <line id="svgForStrokeLine" fill="none" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="round" x1="0" y1="90" x2="400" y2="90"/>
     </g>
    </svg>


    <p>点击下面的滑块（或输入数值）体验下：<br>
    <!--
        <strong>stroke-dasharray:</strong>
        <input type="range" min="0" max="400" value="0" size="30" onchange=‘javascript:document.querySelector("#svgForStroke line").setAttribute("stroke-dasharray", this.value)‘ />
        <br>
        <strong>stroke-dashoffset:</strong>
        <input type="range" min="0" max="400" value="0" size="30" onchange=‘javascript:document.querySelector("#svgForStroke line").setAttribute("stroke-dashoffset", this.value)‘ />
    -->
        <strong>stroke-dasharray:</strong>
        <input type="range" min="0" max="400" value="0" size="30" onchange=‘StrokeDasharray(this.value)‘ />
        <br>
        <strong>stroke-dashoffset:</strong>
        <input type="range" min="0" max="400" value="0" size="30" onchange=‘StrokeDashoffset(this.value)‘ />
    </p>

</body>
</html>

 

3、

4、

5、

 

以上是关于js.事件函数的主要内容，如果未能解决你的问题，请参考以下文章

C#常用代码片段备忘

Reactreact概述组件事件

原生js如何绑定a连接点击事件？

几个关于js数组方法reduce的经典片段

web代码片段

JS常用代码片段-127个常用罗列-值得收藏