js sinx图像

最新推荐文章于 2022-11-22 16:10:22 发布

weixin_33958585

最新推荐文章于 2022-11-22 16:10:22 发布

阅读量1.1k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/suninnight/archive/2012/08/22/2650545.html

版权

View Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML XMLNS:ELEMENT>
<html>
<head>
<title>::sin::</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
body{
    margin:0px;
}
#x{
    position:absolute;
    top:400px;
    left:0px;
    height:1px;
    width:1200px;
    background-color:black;
    overflow:hidden;
}
#x_arrow{
    position:absolute;
    top:389px;
    left:1195px;
    height:15px;
    width:15px;
}
#y{
    position:absolute;
    top:0px;
    left:400px;
    height:750px;
    width:1px;
    background-color:black;
    overflow:hidden;
}
#y_arrow{
    position:absolute;
    top:-1px;
    left:393px;
    height:15px;
    width:15px;
}
#o{
    position:absolute;
    top:415px;
    left:385px;
    height:15px;
    width:15px;
    font-size:18px;
}
input{    
    width:25px;
    height:30px;
    border:none;
    text-align:center;
}
#clean{
    width:25px;
    height:15px;
    background-color:#5f9fff;
    cursor:pointer;
    display:inline-block;
    text-align:center;
    font-weight:bold;
    line-height:15px;
}
</style>
</head>
<body>
<div>
<input type="text" id="pa" maxlength="5" />sin(<input type="text" id="pb" maxlength="5" />x + <input type="text" id="pc" maxlength="5" />) <button οnclick="show()">show</button> <div id="clean" style="color:white" >O</div>
</div>
<div id="x"></div>
<div id="y"></div>
<div id="x_arrow">▶</div><div id="y_arrow">▲</div>
<div id="o">O</div>
</body>
</html>

<script type="text/javascript">
var o_x = 400;
var o_y = 400;
var step = 0.01;
var points = 0;
var oFrag = document.createDocumentFragment();
var button = document.getElementById("clean");
var b = false;

(function(){
    var x = 0;
    var y = 0;
    while(x <= Math.PI * 4){
        y = Math.sin(x);
        draw(x,y);
        points++;
        x += step;
    }
    document.body.appendChild(oFrag);
    points = 0;
})();

button.onclick = function() {
    button.style.color = (button.style.color == "white")?((b = true) == true?"red":""):((b = false) == false?"white":"");
}


function show(){
    var x = 0;
    var y = 0;
    var pa = document.getElementById("pa").value;
    var pb = document.getElementById("pb").value;
    var pc = document.getElementById("pc").value;
    var tempx = 0;
    var tempx2 = 0;
    var tempy = 0;
    //clean
    if(b) {
        var aElms = document.getElementsByTagName("*");    
        for(var i = 0;i < aElms.length;i++){
            if(aElms[i].style.backgroundColor == "red" || aElms[i].style.backgroundColor == "blue") {
                document.body.removeChild(aElms[i]);
                i = 0;
            }
        }
    }
    //draw
    setTimeout(function(){
        while(x <= Math.PI * 4){
            y = Math.sin(x);
            if(pc != ""){
                tempx = x - pc / 50;
            } else {
                tempx = x;
            }
            if(pb != ""){
                tempx2 = tempx * (1 / pb);
            }else {
                tempx2 = tempx;
            }
            if(pa != ""){
                tempy = y * pa;
            } else {
                tempy = y;
            }
            draw(tempx2,tempy);
            points++;
            x += step;
        }
        document.body.appendChild(oFrag);
        points = 0;
    },300);
}

//draw -x , -y
function draw(x,y) { 
    var top = y * 50 * -1 + o_y;
    var left = x * 50 + o_x;
    var oDiv = document.createElement("div");
    oDiv.style.position = "absolute";
    oDiv.style.top = top + "px";
    oDiv.style.left = left + "px";
    oDiv.style.width = "1px";
    oDiv.style.height = "1px";
    oDiv.style.backgroundColor = "blue";
    oDiv.style.overflow = "hidden";
    if(points % 157 == 0){
        oDiv.style.overflow = "";
        oDiv.style.top = (top - 1) + "px";
        oDiv.style.left = (left - 1) + "px";
        //oDiv.innerHTML = "(" + top + "," + left + ")";
        oDiv.innerHTML = (points != 0)?(points <= 314)?(points % 314 != 0)?("π/" + 314 / points):("π"):(points % 314 != 0)?(points / 157 + "π/2"):(points / 314 + "π"):("");
        oDiv.style.width = "3px";
        oDiv.style.height = "3px";
        oDiv.style.backgroundColor = "red";
    }
    oFrag.appendChild(oDiv);
}
</script>

转载于:https://www.cnblogs.com/suninnight/archive/2012/08/22/2650545.html

weixin_33958585

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js sinx图像

View Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><HTML XMLNS:ELEMENT><html><head><title>::sin::</title><meta http-equiv="Co...
复制链接

扫一扫