JavaScript进阶练习及简单实例分析
更新时间：2016年06月03日 09:04:19 投稿：jingxian
下面小编就为大家带来一篇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进阶练习及简单实例分析就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了js多个异步请求 按顺序执行next实现解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
这篇文章主要介绍了JS中input表单隐藏域及其使用方法讲解，非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-02-02
这篇文章主要为大家详细介绍了原生JS实现简单放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
对于javascript操作iframe父级页面元素的方法，大家应该都非常清楚了，下面结合当前非常流行的jquery分享一下如何使用jquery查找和操作iframe父级页面元素的实现代码。2016-08-08
在js中我们有时会遇到计算,通过加减乘除处理某些业务,那么这时候如果不做任何处理,就会出现如下典型的精度丢失问题,下面这篇文章主要给大家介绍了关于JS中浮点数精度问题的分析与解决方法,需要的朋友可以参考下2022-04-04
这篇文章主要为大家详细介绍了openlayers4.6.5实现距离量测和面积量测，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
这篇文章主要为大家详细介绍了js实现一个页面多个倒计时的3种方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-02-02
这篇文章主要为大家详细介绍了原生js canvas实现简单贪吃蛇，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
这篇文章主要介绍了JS页面获取 session 值，作用域和闭包,结合具体实例形式分析了javascript与jsp交互获取session值、函数作用域及闭包相关操作技巧,需要的朋友可以参考下2019-10-10
这篇文章主要介绍了JavaScript随机点名器，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
最新评论