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

<!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. 【HANA系列】SAP HANA XS使用JavaScript编程详解

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA XS使用Jav ...

  2. java 根据ip获取地区信息(淘宝和新浪)

    package com.test; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStr ...

  3. java有关 String char 常见问题 编辑中

    1 输入输出有关 Scanner 的next()方法 返回值是String 所以尝试获得char时 应该用input.next().charAt[0] 2 空值 String 中null是指 对象引用 ...

  4. oracle有三种类型的异常错误： 预定义 ( Predefined )错误里面的常见错误

    oracle有三种类型的异常错误: 预定义 ( Predefined )错误, 非预定义 ( Predefined )错误, 用户定义(User_define) 错误 预定义 ( Predefined ...

  5. Mybatis 批量添加,批量更新

    此篇适合有一定的mybatis使用经验的人阅读. 一.批量更新 为了提升操作数据的效率,第一想到的是做批量操作,直接上批量更新代码: <update id="updateBatchMe ...

  6. Nginx+Django-Python+BPMN-JS的整合工作流实战项目

    前言 找一个好用的画图工具真心不容易,Activiti 工作流自带的 Web 版画图工具,外表挺华丽,其实使用起来各种拧巴:Eclipse 的 Activiti 画图插件,对于相对复杂的流程也是很不友 ...

  7. [原创]Java应用性能远程监控系统（C/S架构）

    Java应用性能远程监控系统(使用C/S架构) 适用于监控所有Java应用,具有堆内存监控.方法区监控.GC监控.类加载监控.类编译监控与线程监控,提供堆快照下载,线程快照下载.体验网址:http:/ ...

  8. vue兄弟之间传值 bus中央事件总线

    创建一个eventVue.js文件 import Vue from 'vue' export default new Vue 父 <template> <div> <di ...

  9. python open 函数的读写追加

  10. C++中endl和cout语句

    cout是什么?它是一个对象,它代表着计算器的显示器屏幕. 在c++里,信息的输出显示可以通过使用cout和左向‘流’操作符(<<)来完成 这个操作符表面了从一个值到控制台的数据流向! c ...