javascript常用函数（1）

### JavaScript常用函数知识点 #### 1. 调整图片大小，不走形（FFIE兼容） 此函数通过JavaScript动态调整图片大小而不改变其原始比例，适用于不同分辨率和尺寸的显示需求。使用`onload`事件监听图片加载完成后再调整大小，确保获取到图片的实际尺寸，之后根据目标尺寸和图片原始比例计算最终的宽度和高度。 ```javascript function DrawImage(ImgD, FitWidth, FitHeight){ var image = new Image(); image.src = ImgD.src; if(image.width > 0 && image.height > 0){ if(image.width/image.height >= FitWidth/FitHeight){ if(image.width > FitWidth){ ImgD.width = FitWidth; ImgD.height = (image.height * FitWidth) / image.width; } else { ImgD.width = image.width; ImgD.height = image.height; } } else { if(image.height > FitHeight){ ImgD.height = FitHeight; ImgD.width = (image.width * FitHeight) / image.height; } else { ImgD.width = image.width; ImgD.height = image.height; } } } } ``` #### 2. 通过overflow：hidden进行剪切图片 这个函数通过设置图片的`overflow`属性为`hidden`来实现图片的裁剪显示。它同样需要在图片加载后获取尺寸，然后根据设定的目标尺寸进行裁剪。调整图片的`width`和`height`属性，并通过CSS的`margin-left`或`margin-top`属性进行适当的偏移，以确保图片在容器内居中显示。 ```javascript function clipImage(o, w, h){ var img = new Image(); img.src = o.src; if(img.width > 0 && img.height > 0){ if(img.width / img.height >= w / h){ if(img.width > w){ o.width = (img.width * h) / img.height; o.height = h; $(o).css("margin-left", "-"+((o.width-w)/2).toString()+"px"); } else { o.width = img.width; o.height = img.height; } } else { if(img.height > h){ o.height = (img.height * w) / img.width; o.width = w; $(o).css("margin-top", "-"+((o.height-h)/2).toString()+"px"); } else { o.width = img.width; o.height = img.height; } } } } ``` #### 3. 其他常用JavaScript函数 文档中提到的其他常用JavaScript函数包括但不限于： - 控制`textarea`区域文字数量 - 点击链接显示新窗口 - `input`框自动随内容变长 - 添加收藏夹功能 - 设置首页功能 - 使用Jquery和Ajax进行用户存在性判断 - 邮箱格式验证 - 用户名综合验证（长度、英文字段等） - 新闻滚动效果 - 只允许输入正整数或正数（用于购物车等场景） - 字符串转数字 - 判断文件格式并获得文件后缀 - 截取字符串 - 分割字符串 这些函数涵盖了前端开发中的常见需求，例如用户界面的交互、数据验证、DOM操作等，是前端开发者日常工作中的重要工具。通过这些函数的实现，开发者能够更好地控制页面的行为和样式，提升用户体验。 每个函数都具有一定的实用性和灵活性，为开发提供了便利。例如，通过`input`框自动变长功能，可以确保用户在输入大量文本时无需额外操作即可看到全部内容；而通过判断邮箱格式的函数，则能确保用户输入的邮箱地址符合规范，避免了后续的无效操作。 在实现这些功能时，除了使用原生JavaScript外，文档还提到了Jquery和Ajax，这是两个在JavaScript开发中广泛使用的库。Jquery提供了便捷的DOM操作方法和事件处理，Ajax则允许开发者异步请求服务器上的数据，大大增强了Web应用的交互性。 总结而言，文档介绍的JavaScript常用函数不仅覆盖了前端开发中经常遇到的场景，还展示了如何利用JavaScript强大的功能解决实际问题。对于初学者和有经验的开发者来说，这些函数都是非常宝贵的资源，值得深入学习和使用。