<!DOCTYPE HTML>
<html>
<!-- οndragstart="return false"禁止圖片拖動、複製。青春耗費-->
<head>
<title>齒計算</title>
<meta charset="utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="齒輪計算，"/>
<style type="text/css">
*{margin:0;padding:0;
list-style: none;/*黑點*/
text-decoration: none;/*去除超鏈接下劃線*/}
html,body{ font-family:"溫軟雅黑";font-size:12px;/*設置一個默認字體樣式*/background:pink;}
/*top start*/
.top{ width:100%;height:84px;background:#FFFAFA;box-shadow:2px 2px 11px 2px #444;/*陰影*/ position:fixed;/*位置固定*/top:0px; z-index:999;}
.top .t-header{ width:1000px;height:50px;/*background:#ff9933;*/ margin:0 auto;/*居中*/}
.top .t-header .t-logo{ float:left;margin-top:2px;}
.top .t-header .t-desc{ float:right;line-height:50px;font-size:22px;font-weight:600;color:#0392EB;font-weight:300; /* 字體變細300磅*/ }
/*top end*/
/*content1 start*/
.content1{ width:270px;height:580px;background:#000; margin-top:110px;float:left;border-radius:0 5px 6px 0;
overflow:hidden;box-shadow:2px 2px 2px #333;/*陰影導航欄 */}
.content1 .rowicon{ height:40px;background:#689FE2;} /* jquery控制伸展、收縮。*/
.content1 .rowicon .nav_btn{ display:block;text-align:center;font-size:30px;line-height:40px;}
.content1 .rowicon .nav_btn .icon-tablecollapse{ display:inline-block;width:30px;background:#04f;border-radius:50% 50%;vertical-align:top;transform:rotate(90deg);font-size:16px;}/**/
.content1 .rowicon .nav_btn .icon-tablecollapse:hover{ color:#0f0;}
.content1 .nav_list{ width:99%;height:458px;background:#fff;margin-top:15px;padding-top:4px;}
.content1 .nav_list .items{ width:97%;height:48px;background:rgba(79, 76, 82, 0.8);border-radius:0 10px 10px 0;border-top:1px solid rgba(0,0,0,0.3);border-bottom:1px solid rgba(0,0,0,0.3);margin-top:6px;}
.content1 .nav_list .items .item{display:block;height:100%;line-height:50px;font-size:20px;color:#fff;font-weight:600;padding-left:41px;}
.content1 .nav_list .items .item i{display:inline-block;width:50px;height:100%;float:right;text-align:center;font-weight:600;color:#1AF10C;}
.content1 .nav_list .items .item:hover{background:rgba(134, 49, 226, 0.8);font-size:22px;color:#F5F908;border-radius:0 10px 10px 0;padding-left:25px;}
.content1 .nav_list .items .item:hover i{color:#f00;}
.content2{ width:700px;height:520px;background:#ff9933;margin:110px 0 10px 35px;float:left;border-radius:10px 10px 8px 8px;
overflow:hidden;box-shadow:2px 2px 2px #333;/*陰影*/}
/*滾動菜單欄 */
.content2 .box_content{ width:675px;height:500px;margin:10px auto; }
.top_tab_head{
width:90%;height:25px;border-bottom:2px solid #96989A;
margin:0 auto;padding:6px 0 7px;
white-space:nowrap;/*不換行*/
overflow:hidden;
position: relative; z-index:9;
}
.top_tab_head a{
display:inline-block;/*block塊元素，會換行；inline-block行內塊元素，不換行。*/
width:20%;border-right:1px solid #d2d2d2;
text-align:center;line-height:29px;
font-size:22px;text-overflow:ellipsis;/*多餘超出部分以省略號顯示*/
margin-left:-10px;margin-right:2px; color:#000;
}
/*滾動的下劃線(區域)*/
.scop{
width:110px;height:3px;background:#06F;
position:absolute;left:0; bottom:0; z-index:99;
/*translate平移*/
transform: translateX(0px);
transition: transform 0.5s;
}
/*滾動內容(區域) body_tab_content ***********************/
.body_tab_content{ margin-top:10px;background:#FFF;border:1px solid #41464E;}
.content{ height:450px;overflow:hidden;font-size:16px;font-weight:600;
display: none;/**滾動區域首先隱藏 */ }
.item-on{ display:block; }
/********************************************************/
ul,li{list-style:none;}
.calculator{width:675px;height:440px;background:#DEDEDE;margin:0px auto;}
.calculator .title{height:40px;line-height:40px;font-size:16px;padding:5px;color:#fff;background:#000;}
.calculator .box{width:600px;margin:26px auto;background:#FFFF08;}
.calculator .box input{width:593px;height:44px;outline:none;border:1px solid #dfdfdf;text-align:right;margin:2px 0px;padding-right:5px;font-size:28px}
.calculator .box p span{display:block;height:30px;line-height:30px;padding:5px;}
.calculator .box p .b_title{float:left;color:#000;}
.calculator .box p .b_author{float:right;}
.calculator .box ul li{float:left;width:116px;height:56px;line-height:56px;background:#50F30D;margin:2px;text-align:center;font-size:28px;cursor:pointer;color:#000;}
.calculator .box ul li:hover{background:#66E;}
.calculator .box ul .op{background:#6B8AD5;}
.calculator .box ul .eq{background:#D3670A;}
.deg .title{ height:40px;line-height:40px;font-size:16px;padding:5px;color:#fff;background:#000;}
.deg #deg_list .b-login .b-btn{ display:block;width:120px;height:40px;background:#4D85F5;float:left;text-decoration:none;/*去除超鏈接下劃線*/border-radius:6px;
text-align:center;line-height:40px;/*行高*/ font-size:18px; font-family:"華文行楷";color:#fff; margin:6px 0 0 40px; box-shadow:2px 2px 2px #333;/*陰影*/}
.deg #deg_list .b-login .b-btn:hover{ background:#1061F7; box-shadow:1px 1px 1px #7007FB;/*陰影*/font-size:22px; }
.CK_document h3{ margin:12px 260px;}
.CK_document .canKao{ margin-left:12px;}
/*end content2*/
/*music start*/
.mPower{
width: 18px;height: 18px; border:1px solid #8A7777;/*灰色小邊框*/border-radius:4px ;
position: fixed;
bottom: 29rem;
right: 8.2rem;
z-index: 1;
}
#play:hover{
filter: alpha(opacity=4);
opacity: 1;
}
#play {
width: 16px;height: 16px;
background:url("img/play.jpg")no-repeat center;
display: inline-block;
margin-bottom: -3px;
filter: alpha(opacity=0.8);
opacity: 0.8;
cursor: pointer;
}
/*music end*/
</style>
<link rel="stylesheet" type="text/css" href=""></link>
<link rel="shortcut icon" href="img/000.jpg"></link>
</head>
<body>
<!--STAR top-->
<div class="top">
<div class="t-header">
<div class="t-logo">
<a href="###">
<!--圖片標籤四要素:-->
<img src="img/logo.jpg" alt="DZ" width="240" height="60" />
</a>
</div>
<div class="t-desc">
xxxx
</div>
</div>
</div>
<!--start content -->
<div class="content1">
<div class="rowicon">
<a href="javascript:;" class="nav_btn"><i class="iconfont icon-tablecollapse">→</i>按鈕</a>
</div>
<ul class="nav_list" id="main_list">
<audio id="audioPlayer"></audio>
<li class="items">
<a class="item" href="web/web/index.html" target="_blank" >通用齒輪傳動<i class="iconfont icon-web active">1</i></a>
</li>
<li class="items">
<a class="item" href="web/web/通用圓柱-蝸輪蝸桿傳動計算項目/index.html" target="_blank" >蝸輪蝸桿傳動<i class="iconfont icon-java">2</i></a>
</li>
<li class="items">
<a class="item" href="web/web/通用圓柱-蝸輪蝸桿傳動計算項目/indexZC3.html" target="_blank">圓弧圓柱蝸桿傳動<i class="iconfont icon-data">3</i></a>
</li>
<li class="items">
<a class="item" href="javascript:;" title="TOOL實用工具">TOOL實用工具<i class="iconfont icon-tool">4</i></a>
</li>
<li class="items">
<a class="item" href="javascript:;" title="友情鏈接">友情鏈接<i class="iconfont icon-link ">5</i></a>
</li>
<li class="items">
<a class="item" href="http://www.baidu.com/" target="_blank" title="友情鏈接">百度<i class="iconfont icon-link ">6</i></a>
</li>
<li class="items">
<a class="item" href="javascript:;" title="help"> <i class="iconfont icon-data">7</i></a>
</li>
<li class="items">
<a class="item" href="javascript:;" title="help"> <i class="iconfont icon-data">8</i></a>
</li>
</ul>
</div>
<div class="content2">
<section class="box_content">
<!--滾動菜單欄(區域)-->
<div class="top_tab_head">
<a href="javascript:" >計算器</a>
<a href="javascript:" >角度</a>
<a href="javascript:" >時間</a>
<a href="javascript:" >地圖</a>
<a href="javascript:" >help</a>
<div class="scop"></div><!--滾動的下劃線(區域)-->
</div>
<!--滾動內容(區域)-->
<div class="body_tab_content">
<div class="content item-on">
<!--Start calculator//區域1 -->
<div class="calculator">
<p class="title">Calculator平臺</p>
<div class="box">
<p>
<span class="b_title">算數計算器</span>
<span class="b_author">by jpt</span>
</p>
<input type="text" id="input" placeholder="0"/>
<ul>
<li οnclick="num(1)">1</li>
<li οnclick="num(2)">2</li>
<li οnclick="num(3)">3</li>
<li οnclick="del()" class="op">Del</li>
<li οnclick="clc()" class="op">C</li>
<li οnclick="num(4)">4</li>
<li οnclick="num(5)">5</li>
<li οnclick="num(6)">6</li>
<li οnclick="op('+')" class="op">+</li>
<li οnclick="op('-')" class="op">-</li>
<li οnclick="num(7)">7</li>
<li οnclick="num(8)">8</li>
<li οnclick="num(9)">9</li>
<li οnclick="op('*')" class="op">×</li>
<li οnclick="op('/')" class="op">÷</li>
<li οnclick="num(0)">0</li>
<li οnclick="double0()">00</li>
<li οnclick="dot()">.</li>
<li οnclick="percent()" class="op">%</li>
<li οnclick="eql()" class="eq">=</li>
<div class="clear"></div>
</ul>
</div>
</div>
<!--End calculator-->
</div>
<div class="content">
<!--start deg//區域2.-->
<div class="deg">
<p class="title">Deg角度、弧度及正弦值的轉換</p>
<ul id="deg_list">
<li><p class="b-info">
角 度:
<input type="text" class="b-textD" id="r1" size="9" /><!--常量-->
</p></li>
<li><p class="b-info">
弧 度:
<span class="show r"></span>
</p></li>
<li><p class="b-info">
正弦值:
<span class="show zL"></span>
</p></li>
<li><p class="b-info">
反正弦:
<span class="show fL"></span>
</p></li>
<li><p class="b-info">
角 度:
<span class="show d"></span>
</p></li>
<div class="b-login">
<p>
<a href="javascript:" class="b-btn" id="btn1" name="btn">計算</a>
</p>
<p>
<a href="javascript:" class="b-btn" id="btn2">重置</a>
</p>
</div>
</ul>
</div>
<!--end deg//區域2.-->
</div>
<div class="content" style="color:#2198EC">//區域3..</div>
<div class="content" style="color:#1DF11A">//區域4..</div>
<div class="content" style="color:#f00">
<!--start deg//區域5.-->
<div class="CK_document">
<h3>參考文獻</h3>
<div class="canKao">齒輪手冊(第2版)編委會. 北京:機械工業出版社，2000.8 </div>
</div>
</div>
</div>
</section>
</div>
</div>
<audio src="img/純音樂 -唯美動聽的鋼琴曲七首聯播.mp3" id="bgMusic" preload="auto" type="audio/mp3" autoplay loop></audio>
<div class="mPower">
<span id="play" title="點擊按鈕"></span>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/music-jpt-1.0.1.js"></script>
<script type="text/javascript">
/*js要完成的動作說明：*/
//屏蔽掉窗口原有的右擊顯示效果
document.οncοntextmenu= function(){
return false;
}
$(function(){
$(".top_tab_head a").mousemove(function(){
//獲取a標籤序列號
var index= $(this).index();
i= index;
$(".scop").css("transform","translateX("+i*120+"px)" );
//translate平移
})
$(".top_tab_head a").mousedown(function(){
//獲取a標籤序列號
var index= $(this).index();
i= index;
$(".top_tab_head a").eq(i).css("background","#FBFF00" ).siblings().css("background","");//找到對應的eq(i)
//添加滾動內容(區域)
$(".content").eq(i).addClass("item-on").siblings().removeClass("item-on");
})
})
</script>
<script type="text/javascript">
//獲取輸入框對象
var resultDom = document.getElementById("input");
//記錄點擊的數字和運算符
var result = "";
//小數點鎖
var xdot = true;
//運算符鎖
var xop = false;
//點擊添加數字
function num(number){
var str = resultDom.value;
str = (str=="0"?"":str);
//計入最終字符串
if(number == "0" && !result){}
else{result += number;}
str += number;
resultDom.value = str;
//打開運算符鎖
xop = true;
};
//點擊添加運算符
function op(option){
if(xop){
//記錄當前運算符
result += option;
//關閉運算符鎖
xop = false;
resultDom.value = " ";
}
//開鎖
xdot = true;
};
//刪除
function del(){
//
var result = resultDom.value;
var str
if(result.length == 1)
str=0;
else
str = result.substring(0,result.length-1);
resultDom.value = str;
existDot();
};
//雙0
function double0(){
var str = resultDom.value;
if(str!="0"){
str += "00";
resultDom.value = str;
}
else
return;
};
//小數點
function dot(){
var str = resultDom.value;
existDot();
if(xdot){
str = (str=="0"?"0":str+".");
result += ".";
xdot = false;
resultDom.value = str;
}
else{
return;
}
};
//等於
function eql(){
//alert(result);
resultDom.value = eval(result);
};
//清除
function clc(){
resultDom.value = "";
result = "";
xdot = true;
xop =true;
};
function existDot(){
var str = resultDom.value;
if(str.indexOf('.') == -1)
xdot = true;
else
xdot = false;
}
</script>
<script type="text/javascript">/*7音符音樂控制*/
//遍歷
var i;
//span點擊誰，獲取誰。
$(document).ready(function(){
$("#main_list li").hover(function(){
i = parseInt( $(this).index());
audioPlayer();
});
})
function audioPlayer(){
$("#audioPlayer").attr({"src":"img/"+ i +".mp3"});
$("#audioPlayer")[0].play();
$("#audioPlayer")[0].volume="0.9";//音量控制
}
</script>
<script type="text/javascript">/*角度轉換控制*/
/*保留小數點後5位
function flo(f){
return Math.floor(f*10000)/10000;//取整數
}*/
var r1,r,zL,fL,d;//角度:弧度:正弦值:反正弦:角度
//點擊"計算"按鈕
$("#btn1").click(function(){
r1= $("#r1").val();
//類型轉換
r1= parseFloat(r1);//角度
r= r1*Math.PI/180;//弧度
$(".r").html( r);
zL= Math.sin(r);//正弦值;//(數值)
$(".zL").html(zL);
if(r1<=90){
fL= Math.asin(zL); $(".fL").html( fL);//"反正弦"//(弧度)
d= fL*180/(Math.PI);$(".d").html(d);//角度
}else if(90<r1 && r1<=180){
fL= Math.asin(zL);//"反正弦"取的是小方向弧度
fL= Math.PI- fL;//大方向弧度
$(".fL").html( fL);
d= fL*180/Math.PI;
$(".d").html(d);//角度
}else if(180<r1 && r1<=270){
fL= Math.asin(zL);//"反正弦"取的是小方向弧度
fL= (Math.PI)-fL;
$(".fL").html( fL);
d= fL*180/Math.PI;
$(".d").html(d);//角度
}else if(270<r1 && r1<=360){
fL= Math.asin(zL);//小方向弧度
fL= 2*(Math.PI)+fL;//大方向弧度
$(".fL").html(fL);
d= fL*180/Math.PI;
$(".d").html(d);//alert("角度"+a )
}else{
alert("不在範圍");
$(".d").html("不在範圍");
}
});
//點擊"清除"按鈕
$("#btn2").click(function(){
$("#r1").val("");
$(".r").html("");
$(".zL").html("");
$(".fL").html("");
$(".d").html("");
//location.reload();頁面重新加載。
});
</script>
</body>
</html>