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

<!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. 【SpringBoot笔记】SpringBoot如何正确关闭应用

    关闭Spring Boot应用程序,我们可以通过OS命令kill -9 进程ID 实现将进程杀死.但是,有没有一种更好的方式,比如通过REST请求实现?Spring Boot Actoator提供了实 ...

  2. vcenter 忘记 administrator@vsphere.local 密码怎么办

    现有一个windows版本的vcenter5.5管理员密码丢失,我们可以使用vmware的工具vdcadmintool,在命令行进入到vdcadmintool所在的目录,然后执行下vdcadminto ...

  3. Anaconda在Windows上安装不上原因

    倒腾了一下午安装Anaconda,[所有程序]中只有一个Anaconda的目录,目录中只有一个anaconda prompt,最后发现是因为环境中原先就安装了Java环境,将之前安装的java环境卸载 ...

  4. Windows7安装 docker-compose的过程

    Docker在Windows7系统上安装成功后[详情见Windows7下docker的安装以及遇到的问题],要用到docker-compose相关命令,而docker-compose相关命令在dock ...

  5. SSM —— 注解解析

    @Component是所有受Spring 管理组件的通用形式,@Component注解可以放在类的头上,@Component不推荐使用. @Controller通过@Controller注解说明该类非 ...

  6. windowsserver 2019系统安装教程

    windowsserver2019和windowsserver2016一样也分两个版本标准版和数据中心版. 1.插入系统光盘 2.选择安装版本一般选择带桌面体验的,要不安装成功后没有桌面. 3.设置分 ...

  7. 记录未预编译文件“*.aspx”，因此不能请求该文件的几种处理办法

    对应Framework版本重新注册 2.0:C:\Windows\Microsoft.NET\Framework\v2.0.50727\aspnet_regiis.exe -i 4.0:C:\Wind ...

  8. console.table（）,在控制台以表格形式输出对象

    今天给大家安利一个属性,console.table(). 它的作用在控制台以表格的形式显示object.这样看起来是不是更方便了呢. var aaa = [ {index:0,name:"1 ...

  9. git 多用户多仓库配置

    ssh全称是Secure Shell,即安全Shell,是一种可以进行安全远程登录的协议,在Linux中以OpenSSH为代表,Windows中则有Putty作为实现.ssh的会话建立阶段类似TCP协 ...

  10. 系统运行缓慢，CPU 100%，以及Full GC次数过多问题的排查思路

    前言 处理过线上问题的同学基本上都会遇到系统突然运行缓慢,CPU 100%,以及Full GC次数过多的问题.当然,这些问题的最终导致的直观现象就是系统运行缓慢,并且有大量的报警. 本文主要针对系统运 ...