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

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

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

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

标签:
javascript进阶

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“JavaScript进阶练习及简单实例分析”

暂无“JavaScript进阶练习及简单实例分析”评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。