常用的js方法
关注
分享
扫一扫
梦的方向!
这个作者很懒，什么都没留下…
展开
-
jq截取字符串，限制字数长度
用jq操作，substr截取内容前多少位，主要用到each遍历了字符串。 <h2 class="h2_changdu">您好，今天是二零二一年二月二日，天气晴朗，祝您一天都有好心情</h2> <script src="./css/jquery-3.5.1.min.js"></script> <script> $(function () { $('.h2_changdu').each(fun原创 2021-02-02 19:17:36 · 446 阅读 · 0 评论 -
jq获取滚动距离，窗口的大小数值等
关于浏览器窗口的位置scrollTop获取，设置滚动条距离顶部的高度，resize拖动窗口大小，offset取到距离顶，左边的距离<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原创 2020-12-16 13:34:31 · 649 阅读 · 0 评论 -
echarts实现响应移动端
今天开发中遇到需要对echarts图表操作，根据页面尺寸大小改变图表的尺寸。实现方式很简单。代码示例：<head> <meta charset="UTF-8"> <title>event demo</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" hre原创 2020-12-15 17:43:58 · 2397 阅读 · 0 评论 -
发博客/回复消息（添加删除节点）
发博客/回复消息（添加删除节点）消息包括标题，内容，回复的时间。功能包括验证表单内容是否为空，发布后清空输入框<body> <div> <span>标题：</span> <input type="text" id="biaoti" style="border: 1px solid #ccc;"> </div> <div> <span>内容：</sp原创 2020-12-10 16:14:10 · 92 阅读 · 0 评论 -
jq随机加载背景图
刷新页面随机加载图片 <style> body{ padding:0; background-attachment: fixed; background-clip: border-box; background-color: #666666; back原创 2020-12-09 17:46:21 · 233 阅读 · 0 评论 -
无限滚动轮播
jq实现无限滚动的轮播图css：div { width: 600px; height: 161px; border: 1px solid #333; margin: 100px auto; overflow: hidden; } ul { list-style: none; width:原创 2020-11-29 20:34:22 · 224 阅读 · 0 评论 -
右下角弹窗广告
利用slideDown（）fadeIn（）fadeOut（）方法实现右下角弹窗效果<body> <div style="display: none; width: 300px; right: 0; bottom: 0; height: 200px; background-color: bisque; position: absolute;"> <span style="position: absolute;right: 10px;top: 10px;"原创 2020-11-25 22:29:46 · 211 阅读 · 0 评论 -
jQuery中stop方法停止动画排队效果
css：<style> .nav { margin: 0 auto; } .nav>li { list-style: none; float: left; width: 50px; } .nav>li a { border: 1px solid li原创 2020-11-24 23:41:54 · 231 阅读 · 0 评论 -
实现一个基本菜单栏（包含二级菜单）
利用jq实现菜单下滑上拉css：<style> ul>li { border: 1px solid #333; width: 200px; /* height: 50px; */ line-height: 50px; } ul>li span { padding-left: 15px;原创 2020-11-24 23:19:08 · 417 阅读 · 0 评论 -
实时获取输入框中剩余可输入字数方法
利用jq实现在文本框中限制用户输入字数，并给出提示（即监听用户输入的字数，更新在页面中）html： <h3> <center> 实时计算用户输入字数 </center> </h3> <div class='textarea-wrapper'> <div class='textarea-block'> <原创 2020-11-23 21:59:20 · 408 阅读 · 0 评论 -
获取本地时间输出年月日方法
通过js（原生）获取本地时间：html：<div style="width: 200px;height: 200px;border:1px solid #ccc"> </div> <button id="btn">获取本地时间</button>js：function getTime() { var t = new Date(); var y = t.getFullYear(); var原创 2020-11-23 21:41:04 · 338 阅读 · 0 评论 -
关于判断文本框内容是否为空的方法
利用jQuery判断输入框是否有内容思想：利用函数获取到按钮，在按钮点击时，对输入框进行判断长度。代码如下：<input type="text" id="input"> <button id="btn">发送</button> <script src="./js/jquery-2.1.4.min.js"></script> <script> $('#btn').click(function()原创 2020-11-22 22:27:57 · 1841 阅读 · 0 评论 -
通过select下拉框切换内容
点击select实现不同盒子显示与隐藏（常用js与jequery方法）通过select下拉菜单，实现切换盒子中的显示内容<select name="" id="" onclick="select_event(this.options[this.selectedIndex].value);"> <option value="mapselect" selected>地图</option> <option value="listsele原创 2020-11-15 19:02:32 · 2570 阅读 · 0 评论 -
通过点击按钮切换内容
标题 点击按钮切换显示不同盒子（常用js与jequery方法）记录第一次我的bolg <button id="btn1">图状</button> <button id="btn2">列表</button> <div class="div1" style="width: 50px;height: 50px;background-color: #CCC; display: block;"> 图原创 2020-11-15 18:52:10 · 986 阅读 · 0 评论