javascript基礎-實現簡單功能
靜態頁面javascript
（1）打印菱形，並將系統時間打印出來html
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script>
function show(){
document.write(" "+"*"+"<br>");
document.write(" "+"***"+"<br>");
document.write(" "+"*****"+"<br>");
document.write("*******"+"<br>");
document.write(" "+"*****"+"<br>");
document.write(" "+"***"+"<br>");
document.write(" "+"*"+"<br>");
var num=new Date();
document.write((num.getYear()+1900)+"-"+(num.getMonth()+1)+"-"+num.getDay()+" "+num.getHours()+":"+num.getMinutes()+":"+num.getSeconds());
}
show();
</script>
</head>
<body>
</body>
</html>
（2）打印乘法口訣表java
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script language="javascript" type="text/javascript">
function Demo(){
for(i=1;i<=9;i++){
for(j=1;j<=i;j++){
document.write(i+"*"+j+"="+i*j+" ");
}
document.write("<br>");
}
}
Demo();
</script>
</head>
<body>
</body>
</html>
動態頁面ide
（1）計算我的所得稅ui
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script>
function show(){
var txta=document.getElementById("txt1");
var txtb=document.getElementById("txt2");
var txtc=document.getElementById("txt3");
if(txta.value>txtb.value){
txtc.value=(txta.value-txtb.value)*0.1;
}else{
txtc.value=0;
}
}
function rewrite(){
var txta=document.getElementById("txt1").value="";
var txtb=document.getElementById("txt2").value="";
var txtc=document.getElementById("txt3").value="";
}
show();
</script>
</head>
<body>
<table width="419" border="1">
<tr>
<td colspan="2"><div align="center">我的所得稅計算器</div></td>
</tr>
<tr>
<td width="189"><div align="left">請輸入你的月收入：</div></td>
<td width="214"><input id="txt1" name="txt1" type="text" />
元</td>
</tr>
<tr>
<td><div align="left">請輸入所得稅起徵額：</div></td>
<td><input id="txt2" name="txt2" type="text" />
元</td>
</tr>
<tr>
<td>所得稅：</td>
<td><input id="txt3" name="txt3" type="text" />
元</td>
</tr>
<tr>
<td colspan="2">
<center>
<button name="btn1" value="計算" type="button" onclick="show()">計算
</button>
<button name="btn2" value="重填" type="button" onclick="rewrite()">重填
</button></td>
</center>
</tr>
</table>
</body>
</html>
（2）兩個數進行運算的簡單計算器this
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script language="javascript" type="text/javascript">
function calcadd(){
var num1=parseFloat(document.getElementById("txt1").value);
var num2=parseFloat(document.getElementById("txt2").value);
var num3=parseFloat(document.getElementById("txt3").value);
num3=num1+num2;
document.getElementById("txt3").value=num3;
}
function calcdecrease(){
var num1=parseFloat(document.getElementById("txt1").value);
var num2=parseFloat(document.getElementById("txt2").value);
var num3=parseFloat(document.getElementById("txt3").value);
num3=num1-num2;
document.getElementById("txt3").value=num3;
}
function calcmutiply(){
var num1=parseFloat(document.getElementById("txt1").value);
var num2=parseFloat(document.getElementById("txt2").value);
var num3=parseFloat(document.getElementById("txt3").value);
num3=num1*num2;
document.getElementById("txt3").value=num3;
}
function calcdivide(){
var num1=parseFloat(document.getElementById("txt1").value);
var num2=parseFloat(document.getElementById("txt2").value);
var num3=parseFloat(document.getElementById("txt3").value);
if(num2!=0){
num3=num1/num2;
}else{
alert("除數不能爲0");
}
document.getElementById("txt3").value=num3;
}
function calc(op){
if(op=="+"){
calcadd();
}else if(op=="-"){
calcdecrease();
}else if(op=="*"){
calcmutiply();
}else{
calcdivide();
}
}
calcadd();
calcdecreasee();
calcmutiply();
calcdivide();
</script>
</head>
<body>
<table width="300" border="1">
<tr>
<td colspan="3" width="300" height="30">計算器</td>
</tr>
<tr>
<td width="100" height="30">第一個數</td>
<td width="100" height="30">
<input name="input1" type="text" id="txt1"/></td>
<td width="100" height="90" rowspan="3">
<button value="+" type="button" width="100px" height="20px" onclick="calc(this.value)">+</button><br>
<button value="-" type="button" width="100px" height="20px" onclick="calc(this.value)">-</button><br>
<button value="*" type="button" width="100px" height="20px" onclick="calc(this.value)">*</button><br>
<button value="/" type="button" width="100px" height="20px" onclick="calc(this.value)">/</button><br>
</td>
</tr>
<tr>
<td>第二個數</td>
<td><input name="input2" type="text" id="txt2"/></td>
</tr>
<tr>
<td>計算結果</td>
<td><input name="input3" type="text" id="txt3"/></td>
</tr>
</table>
</body>
</html>
（3）document對象顏色控制spa
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script language="javascript" type="text/javascript">
function change(color){
if(color=="不準碰我"){
document.bgColor="#00FFFF";
}else if(color=="警告你別碰我"){
document.bgColor="red";
}else if(color=="給你點顏色看看"){
document.bgColor="#00FF00";
}
}
</script>
</head>
<body bgcolor="#FF6666">
<center>
<input type="button" value="不準碰我" onclick="change(this.value)" />
<input type="button" value="警告你別碰我" onclick="change(this.value)" />
<input type="button" value="給你點顏色看看" onclick="change(this.value)" />
</center>
</body>
</html>
相關文章
- 1. HTML+JavaScript簡單搜索功能實現
- 2. WebService簡單功能實現
- 3. ul 實現簡單菜單功能
- 4. javascript二叉樹基本功能實現
- 5. javascript實現簡單購物車功能（有圖）
- 6. JavaScript簡單實現全選和全不選功能
- 7. 利用JavaScript 實現Word簡單導出功能
- 8. 基於node.js實現簡單的單點登錄功能
- 9. Leangoo基礎功能簡介
- 10. 簡單的留言功能實現
- 更多相關文章...
- • 使用Redis和Lua的原子性實現搶紅包功能 - 紅包項目實戰
- • Kotlin 基礎語法 - Kotlin 教程
- • ☆基於Java Instrument的Agent實現
- • Spring Cloud 微服務實戰(三) - 服務註冊與發現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
