首頁 > 開發者 > JavaScript

使用JavaScript動態建立正弦映像，還有div拖拽功能，歡迎評價~！__亂碼問題

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！ 
如需轉載請註明出處~。~。<!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 runat="server">    <title>正弦曲線</title>    <style type="text/css">        body { background-color:Black;}        #menu { top:150px; left:800px; width:300px; height:150px;  position:absolute; cursor:move; border-style:solid; border-color:Red;}        .bt { width:70px;}        .text { width:40px;}            </style>    <script language="javascript" type="text/javascript">        var a = 50;        var omiga = 2;        var phase = 0;        var r = 0;        var time = 0;        var timer = "";        function Show(o,diva,type,phasetxt)        {            document.getElementById("sin").innerHTML = "";            if(o==""||o==0)                omiga=2;            else                omiga=o;            if(diva==""||diva==0)                a=50;            else                a=diva;            if(document.getElementById("phasetext").value=="")                phase=0;            else                phase= parseFloat(phasetxt);            if(type=="D")            {                for(var i = time+0; i<360+time; i++)                {                    var radian =  Math.PI/180*i;                    var left = i-time+50;                    var top = -a* Math.sin(omiga * radian + phase)+ 50;                    document.getElementById("sin").appendChild(CreatePoint(left,top,"red"));                }            }            else            {                for(var i = 0; i<360; i++)                {                    var radian =  Math.PI/180*i;                    var left = i+50;                    var top = -a* Math.sin(omiga * radian + phase)+ 50;                    document.getElementById("sin").appendChild(CreatePoint(left,top,"red"));                }            }            for(var i = 50; i<=420; i++)                document.getElementById("sin").appendChild(CreatePoint(i,50,"white"));            for(var i = 0; i<=100; i++)                document.getElementById("sin").appendChild(CreatePoint(50,i,"white"));            if(type=="D")            {                time += 10;                timer= setTimeout("Okclick('D')",200);            }        }                function CreatePoint(left,top,color)        {            var point = document.createElement("div");            with(point)            {                style.width = "2px";                style.height = "2px";                style.backgroundColor = color;                style.position = "absolute";                style.left = left + "px";                style.top = top + "px";            }            return point;        }                var X=0,Y=0;        var Divmove =function(){}        Divmove.Move = function(id)        {            var div=document.getElementById(id);            div.onmousedown = function()            {                X=event.clientX - div.offsetLeft;                Y=event.clientY - div.offsetTop;                document.onmousemove = function()                {                    div.style.left=event.clientX - X;                    div.style.top=event.clientY - Y;                }                document.onmouseup = function()                {                    document.onmousemove = null;                }            }                    }        function Okclick(tp)        {            var o=document.getElementById("Omiga").value;            var diva=document.getElementById("diva").value;            var phasetxt=document.getElementById("phasetext").value;            var type=tp;            Show(o,diva,type,phasetxt);        }    </script></head><body onload="Show(2,0,0)">    <form id="form1" runat="server">    <div id="sin">    </div>    </form>       <div id="divmove" style="position: absolute; left: 420px;top: 0px;width:300px;height:150px; background-image:url(images/divbg.gif); color:White; cursor:move; border:solid 4pxwhite;" onmousedown="Divmove.Move('divmove')">            <div style=" background-color:Gray; filter:alpha(opacity=50);">輸入參數：<hr /></div><br />           頻率:<input class="text" id="Omiga" type="text" /> 振幅:<input id="diva" class="text"  type="text" /> 相位:<inputid="phasetext" class="text"  type="text" />           <br /><br /><hr />           <input id="Ok" class="bt" type="button" value="確定"onclick="Okclick()" /><input id="Dshow" class="bt" type="button"onclick="Okclick('D')" value="動態顯示" /><input id="Cshow"class="bt" type="button" onclick="clearTimeout(timer);" value="停止動態" />       </div></body></html>


本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More