<!-- 计算一个数的平方并显示出来 -->

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>计算平方</title>

    <script>

        function pf(){

            var input =    document.getElementById("num");

            console.log(input);

            //获取框内的值

            var n = input.value;

            console.log(n);

            //获取span

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

            //判断该值是否为数字

            if(isNaN(n)){

                //不是数字，需要重新输入

                span.innerHTML ="不是数字，请重新输入数字";

            }else{

                //是数字，计算平方

                span.innerHTML= n*n ;

            }

        }

    </script>

</head>

<body>

    <!--

    1 如何获取网页上的一个元素

        document.getElementById("id")

    2 如何读写文本框的值

        读：input.value

        写：input.value = "abc"

    3 如何读写span的内容

        读：span.innerHTML

        写：span.innerHTML = "abc"

     -->

    <input type="text" id ="num"/>

    <input type="button" value="平方" onclick="pf();"/>

    =<span id="result"> </span>

</body>

</html>

效果：文本输入77，点击平方返回数字

利用JS写一个计算平方的网页的更多相关文章

  1. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  2. 用原生js写一个"多动症"的简历

    用原生js写一个"多动症"的简历 预览地址源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现 ...

  3. 前端与编译原理——用JS写一个JS解释器

    说起编译原理,印象往往只停留在本科时那些枯燥的课程和晦涩的概念.作为前端开发者,编译原理似乎离我们很远,对它的理解很可能仅仅局限于"抽象语法树(AST)".但这仅仅是个开头而已.编 ...

  4. 学了C语言，如何利用cURL写一个程序验证某个网址的有效性？

    在<C程序设计伴侣>以及这几篇关于cURL的文章中,我们介绍了如何利用cURL写一个下载程序,从网络下载文件.可是当我们在用这个程序下载文件时,又遇到了新问题:如果这个网址是无效的,那么我 ...

  5. 学了C语言，如何利用CURL写一个下载程序？—用nmake编译CURL并安装

    在这一系列的前一篇文章学了C语言,如何为下载狂人写一个磁盘剩余容量监控程序?中,我们为下载狂人写了一个程序来监视磁盘的剩余容量,防止下载的东西撑爆了硬盘.可是,这两天,他又抱怨他的下载程序不好用,让我 ...

  6. JS写一个简单日历

    JS写一个日历,配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  7. 如何使用 js 写一个正常人看不懂的无聊代码

    如何使用 js 写一个正常人看不懂的无聊代码 代码质量, 代码可读性, 代码可维护性, clean code WAT js WTF https://www.destroyallsoftware.com ...

  8. 用H5和js写一个移动端自定义播放器

    前言 由于html5自带的播放器样式不怎么好看,大多数人都是自己写一个来满足业务需求.这一次的需求如下: 1.不要上一曲下一曲 2.有进度条和播放暂停按钮 3.有时间显示 demo实现功能 1.进度条 ...

  9. 使用JS写一个计算器

    先上效果图: 简单的加减乘除功能还是有的,所以我们就考虑怎么来实现这个功能. 根据预期效果,可以确定页面中的布局要用到table tr td. 所以先放上页面布局,table的边框宽度border,c ...

随机推荐

  1. jquery 同步加载

    jquery在前端展示时,如果需要从服务器获取信息然后在更新,需要设置同步加载. async属性设置为:false即可. $.ajax({ url : 'test.php', type : 'post ...

  2. SQL Server系统视图sys.master_files不能正确显示数据库脱机状态

    最近发现在SQL Server数据库(目前测试过SQL Server 2008, 2012,2014,2016各个版本)中,即使数据库处于脱机(OFFLINE)状态,但是sys.master_file ...

  3. Linux使用IDEA配置maven的web项目骨架archetype（模板） 自定义骨架

    说明:本文说的骨架就是 archetype,也可以理解为模板,总是就是指你创建项目时的基本配置. 前言:在使用IDEA创建maven的web项目时,一般都是直接使用提供的默认web项目,如图 然而创建 ...

  4. php类注释生成接口文档

    参考地址:https://github.com/itxq/api-doc-php

  5. 六 Struts 拦截器、OGNL表达式

    一．OGNL表达式1.概念:是表达式语言,专门用来访问对象取值用的.2.对比EL表达式使用场景: A．EL主要用在web的jsp页面取值 B．OGNL适用以下环境 1.java程序中 2.在页面使用( ...

  6. QMainWindow class

    Help on class QMainWindow in module PyQt5.QtWidgets: class QMainWindow(QWidget)  |  QMainWindow(pare ...

  7. 随心测试_软测基础_005 <测试人员工作内容>

    接上篇:清楚了_测试人员的工作职责范围,那每项 测试活动的具体工作内容有哪些呢? Q1:如何理解测试工程师的工作内容? A1:SX的观点:综合一体化 现如今互联网行业如何哪达,每一项IT职业的工作职责 ...

  8. 周末学习笔记——day03（模块，包）

    一,复习 ''' 装饰器 @wraper # fn = wraper(fn) def fn(): pass def wrap(arg): def outer(func): # 可以用arg def i ...

  9. HTTP的一些基本概念

    HTTP协议:HTTP(超文本传输协议)协议就是计算机在网络中进行通信所必须共同遵守的规则,它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器,我们目前使用的是HTTP/1.1 ...

  10. Putnam竞赛一道题及中科大自主招生试题的联系

    Putnam试题 For any positive integer n let denote the closest integer to $\sqrt{n}$,Evaluate $$\sum_{n= ...