题目：编写如下页面

当用户点击”统计“按钮时，在窗口中弹出文本框中出现次数最多的字符并显示其出现的次数

点击统计按钮时效果如图所示：

实现代码：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript">

        window.onload

= function () { //获取表单对象 var form = document.getElementById("myform"); //给“统计”按钮注册单击事件 form.btn.onclick = function () { //获取文本框中的值 var txt = form.name.value; //定义一个空的js对象用于保存文本空中的所有字符及出现的次数 var json = {}; //遍历文本框中的值也就是txt变量中保存的字符串 for (var i = 0; i < txt.length; i++) { //提取txt字符串中下标为i的子符并判断json对象是否未定义属性名为给字符符的属性 if (!json[txt.charAt(i)]) { //没有定义则定义该属性（表示在文本框中出现的字符）并赋值为1，代表该属性对应的字符在文本框中出现的次数 json[txt.charAt(i)] = 1; } else { //已经定义则将该属性的值加1，也就是将代表该属性对应的字符在文本框中出现的次数加1 json[txt.charAt(i)]++; } } //定义两个变量 var maxnum = 0;//代表文本框中出现次数最多的字符出现的次数默认为0 var char = "";//代表文本框中出现次数最多的字符默认为空 //遍历json对象的属性值 for (var i in json ) { if (json[i]>maxnum) { //如果json该属性的值大于maxnum（也就是说该属性对应的字符再问本框中出现的次数比之前的所有字符都要打）则将其赋值给maxnum并将其属性名赋值给char maxnum = json[i]; char = i; } } alert("文本框中出现最多的字符是：" + char + " 出现的次数是：" + maxnum); } }; </script> </head> <body> <form id="myform"> <input type="text" name="name" value="123" /> <input type="button" name="btn" value="统计"/> </form> </body> </html>

本题的主要知识点

js对象属性可以后期添加的特点、对象属性的遍历等js对象的综合运用。js相关的知识可以参考我之前的博客

javascript对象的相关操作

JavaScript进阶练习的更多相关文章

  1. ＃笔记＃JavaScript进阶篇一

    #JavaScript进阶篇 http://www.imooc.com/learn/10 #认识DOM #window对象 浏览器窗口可视区域监测—— 在不同浏览器(PC)都实用的 JavaScrip ...

  2. 4、JavaScript进阶篇①——基础语法

    一.认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面 ...

  3. JavaScript 进阶（一）JS的"多线程"

    这个系列的文章名为“JavaScript 进阶”,内容涉及JS中容易忽略但是很有用的,偏JS底层的,以及复杂项目中的JS的实践.主要来源于我几年的开发过程中遇到的问题.小弟第一次写博客,写的不好的地方 ...

  4. JavaScript进阶（一）

     OK接下来,我们再次梳理一遍js并且提高一个等级. 众所周知,web前端开发者需要了解html和css,会只用html和css创建一个漂亮的页 面,但是这肯定是不够的,因为它只是一个静态的页面,我们 ...

  5. Javascript 进阶 面向对象编程 继承的一个样例

    Javascript的难点就是面向对象编程,上一篇介绍了Javascript的两种继承方式:Javascript 进阶 继承.这篇使用一个样例来展示js怎样面向对象编程.以及怎样基于类实现继承. 1. ...

  6. JavaScript进阶(九)JS实现本地文件上传至阿里云服务器

    JS实现本地文件上传至阿里云服务器 前言 在前面的博客< JavaScript进阶(八)JS实现图片预览并导入服务器功能>(点击查看详情)中,实现了JS将本地图片文件预览并上传至阿里云服务 ...

  7. JavaScript进阶(十一)JsJava2.0版本

    JavaScript进阶(十一)JsJava2.0版本 2007年9月11日,JsJava团队发布了JsJava2.0版本,该版本不仅增加了许多新的类库,而且参照J2SE1.4,大量使用了类的继承和实 ...

  8. Javascript 进阶 面向对象编程 继承的一个例子

    Javascript的难点就是面向对象编程,上一篇介绍了Javascript的两种继承方式:Javascript 进阶 继承,这篇使用一个例子来展示js如何面向对象编程,以及如何基于类实现继承. 1. ...

  9. javascript进阶笔记(2)

    js是一门函数式语言,因为js的强大威力依赖于是否将其作为函数式语言进行使用.在js中,我们通常要大量使用函数式编程风格.函数式编程专注于:少而精.通常无副作用.将函数作为程序代码的基础构件块. 在函 ...

  10. JavaScript进阶系列07,鼠标事件

    鼠标事件有Keydown, Keyup, Keypress,但Keypress与Keydown和Keyup不同,如果按ctrl, shift, caps lock......等修饰键,不会触发Keyp ...

随机推荐

  1. HDU4920 矩阵乘法

    嗯嗯 就算是水题吧. (缩完行就15行) 题意:两个n*n的矩阵相乘(n<=800),结果对3取模 思路:先对3取模,所以两个矩阵里面会出现很多0,所以可以先枚举一个矩阵,只有当该位置不是0的时 ...

  2. Spark SQL 编程API入门系列之SparkSQL数据源

    不多说,直接上干货! SparkSQL数据源:从各种数据源创建DataFrame 因为 spark sql,dataframe,datasets 都是共用 spark sql 这个库的,三者共享同样的 ...

  3. jquery分页点击后页面置顶

    前台: <a href="#" ><span id='top'></span></a> js中: 放在分页事件后,数据加载完成后 j ...

  4. Android WebView回退

    在使用webView时,会出现点击按钮让网页页面回到上一个页面的需求,这时可以使用goBack方法. 但是有的安卓用户会习惯点击手机自带的返回按钮,这时会直接关闭当前的activity,而不是网页页面 ...

  5. solarwinds之配置系统管理（System manager）

    配置windows的 1.  打开System Manager   2.  点击new新加一个接口   3.  选择要监控的资源   4.  确认好自己要监控的资源后如下   5.  这里以监控内存使 ...

  6. ZBrush中Mrgb、Rgb和M的使用

    ZBrush®软件工具架中所有的命令选项都是我们平时较为常用的,位于工具架的中间位置,有一个Mrgb.Rgb和M选项它们所表示的是材质及颜色,那么,在Zbrush中只要选择相应的选项,就可以同时绘制材 ...

  7. 路飞学城Python-Day38(第四模块思维导图)

  8. ubuntu18.04crontab定时任务不执行

    环境介绍: 本人使用python写了一个自动化提交巡检的脚本放在服务器上,使用crontab去执行脚本的时候动作并没有执行,查看crontab日志时也不存在这个日志文件.如何如排查呢? 解决方案: 步 ...

  9. Linux red hat 核心版下安装Nginx

    不要安装核心版的Linux,不要安装核心版的Linux,不要安装核心版的Linux重要的事情要说3遍.心血来潮突然想在Linux下安装Nginx,但是在安装的国程中发现了很多问题.nginx 基本安装 ...

  10. pytorch 6 batch_train 批训练

    import torch import torch.utils.data as Data torch.manual_seed(1) # reproducible # BATCH_SIZE = 5 BA ...