javascript小实例

来源：互联网发布：社交软件的英文单词编辑：程序博客网时间：2024/06/05 03:07

js实现的简易计算器

<!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=gb2312" />
<title>无标题文档</title>
</head>

<body>
<table width="142" border="1" align="center">
<caption>计算器</caption>
<tr>
    <th colspan="4" scope="col"><input type="text" id="result" name="result" width="200"/></th>
</tr>
<tr>
    <td width="30"><input type="button" value="9" onclick="num(9)" size="20"></td>
    <td width="28"><input type="button" value="8" onclick="num(8)"></td>
    <td width="28"><input type="button" value="7" onclick="num(7)"></td>
    <td width="28"><input type="button" value="+" onclick="num('+')"></td>
</tr>
<tr>
    <td><input type="button" value="6" onclick="num(6)"></td>
    <td><input type="button" value="5" onclick="num(5)"></td>
    <td><input type="button" value="4" onclick="num(4)"></td>
    <td><input type="button" value="-" onclick="num('-')"></td>
</tr>
<tr>
    <td><input type="button" value="3" onclick="num(3)"></td>
    <td><input type="button" value="2" onclick="num(2)"></td>
    <td><input type="button" value="1" onclick="num(1)"></td>
    <td><input type="button" value="*" onclick="num('*')"></td>
</tr>
<tr>
    <td><input type="button" value="0" onclick="num(0)"></td>
    <td><input type="button" value="." onclick="num('.')"></td>
    <td><input type="button" value="=" onclick="result()"></td>
    <td><input type="button" value="/" onclick="num('/')"></td>
</tr>
</table>

<script language="javascript" type="text/javascript">
//eval 计算表达式

//定义一个状态值
var clearvalue = false;

//1、构建计算器的样式

//2、接受用户点击的数值
function num(str){
   //获取原来的文本框的对象
   var objresult = document.getElementById("result");
   if(clearvalue){
       //清空上一次计算的文本框中所有内容
       document.getElementById("result").value="";
       clearvalue=false;
       //以下这条代码是必须有的，如果没有当计算完一次结果时，在进行下一次运算的第一个数值会不显示
       objresult.value+=str;

   }else{
       objresult.value+=str;
   }

}

//3、计算最终结果
function result(){
   var objresult = document.getElementById("result");
   objresult.value = objresult.value +"="+eval(objresult.value);
   clearvalue=true;
}

</script>
</body>
</html>

js实现的猜字游戏

<!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=gb2312" />
<title>无标题文档</title>
</head>

<body>
<script language="javascript" type="text/javascript">

//保存输入的次数
   var num2=1;
//输入的最大次数
   var num3=10;
//要猜的数字
   //var num1=23;
   var num1=(Math.floor(Math.random()*(1000+1)));
   alert(num1);

//接收客户提供的数字

function index(){
   var number = prompt("请输入一个数字");

   if(isNaN(number)){
       alert("请输入数字");
       index();
   }else{
       if(num2<num3){
           compare(number);
           }else{
               alert("对不起，10次机会到你没有机会了！");
           }
   }
}

   //比较输入的数值是否正确
function compare(num){
       if(num==num1){
           //猜对的时候,根据猜的次数进行提示
           alert(compareNum());
       }else if(num>num1){
           //猜大了
           document.write("对不起"+num+"大了，还剩"+(num3-num2)+"次机会"+"<br>");
           num2++;
           index();
       }else if(num<num1){
           //猜小了
           document.write("对不起"+num+"小了，还剩"+(num3-num2)+"次机会"+"<br>");
           num2++;
           index();
       }
   }

   //根据次数进行提示信息的输出
function compareNum(){

   switch(num2){
       case 0 :
       case 1 :
       case 2 :
       case 3 :
           return "牛人啊!";
       break;

       case 4 :
       case 5 :
       case 6 :
           return "还不错";
       break;

       case 7 :
       case 8 :
       case 9 :
       case 10 :
           return "还可以吧！";
       break;

       default :
           return "你没有机会了！";
       break;
   }
}

index();

</script>
</body>
</html>