javascript案例

最新推荐文章于 2024-09-02 08:59:04 发布
最新推荐文章于 2024-09-02 08:59:04 发布
阅读量452 收藏 1
点赞数
文章标签： javascript button input function fun html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/php398893944/article/details/7277269
版权
  

1、直接可以写在HTML文件中

    1)Javascript书写的代码和位置，一般情况下代码写在head中间

    2)直接写在body标签中

    3)可以写在<HTML>标记之外

 

  2、可以使用外部文件引入的方式

  

  3、弱类型语法

 

  4、+运算符

                  可以根据运算符的表达式自动处理

    1)如果表达式有任意一个字符串,"+"则变成 "字符串";

2)如果说两个表达式都是数字,"+"则变成表达式;

 

  案例：

 

①    加减乘除

   <body>

    <script type="text/javascript">

   function checkNum(num){           

              return isNaN(num);

}

function fun1(){ 

a=parseInt(document.getElementById("num1").value);

b=parseInt(document.getElementById("num2").value);

 if(checkNum(a)||checkNum(b)){

       alert("输入错了");

}else{

document.getElementById("num3").value=a+b;      

}

}

 

function fun2(){   

       a=document.getElementById("num1").value;

       b=document.getElementById("num2").value; 

       if(checkNum(a)||checkNum(b)){

              alert("输入错了");

       }else{

       document.getElementById("num3").value=a-b;

       }

       }

function fun3(){

    

       a=document.getElementById("num1").value;

       b=document.getElementById("num2").value;

 

       if(checkNum(a)||checkNum(b)){

              alert("输入错了");

       }else{

       document.getElementById("num3").value=a*b;      

       }

       }

 

function fun4(){

  

       a=document.getElementById("num1").value;

       b=document.getElementById("num2").value;

 

       if(checkNum(a)||checkNum(b)){

              alert("输入错了");

       }else{

       document.getElementById("num3").value=a/b;

       }

       }

 

</script>

 

 

  <form method="post">

  num1:<input type="text" name="num1"><br>

  num2:<input type="text" name="num2"><br>

      结果:<input type="text" name="num3"><br>

  <input type="button" name="jia" value="+" οnclick="fun1();">

  <input type="button" name="jian" value="-" οnclick="fun2();">

  <input type="button" name="cheng" value="*" οnclick="fun3();">

  <input type="button" name="chu" value="÷" οnclick="fun4();">

 

  </form>

  </body>

 

 

②    简易计算器：

<script type="text/javascript">

 

 var clear=false;

   function jisuan(num){ 

        var number=document.getElementById("result");

         

        if(clear){  

               number.value="";

               clear=false;

               }  

         number.value+=num;

         }

        

  function result(){

       

         var number=document.getElementById("result");

         number.value=number.value+"="+eval(number.value);

          clear=true;

        }  

 

</script>

 

<body>

<table width="228" border="1" align="center">

<caption>简易计算器</caption>

  <tr>

    <td colspan="4"><input type="text" size="36" name="result"></td>

  </tr>

  <tr>

    <td width="51"><input type="button" value="    1    " size="20" οnclick="jisuan(1);"></td>

    <td width="51"><input type="button" value="    2    " size="20" οnclick="jisuan(2);" /></td>

    <td width="51"><input type="button" value="    3    " size="20" οnclick="jisuan(3);" /></td>

    <td width="51"><input type="button" value="    +    " size="20" οnclick="jisuan('+');" /></td>

  </tr>

  <tr>

    <td><input type="button" value="    4    " size="20" οnclick="jisuan(4);" /></td>

    <td><input type="button" value="    5    " size="20" οnclick="jisuan(5);" /></td>

    <td><input type="button" value="    6    " size="20" οnclick="jisuan(6);" /></td>

    <td><input type="button" value="    -    " size="20" οnclick="jisuan('-');" /></td>

  </tr>

  <tr>

    <td><input type="button" value="    7    " size="20" οnclick="jisuan(7);" /></td>

    <td><input type="button" value="    8    " size="20" οnclick="jisuan(8);" /></td>

    <td><input type="button" value="    9    " size="20" οnclick="jisuan(9);" /></td>

    <td><input type="button" value="    *    " size="20" οnclick="jisuan('*');" /></td>

  </tr>

  <tr>

    <td><input type="button" value="    0    " size="20" οnclick="jisuan(0);" /></td>

    <td><input type="button" value="    .    " size="20" οnclick="jisuan('.');" /></td>

    <td><input type="button" value="    =    " size="20" οnclick="result();" /></td>

    <td><input type="button" value="    /    " size="20" οnclick="jisuan('/');" /></td>

  </tr>

</table>

 

</body>

 

③    比较大小

   <body>

 

   <form method="post">

 

  <input type="hidden" name="rand" id="rand" value="<?php echo rand(50,800);?>">

 

 

  </form>

 

 

  <script type="text/javascript">

 

 

   var b=document.getElementById("rand").value;

  

 

  for(var i=9;i>-1;i--){

 

 

  var a=prompt("请输入数字","");

 

  if(b<a){

         document.write("您输入的数字"+a+"大了!您还有"+i+"次机会<br>");

         }

   else if(b>a){

          document.write("您输入的数字"+a+"小了!您还有"+i+"次机会<br>");          

          }

       else{

         document.write("您输入的数字"+a+"恭喜您答对了....!<br>");

          break;

          }  

         

  }

 

