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

<!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. 利用Navicat高效率postgresql转mysql数据库

    本人很喜欢postgresql数据库,也一直认为postgresql比mysql要更好更强大. 可生态环境太差了,无奈,最近要把一个小站转成mysql数据库. 小站主要表数据110万,pg_dump备 ...

  2. 【新特性速递】FineUIPro/Mvc/Core 全新移动端访问体验（示例首页）！

    移动端支持 虽然 FineUIPro 早在 2016 年就已经完成对移动端的适配工作,并新增了 50 多个官网示例. 并且,我们也新增了一个移动端的首页 http://pro.fineui.com/m ...

  3. jackson把json转换成LIst

    把json数据转换成list ObjectMapper mapper = new ObjectMapper();  List<YeWuLuYou> readValue = mapper.r ...

  4. iic接口介绍

    最近遇到一个BUG,跟IIC通信有关,所以借这个机会总结一下IIC总线协议 1.引脚接口介绍 1.A0,A1,A2为24LC64的片选信号,IIC总线最多可以挂载8个IIC接口器件,通过对A0,A1, ...

  5. 关于Math.round()方法

    先上结论: 1.参数的小数点后第一位<5,运算结果为参数整数部分. 2.参数的小数点后第一位>5,运算结果为参数整数部分绝对值+1,符号(+ or -)不变. 3.参数的小数点后第一位=5 ...

  6. “Axure”介绍

    一． Axure RP简介: Axure RP 能帮助网站需求设计者,快捷而简便的创建基于网站构架图的带注释页面示意图.操作流程图.以及交互设计,并可自动生成用于演示的网页文件和规格文件,以提供演示与 ...

  7. javaweb项目环境搭建，jdk，tomcat，myeclipse，sqlserver安装 配置

    myeclipse是一个java的IDE,myeclipse中虽然内置了JDK和Tomacat服务器,但可以不使用,通过进行相应的配置,使用自行安装的JDK和Tomcat.安装Tomcat之前,一定要 ...

  8. Linux操作系统文件查找

    ++++++++++++++++++++++++++++++++++++++++++++++++标题:Linux操作系统的文件或命令查找内容:命令查找(which和whereis).文件查找(loca ...

  9. 微信内点击链接或扫描二维码可直接用外部浏览器打开H5链接的解决方案

    很多朋友问我怎么解决微信内点击链接或扫描二维码可以直接跳出微信在外部浏览器打开网页链接,其实这并不难,只要我们使用微信跳转浏览器接口实现跳转功能即可. 简单的处理方案 1. 用浏览器打开我们需要用到的 ...

  10. Python之多线程多进程

    (一)进程 1.定义 进程:就是一组资源的集合.一个程序就是一个进程. 线程是用来干活的,只有进程的话是没办法运行的,进程里其实是线程在具体干活的. import threading import t ...