JavaScript进阶练习及简单实例分析

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

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

实现代码：

<!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进阶练习及简单实例分析就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JavaScript中split与join函数的进阶使用技巧

    Javascript拥有两个相当强大而且受开发者喜爱的函数:split 与join 俩对立的函数.这俩函数能让string与array两种类型互换,也就是数组能被序列化为字符串,反之亦然.我们能把这俩函数发挥得淋漓尽致.下面就来探索里面的一些有趣的应用, 首先介绍一下这两个函数: String.prototype.split(separator, limit) separator把字符串分割为数组,可选参数limit定义了生成数组的最大length. "85@@86@@53".spli

  • JavaScript进阶教程(第三课第二部分)第1/2页

    要使定时器循环工作你需要写一个函数实现循环调用.这里是一个例子: var the_count = 0;    var the_timeout;    function doTimer()    {        window.document.timer_form.the_text.value = the_count;        the_count += 2;        the_timeout = setTimeout("doTimer();", 2000);    } 这里用

  • JavaScript进阶教程(第二课续)第1/2页

    现在你已经掌握了先进的字符串处理和相关数组概念,该是我们打开神奇的cookie魔瓶的时候了．cookie是记录访问你的站点的人的信息,它其实驻留在用户的硬盘上,即使用户已经离开你的站点,cookie在用户的硬盘上仍然存在,如果该用户再次返回你的站点,则该cookie就会被一起发回到你的服务器中,便于你统计和处理重复到访者的信息． 下面我们看一看一个cookie应用的典型例子,我们在一个网页中设置cookie,然后通过别的网页读取它．在使用该例子的时候,想想如果没有cookie,你如何做到这一点．

  • JavaScript进阶教程(第三课)第1/2页

    事件的定时以及浏览器的识别 随着我们所掌握的JavaScript日渐丰富,我们可以编制出越来越复杂的应用程序.上次的课程中我们学习了如何利用JavaScripts编写Cookies.今天我们将学习如何加入定时功能.给时间定时的能力在浏览器中非常有用,而在动态HTML应用中发挥更大的功用. 你可能会注意到动态HTML可以在页面中移动不同的内容.在JavaScript中将某个物体在屏幕中移动需要用到一个循环(loop),用循环的功能使物体随着时间推移移动.但是你如何告诉JavaScript将某个物体

  • JavaScript进阶教程(第四课第一部分)

    在以前的课程中,我们学习了对文本和字符串的各种操作,今天我们专注于两种不同的数据类型:图象和对象.学完这一课,你将知道如何: 使用JavaScript来加速图象交换. 创建你自己的对象来使脚本易于理解. 使用关联数组来快速存取脚本中的每一个对象. 使用JavaScript做图象变换的一个主要问题是,它直到需要换图时才去告诉浏览器下载那张图象.如果你有一张大的图象,想在鼠标滑过一副图象时调出来,浏览器得临时下载这张图,这可能会花一定时间从而使滑动效果大打折扣. 如果你的连接速度较慢,而你要调入的是

  • JavaScript进阶教程(第一课)第1/3页

    欢迎您继续学习Javascript进阶教程.在此之前我们已经学习了Javascript初级教程.在这一阶段的学习中我们将继续学习在上次的教程中还没有来得及谈及的问题.我还将向你们展示Javascript的许多神奇功能,使你能够制作真正对多媒体应用程序.     以下是我们将涉及的内容:     给变量赋值     If-then语句     For和while循环     编写你自己的函数     打开及控制窗口     读写HTML 表单     应用数组     控制图片转换     如果这

  • JavaScript DOM进阶方法

    DOM自身存在很多类型,在上一章中有介绍,比如Element类型:表示的是元素节点;再比如Text类型;表示的是文本节点; 一 DOM类型 类型名                        说明 Node                 表示所有类型值的统一接口,IE不支持; Document             表示文档类型; Element              表示元素节点类型; Text                 表示文本节点类型; Comment           

  • JavaScript进阶教程(第二课)第1/3页

    今天我们将学习一项很有用而且很有趣的内容:cookies - 这是用来记录访问过你的网页的人的信息.利用Cookies你能记录访问者的姓名,并且在该访问者再次访问你的站点时向他发出热情的欢迎信息.你还可以利用cookie记忆用户端的特点 - 如果访问者的所接入的网线的速度慢,cookie可以自动告诉你在给其发送网页的时候只发送尽可能少的图片内容. 只要你在合理的范围内使用cookies(不要用它探询用户的个人隐私),cookies还是相当实用得.所以我要向你们介绍cookies的工作原理,但是在

  • JavaScript进阶练习及简单实例分析

    JavaScript进阶练习及简单实例分析

    当用户点击"统计"按钮时,在窗口中弹出文本框中出现次数最多的字符并显示其出现的次数 点击统计按钮时效果如图所示: 实现代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo

  • javascript 网页进度条简单实例

    javascript 网页进度条简单实例 最近学习新的知识,遇到一个小功能网页进度条,发现一篇文章还是不错的,这里记录下,也许能帮助到大家, 实例代码: <!DOCTYPE html> <html> <head> <style> #box {float:left;width:100%;height:18px;border:1px solid;} #bar {float:left;width:100%;height:18px;border:0px;backgr

  • PHP常用文件操作函数和简单实例分析

    PHP常用文件操作函数和简单实例分析

    PHP最常用的文件操作就是读取和写入了,今天就主要讲解一下读取和写入函数,并且做一个页面访问的计数功能,来记录一个页面的访问量. fopen():PHP中没有文件创建函数,创建和打开文件都用fopen()函数,函数的形式为:resource fopen( string filename, string mode ) 参数filename为打开或创建并打开的文件名,参数mode为打开的模式,具体模式如下: fread():PHP中可用于读取文件,函数的形式为:string fread( resou

  • JavaScript操作选择对象的简单实例

    JavaScript操作选择对象的简单实例 //替换选中文本内容,参数text为要替换的内容 function SetSelectionText(text) { //非IE浏览器 if (window.getSelection) { var sel = window.getSelection(); alert(sel.rangeCount); //选区个数, 通常为 1 . sel.deleteFromDocument(); //清除选择的内容 var r = sel.getRangeAt(0)

  • javascript中sort()的用法实例分析

    本文实例分析了javascript中sort()的用法.分享给大家供大家参考.具体分析如下: 函数的语法: arrayObject.sort(sortby) you think this is not the right way but you love it 这里还用到了split函数,目的是去到一个字符串的数组,比较常用.然后通过数组的排序函数sort()对数组内的值进行排序,得到新的数组,然后通过循环输出数组的内容就得到了排序后的字符串. 在例子中,默认情况下,它会按照ascii码来进行排

  • javascript原型链继承用法实例分析

    本文实例分析了javascript原型链继承的用法.分享给大家供大家参考.具体分析如下: 复制代码 代码如下: function Shape(){   this.name = 'shape';   this.toString = function(){    return this.name;   }  }    function TwoDShape(){   this.name = '2D shape';  }  function Triangle(side,height){   this.n

  • JavaScript文档碎片操作实例分析

    本文实例分析了JavaScript文档碎片操作方法.分享给大家供大家参考,具体如下: 使用文档碎片在某些情况下可以提高页面效率. javascript操作dom是一个很耗性能的过程,在某些情况下,不得不进行dom循环操作,我们每次对dom的操作都会触发"重排",这严重影响到能耗,一般通常采取的做法是尽可能的减少dom操作来减少"重排". 面对循环操作dom的过程,我们选择使用文档碎片(creatDocumentFragment),将需要添加到dom中的内容一次性添加

  • JavaScript中this的用法实例分析

    本文实例分析了JavaScript中this的用法.分享给大家供大家参考,具体如下: 一."this"公理 this关键字永远都指向函数(方法)的所有者: function fn1(){ this }; fn1(); //this=>window oDiv.onclick=fn1; //this=>oDiv oDiv.onclick=function(){ this //this=>oDiv fn1(); //this=>window } <div onc

  • javascript面向对象之定义成员方法实例分析

    本文实例分析了javascript面向对象之定义成员方法.分享给大家供大家参考.具体如下: javascript面向对象,定义成员方法如下所示: 复制代码 代码如下: <script language="javascript" type="text/javascript"> function Person(name,age){  this.name = name;  this.age = age;  this.show = function(){   d

  • javascript中键盘事件用法实例分析

    本文实例分析了javascript中键盘事件用法.分享给大家供大家参考.具体如下: 键盘事件包含onkeydown.onkeypress和onkeyup这三个事件 事件初始化 function keyDown(){} document.onkeydown = keyDown; //论按下键盘上的哪个键,都将调用KeyDown()函数. DOM标准下 function keyDown(e) { var keycode = e.which; //取得对应的键值(数字) var realkey = S

随机推荐