Js模拟三角函数曲线

最新推荐文章于 2024-10-04 06:11:34 发布

chuoyijian8483

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量121

点赞数

文章标签： xhtml javascript ViewUI

原文链接：https://my.oschina.net/u/660755/blog/98144

版权

<!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">
<meta name="description" content="javascript特效，正弦函数，余弦函数" />
<meta name="copyright" content="http://hi.baidu.com/lpj1985" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<head>
<title>JS模拟三角函数</title>
<script type="text/javascript">

        /*如果在jquery框架里面的话它代表jquery本身。
        其它时候它只是一个变量名，仅此而已。
        比如var $ = function(id){return document.getElementById(id);};
        那么现在$就代表一个函数了，
        直接$('myDiv');就等同于document.getElementById('myDiv');
        */
        function $(id) {
            return document.getElementById(id);
        }
        function gt(obj, tag) {
            return obj.getElementsByTagName(tag);
        }
    </script>
    <style type="text/css">
        body, html
        {
            margin: 0;
            background: #666;
        }
        #container, #container1
        {
            position: absolute;
            width: 600px;
            height: 60px;
            left: 50%;
            top: 50%;
            margin: -30px 0 0 -300px;
            background: #bbb;
            border: 1px #fff solid;
        }
        #container1
        {
            margin: -90px 0 0 -300px;
            border-bottom: none;
        }
        #container div.sin, #container div.cos
        {
            position: absolute;
            width: 2px;
            height: 2px;
            background: #900;
            overflow: hidden;
        }
        #container div.cos
        {
            background: #036;
        }
        #opt
        {
            width: 600px;
            height: 20px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: 60px 0 0 -300px;
            background: #ccc;
        }
        #opt span
        {
            font-family: Arial;
            font-size: 12px;
            display: block;
            float: right;
            background: #888;
            height: 20px;
            width: 40px;
            line-height: 20px;
            overflow: hidden;
            margin-left: 1em;
            text-align: center;
            cursor: pointer;
        }
        #opt .sin, #opt .cos
        {
            color: #900;
            float: left;
            margin-left: 0;
            margin-right: 1em;
        }
        #opt .cos
        {
            color: #036;
        }
    </style>
</head>
<body onselectstart="return false">
    <div id="container1">
    </div>
    <div id="container">
    </div>
    <div id="opt">
        <span class="sin" οnclick="shCur('sin')">sinX</span> <span class="cos" οnclick="shCur('cos')">
            cosX</span> <span οnclick="clearTimeout(timer)">Stop</span> <span οnclick="mCur()">Play</span>
        <span οnclick="spl('b')">PL+</span> <span οnclick="spl('s')">PL-</span> <span οnclick="szf('b')">
            ZF+</span> <span οnclick="szf('s')">ZF-</span>
    </div>
    <script type="text/javascript">
        var zf = 50; pl = 0.05; x = 0;
        //绘制曲线
        function drawCur(zf, pl) {
            $('container').innerHTML = "";
            rX = 0;
            rY = 0;
            for (i = 1; i <= 200; i++) {
                var dsin = document.createElement("div");
                dsin.setAttribute("id", "sin" + i);
                dsin.className = "sin";
                dsin.style.left = rX + "px";
                dsin.style.top = Math.sin((i + x) * pl) * zf + "px";
                var dcos = document.createElement("div");
                dcos.setAttribute("id", "cos" + i);
                dcos.className = "cos";
                dcos.style.left = rX + "px";
                dcos.style.top = Math.cos((i + x) * pl) * zf + "px";
                rX += 3;
                rY += pl;
                $('container').appendChild(dsin);
                $('container').appendChild(dcos);
            }
        }
        drawCur(zf, pl);
        //隐藏曲线
        function shCur(cur) {
            var cdiv = gt($('container'), "div");
            for (i = 0; i < cdiv.length; i++) {
                if (cdiv[i].id.substring(0, 3) == cur) {
                    cdiv[i].style.display = (cdiv[i].style.display == "block") ? "none" : "block";
                }
            }
        }
        //设置振幅、频率
        function szf(flag) {
            if (flag == "b") zf += 5;
            if (flag == "s") zf -= 5;
            drawCur(zf, pl);
        }