</script>

 

 

</body>

php398893944
关注
JavaScript案例-JavaScript
02-16
在描述中提到的"JavaScript案例"可能涵盖了多个实际应用场景。这些案例可能包括： 1. **DOM操作**：通过JavaScript，我们可以访问和修改文档对象模型（DOM），这使得我们能够动态地改变HTML元素的属性、内容或样式...
20个JavaScript开发案列（一）
终成大师的博客
02-17 5173
20个JavaScript开发案列（一）
JavaScript基础——JS简单案例
m0_68794863的博客
12-04 5481
JS基础案例
javascript网页设计案例
最新发布
破损的天堂鸟博客
09-02 942
JavaScript在网页设计中扮演着至关重要的角色，它不仅能够增强网页的交互性，还能为用户提供更加丰富的体验。以下是一些典型的JavaScript网页设计案例，每个案例都将从功能描述、实现思路、代码示例等方面进行阐述。
20个JavaScript开发案列（二）
终成大师的博客
02-19 2106
20个JavaScript开发案列(二)
javaScript常用案例
张张张张张高高的博客
09-06 9259
前端页面开发之javaScript常用案例
JavaScript 各种小案例
老段的CSDN的博客
07-30 3356
JavaScript 6个常用的小案例
JavaScript案例
12-04
在本“JavaScript案例”压缩包中，包含了一系列的JS代码示例，这些案例可以帮助我们深入理解和掌握JavaScript的核心概念、语法结构以及实际应用技巧。 1. **基础语法** JavaScript的基础包括变量定义（var、let、...
JavaScript 案例教程源码
05-11
这份"JavaScript案例教程源码"提供了丰富的学习资源，让你能够直接运行代码并观察其运行效果，从而深入理解JavaScript的核心概念。 首先，我们来探索JavaScript的基础知识。JavaScript是一种解释型、弱类型、基于...
JavaScript案例-js表单验证
02-16
在这个"JavaScript案例-js表单验证"中，提供的"03_validation"文件很可能包含了上述提到的验证示例代码。你可以深入研究这些代码，了解具体的实现方式，并尝试根据自己的需求进行修改和扩展。通过实践，你将更好地...
JavaScript案例大全
03-19
作为"JavaScript案例大全"，我们将探讨这些示例中涉及的关键知识点。 1. **全选反选复选框.html**：这个案例涉及到JavaScript处理HTML中的复选框（checkbox）事件。通过JavaScript，我们可以监听复选框的状态改变，...
JavaScript 经典实例盘点（收藏向）
Silvia
07-03 1万+
快捷目录一、跨 浏 览 器 事 件跨浏览器添加事件跨浏览器移除事件跨浏览器阻止默认行为跨浏览器获取目标对象跨浏览器获取滚动条位置跨浏览器获取可视窗口大小二、js 对 象 冒 充三、js异步加载和同步加载四、js获取屏幕坐标五、PageX和clientX六、js 拖 拽 效 果七、js获取图片原始大小尺寸八、js循环遍历数组九、阻止表单重复提交十、字 符 串 部 分十一、Number和Math部分十二、数 组 部 分十三、Date日期时间部分十四、正 则 部 分十五、js判断传入参数是否为质数十六、js判断字
JavaScript的10个基础小案例
m0_56713342的博客
08-23 517
1、9x9乘法表。
JavaScript 基础--- (经典案例)
热门推荐
姜皓的博客
08-01 2万+
案例一：全选练习      ** 使用复选框上面一个属性判断是否选中         - checked属性         - checked=true：选中         - checked=false：不选中     * 创建一个页面         ** 复选框和按钮             - 四个复选框表示爱好             - 还有一个复选框操作 全选和选不选，也有一...
JavaScript基础知识第五章---数组（含大量案例分析）
2401_84435152的博客
04-26 908
要求：请将 [‘关羽’, ‘张飞’, ‘马超’, ‘赵云’, ‘黄忠’, ‘刘备’, ‘姜维’];数组里的元素依次打印到控制台；代码演示如下：// 数组长度 数组名.lengthvar arr = [‘关羽’, ‘张飞’, ‘马超’, ‘赵云’, ‘黄忠’, ‘刘备’, ‘姜维’];i++) {
javascript的61个实例
Just Do It
11-19 1645
今天看了看博客，正好学习到js这一块，就把这篇
JavaScript闭包之经典案例
qq_21987433的博客
10-30 1509
①函数作为返回值 【1】例子1 function a() { var name='dov'; return function(){ return name; } } var b=a(); console.log(b());//dov 在这段代码中，a()中的返回值是一个匿名函数，这个函数在a()作用域内部，所以它可以获取a()作用域下变量name的值，将这个值作为返回值赋给全局作用域下的变量b,实现了在全局变量下获取到局部变量中的变量的值
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值