![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
html
UzumakiHan
这个作者很懒,什么都没留下…
展开
-
前端成语点击验证
首先先看看效果图吧需求分析:1.随机生成成语,成语的位置随机分布,并渲染在页面上。2.点击文字的有效区域,依次点击,并将点击的文字依次保存在数组中,然后和之前生成的成语进行比较,如果相等,则验证成功,否则验证失败,重新刷新页面。代码实现:首先html的布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" c原创 2020-06-03 11:21:16 · 777 阅读 · 0 评论 -
JavaScript评论敏感词过滤
有时候用户在输入框输入字数进行评论时,为了安全起见,一般在开发时,会过滤用户输入的一些敏感词。通过例子来实现过滤敏感词汇<textarea rows='7' cols='20'></textarea><br /> <input id='bt' type='button' value='查看效果'><br /> <textarea rows='7' cols='20'></textarea><br /原创 2020-06-11 17:33:23 · 1284 阅读 · 0 评论 -
前端性能优化-图片滚动分页懒加载
1.为什么要使用懒加载当我们进入到某个页面时,会有许多的图片,有些图片可能在下面,当我们点进页面但没有滑动全部展示时,其实下面的图片是没有作用的,这个时候如果说加载也相当于白加载,而且还降低了网页的加载速度,那懒加载就是只有滚动到可视区域时才加载当前的图片,也就是说不是一次性加载所有的图片,从而在一定程度减少了服务端的请求及带宽。2.使用懒加载的优点提高前端性能,图片在需要的时候才加载,减轻服务器的负担,提高页面的加载速度,能够减少带宽。3.懒加载的实现原理一张图片就是一个<img>标原创 2020-08-18 14:27:14 · 932 阅读 · 0 评论 -
原生JS实现数据动态渲染的竖向步骤条
实现以下效果:运用的知识点主要是html的伪元素。然后步骤条通过js动态渲染。最后一条数据的状态颜色状态为高亮状态。直接上代码html部分:<ul class="progress_box"> </ul>css部分: * { margin: 0; padding: 0; } ul { width: 360px; margin:100px auto; }原创 2020-06-18 10:15:32 · 2672 阅读 · 1 评论 -
rem+媒体查询实现web移动端适配
在css中引入以下代码@media (min-width: 240px) { html { font-size: 32px; }}@media (min-width: 320px) { html { font-size: 42.66667px; }}@media (min-width: 360px) { html { font-size: 48px; }}@media (min-width:原创 2020-06-08 17:32:24 · 342 阅读 · 5 评论 -
html关于列表的显示和隐藏
实现的效果是点击向下箭头,隐藏列表。点击向上箭头,显示列表主要用到的是jQuery的toggle方法,以及箭头的显示和隐藏的判断,在箭头上添加onclick方法具体实现的函数方法如下:var toggleFlag = false; function toggleHosptial(e){ if(!toggleFlag){ $('.arrow_icon').css({'background-image':'url(' + "../imag原创 2020-06-23 14:33:23 · 3262 阅读 · 0 评论 -
修改html中title属性的默认样式
默认的html的title属性的样式是这样的。通过编写JS函数来实现修改title属性的默认样式效果如下:HTML部分:<span class="mytooltip" title="个性样式个性样式个性样式个性样式个性样式" > 格式样式:</span>CSS部分: #mytitle { position: absolute; color: #ffffff; font-size: 14px;原创 2020-07-13 16:21:48 · 13447 阅读 · 7 评论 -
前端实现评分功能
实现的效果如下:具体代码如下:html部分:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edg原创 2020-06-04 16:58:42 · 2164 阅读 · 0 评论 -
CSS跨不同浏览器透明度opacity设置
.transparent { filter: alpha(opacity=50); /* internet explorer */ -khtml-opacity: 0.5; /* khtml, old safari */ -moz-opacity: 0.5; /* mozilla, netscape */ opacity: 0.5; /* fx, safari, opera */}原创 2020-06-18 13:20:07 · 181 阅读 · 0 评论 -
Html移动端红包雨功能页面实现
实习的效果如下:具体代码如下html部分:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge原创 2020-06-04 17:10:55 · 2424 阅读 · 1 评论 -
纯css实现loading加载动画
下面就来介绍简单的纯CSS动画加载<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">原创 2020-06-11 11:03:59 · 399 阅读 · 0 评论 -
grid布局+JS实现电脑虚拟键盘的操作
需求:1.当输入框光标聚焦时,电脑虚拟键盘弹出2.在输入框输入内容时,键盘跟着变化具体实现代码如下:Html部分:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e原创 2020-06-02 16:20:37 · 958 阅读 · 0 评论 -
前端成语点击验证的优化
对上一篇前端成语点击验证博客进行优化,主要优化事项有:1.点击时,加上序号显示点击的顺序2.当验证成功时,不能再点击文字。主要优化的代码如下JS部分://事件委托var verifyArr = [];var str = null;var timer = null;var a = 0;var idiomBox = document.querySelector('.idiom_box');clearTimeout(timer)idiomBox.onclick = function (e原创 2020-06-03 14:56:50 · 363 阅读 · 1 评论 -
checkbox实现开关按钮
效果:关闭时:打开时:html部分: <div class='search_checkbox'> <input type='checkbox' id='switch'> <label for='switch'></label> </div>css部分 .search_checkbox { margin: 0; padding: 0;原创 2020-06-24 09:09:21 · 1188 阅读 · 1 评论 -
grid布局+JS实现电脑虚拟键盘打字测试
这篇blog主要是结合前面两个知识点。实现的效果如下:具体代码如下:Html部分:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compati原创 2020-06-02 16:45:04 · 447 阅读 · 0 评论 -
css滚动条样式修改
/*滚动条样式*/*::-webkit-scrollbar { /*滚动条整体样式*/ width:4px; /*高宽分别对应横竖滚动条的尺寸*/ height:4px;}*::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius:5px; -webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.15); background:rgba(0,0,0,0.15);}*::-we.原创 2020-06-11 10:37:55 · 140 阅读 · 0 评论 -
用checkbox实现多列表的显示和隐藏
由于上一篇存在bug…所以就改用checkbox来实现多列表的显示和隐藏html代码: <header>覆盖医院名单</header> <ul class="cover_list"> <li class="cover_item"> <div class="provice_count" ><span>上海市(4)</span><input type="checkbox"原创 2020-06-23 16:23:22 · 1058 阅读 · 0 评论 -
jQuery实时统计输入框字数及限制的方法
项目中经常会用到文本输入框,而且需要限制输入的字数。下面分享一个 jQuery 实时统计输入框输入字数及限制输入字数的方法,代码如下:HTML:简单的写一下,能实现功能即可。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.原创 2020-06-11 10:19:38 · 616 阅读 · 0 评论 -
隐藏滚动条
::-webkit-scrollbar { width: 0; height: 0; color: transparent;}原创 2021-11-25 15:52:46 · 216 阅读 · 0 评论 -
css实现渐变边框
效果如下:代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> .原创 2021-11-11 11:17:22 · 311 阅读 · 0 评论 -
table中点击一行tr,使其高亮
// 获取tr let trs = $(".table-box").find("tr"); // 循环遍历 for (let i= 0; i< trs.length; i++){ // 设置点击事件 trs[i].onclick = function () { for (let j = 0; j < trs.length; j++){ trs[j].className = ""; .原创 2021-03-31 17:17:28 · 704 阅读 · 0 评论 -
iframe高度自适应的方法
js自适应高度,实际上就是设置iframe的高度,设置等于内嵌网页的高度,从而看不到滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。我们可以通过css来给它直接定义一个高度,同样可以实现上面的需求。当内容是未知或者是变化的时候。这个时候又有几种情况了。1、iframe内容未知,高度可预测// document.domain = "caibaojian.com";function setIframeHeight(iframe) { if (iframe) { var iframeWin翻译 2021-03-15 17:06:21 · 880 阅读 · 0 评论 -
html文本超出隐藏,展开和收起。
主要是实现当文本的长度超出一定的长度时,文本剩余的部分省略,出现展开,点击展开,文本全部显示,点击收起,文本回复省略显示。之前文本的超出多少行省略显示主要是用到以下的css样式来控制 text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;/*行数*/ line-clamp:原创 2020-07-17 13:46:17 · 7057 阅读 · 7 评论 -
JavaScript编写答题评分功能页面
效果图直接上代码HTML部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">原创 2020-05-27 17:24:58 · 3692 阅读 · 3 评论 -
前端浏览器兼容性问题和解决办法
各标签margin padding的问题(不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同)解决方案: css 里增加通配符 * { margin: 0; padding: 0; }块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性表单元素行高不一致解决方案:1.给表单元素添加float:left(左浮动);2.或者是vertic原创 2020-05-27 11:34:48 · 304 阅读 · 0 评论 -
前端开发遇到的问题总结
CSS一行文本超出隐藏 overflow: hidden; white-space: nowrap; text-overflow: ellipsis;CSS多行文本超出隐藏display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;html中使用base64格式图片<img src="data:image/png;base64,iVBORw0KGgoA原创 2020-05-21 11:07:53 · 539 阅读 · 0 评论 -
原生JS实现多选框的操作
多选时:全选时:反选时:html代码<div class="container"> <h3>请选择你最喜欢吃的水果(多选)</h3> <ul> <li><input type="checkbox">苹果</li> <li><input type="checkbox">雪梨</li> .原创 2020-05-18 13:27:21 · 1896 阅读 · 0 评论 -
手写前端分页效果
需求:实现分页请求表格数据,ajax暂时没写,只写了分页的功能。效果图:当页数是第一页的时候,首页和向前那个按钮处于禁止点击的状态各个按钮都正常的状态当页数是第一页的时候,首页和向前那个按钮处于禁止点击的状态各部分的代码如下:html部分:<!-- 分页 --> <div class="pageBox"> <div class="pageTotal">共<span>88</span>条</div> <原创 2020-05-18 11:00:40 · 646 阅读 · 0 评论 -
JS实现canvas简单小画板功能
Html部分:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...原创 2020-03-13 16:36:05 · 639 阅读 · 1 评论 -
原生js实现html手机端城市列表索引选择城市
html部分:<div class="cityPage"> <div class="cityContent"> <div class="inputBox"> <input type="text" placeholder="中文 / 拼音首字母" id="findcityInp"> </div> <di...原创 2020-03-12 09:53:42 · 1427 阅读 · 2 评论 -
htmlPC端省份城市二级联动
主要编程思想:根据省份索引与城市索引联动,JS用的是对象编程思想html代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s...原创 2020-03-05 16:27:12 · 1088 阅读 · 0 评论 -
bscroll.js实现html手机端城市列表
效果图直接上代码:html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <m...原创 2020-03-04 10:53:10 · 1695 阅读 · 0 评论 -
echarts实现每日地图情况更新
效果演示:代码:html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me...原创 2020-02-27 15:09:09 · 1035 阅读 · 0 评论 -
JS面向对象写法实现豆瓣电影搜索
一个项目的开发往往是多人协同开发,为了防止我们自己在开发时候写的代码会影响到其他人写的代码,这就需要我们独立命名一个对象变量,就在这个对象里面编写我们自己的代码。现在就用这种方法实现豆瓣电影搜索功能。效果,搜索前:输入搜索内容,搜索结果:代码详情:html:<!DOCTYPE html><html lang="en"><head> &...原创 2020-02-21 15:54:31 · 757 阅读 · 0 评论 -
html登录表单验证
html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...原创 2020-02-19 17:42:44 · 3031 阅读 · 0 评论 -
原生js实现html滑动图片拼图验证
html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...原创 2020-02-13 13:07:28 · 1835 阅读 · 0 评论 -
class实现html拼图验证
Html部分:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...原创 2020-02-12 16:19:00 · 1188 阅读 · 0 评论 -
瀑布流布局的实现
原理:1、瀑布流布局,要求进行布局的元素等宽,然后计算元素的宽与浏览器的宽度之比,得到需要布置的列数。2、创建一个数组,长度为列数,数组元素为每一列已布置元素的总高度。(一开始为0)。3、将未布置的元素,依次布置到高度最小的那一列,然后更新这一列的高度,就得到了瀑布流布局实现布局<body> <div id="content"> <div id...原创 2020-01-21 09:17:28 · 298 阅读 · 0 评论 -
JS中的位置和宽度
1、clientX,clientYclientX:当鼠标事件发生时(不管是onclick,还是omousemove,onmouseover等),鼠标相对于浏览器(这里说的是浏览器的有效区域)x轴的位置;clientY:当鼠标事件发生时,鼠标相对于浏览器(这里说的是浏览器的有效区域)y轴的位置;2、offsetX,offsetY(pageX,pageY意思一样)offsetX:当鼠标事件发生...原创 2020-01-14 15:00:30 · 192 阅读 · 0 评论 -
html实现滑块拖动验证
html代码部分:<div id="wrapper"> <div id="drop_box"> <span class="iconfont icon-jiantouyou" id="spanBox"></span> </div> <p id="text">拖动滑块验证</p> &l...原创 2020-01-14 13:37:55 · 3003 阅读 · 0 评论