![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端
文章平均质量分 82
方便开发
WGS.
道阻且长,与君共勉:你若对得起时间,时间便会对得起你。
展开
-
jquery简洁过渡输入框
<div id="userName" class="input" aria-placeholder="请输入"><input type="text"></div>.input input { /* height:30px; float:left; */ outline:none; width:120px; border:none; background:none; border-bottom:.1rem solid rgb(0,153,254).原创 2020-11-27 15:13:17 · 195 阅读 · 1 评论 -
基于js的广度优先搜索算法---实现随机生成迷宫
<canvas id="canvasCtx" width="600" height="600"></canvas><button id="btn" onclick="yieldList.next()"> 下一步 </button> canvas { margin-top:100px; margin-left:calc(50% - 300px); /* border:1px solid rgb(65,114,163); */}var can.原创 2020-11-27 15:09:48 · 430 阅读 · 1 评论 -
js 实现简易点击切换显示或隐藏
<div id="header"> <p>点击切换显示隐藏</p> <div class="close" onclick="closeTask()">关闭</div></div><div class="open" onclick="openTask()">打开</div>* { margin:0; padding:0;}#header { width:100%; height.原创 2020-11-27 11:31:27 · 1642 阅读 · 0 评论 -
js -- 计算机这样高产“优雅的”诗 特效
<p style="--order: 0;">不要急</p><p style="--order: 1;">正在加载</p><p style="--order: 2;">马上就好</p><noscript> <p style="--order: 0;">要想诗歌</p> <p style="--order: 1;">写得好</p> <p style="-.原创 2020-11-06 08:52:25 · 765 阅读 · 1 评论 -
基于jQueryj的网站聊天窗代码
<div id="talk-window" class="talk-window"> <div class="tw-title"> 聊天窗口 <span class="close-tw-window">×</span> </div> <div class="tw-content"> <div class="talk-list-div"> .原创 2020-11-05 20:53:53 · 278 阅读 · 2 评论 -
基于js的简单开关灯
<div class="a"> <div class="b"> <img src="https://www.jq22.com/newjs/d1.png" alt="" class="c"> </div></div>* { margin:0; padding:0;}.a { width:100%; height:100%; position:absolute; background-color:.原创 2020-11-05 20:49:43 · 266 阅读 · 1 评论 -
移动端基于js点名系统
只需要替换names里面的内容即可var names = new array(‘李某人’, ‘王某人’, ‘赵小刚’, ‘刘小红’, );<div class="names" id="names"></div><div class="btn"> <div class="btns" onclick="showNames()"> 开始提问 </div> <div class="btns" onclick="stop()"&.原创 2020-11-05 08:19:38 · 266 阅读 · 1 评论 -
基于js的多条件搜索展开收起代码
代码描述:点击展开按钮展示更多搜索条件,点击收起只显示一行搜索条件该代码适用于搜索条件比较多,界面布局又比较有限,默认收起只留下一行搜索条件,展开之后再进行更多搜索<ul class="search-ul"> <li class="clearfix"> <label>时间:</label> <div class="search-box"> <input type="te..原创 2020-11-05 08:12:25 · 1700 阅读 · 2 评论 -
基于js的图片拖拽排序源码
直接上代码<script> window.onload = function() { var oUl = document.getElementById("ul1"); var aLi = oUl.getElementsByTagName("li"); var disX = 0; var disY = 0; var minZindex = 1; var aPos = []; .原创 2020-11-03 19:54:47 · 656 阅读 · 2 评论 -
js 实现26个字母音标速记代码
代码描述:给26个字母数组随机打乱,然后通过javript异步编程将26个字母以时间段以此显示,可以选择下一题,有时间进度条<div id="main"> <button onclick="randomList()">打乱顺序</button> <br><br> <button id="startIs" onclick="start()">开始</button> <div class=".原创 2020-07-16 21:17:09 · 570 阅读 · 1 评论 -
jQuery遮罩效果弹出层效果
<br><br><center><input type="button" id="viewdetailsproductinfo" value="点击弹出层"></center><div class="overfloat" id="poplayer"> <div class="guize_html"> <span class="guize_html_nei"> <h1>遮罩效果弹出层..原创 2020-07-15 08:04:57 · 440 阅读 · 2 评论 -
简单的jQuery随机点名
<div class="wrap"> <p class="dianming">开始点名</p> <p class="name">张三</p></div>* { margin:0; padding:0;}.wrap { width:50%; margin:50px auto; border:1px solid #CCCCCC; padding:20px; box-sizing:border-box.原创 2020-05-12 16:26:19 · 1054 阅读 · 1 评论 -
Query电子时钟效果
<div class="clock"> <div id="Date"></div> <ul> <li id="hours"></li> <li id="point">:</li> <li id="min"></li>...原创 2020-04-24 19:44:44 · 226 阅读 · 0 评论 -
js实现简单的图片上传
简单的 图片上传 更改了默认的 file 文件样式, 我这里是 图片上传成功后, 后台会返回一个 图片的绝对路径 ,在把绝对路径设置给 img 便签,直接在前台展示出来。<form class="form-upload" id="formUpload" action="" method="post" enctype="multipart/form-data"> ...原创 2020-04-24 19:42:23 · 7607 阅读 · 1 评论 -
基于js的九宫格抽奖
<div id="contaner"> <div id="one">一块钱</div> <div id="two">谢谢惠顾</div> <div id="three">下去写作业</div> <div id="four">一局游戏</div> <...原创 2020-03-18 14:52:00 · 481 阅读 · 1 评论 -
密码滑动验证动画
<div class="password"> <input type="password" class="password-input" maxlength="9" /> <div class="check"> <svg> <use xlink:href="#check" /> </svg&g...原创 2020-03-08 15:07:00 · 284 阅读 · 1 评论 -
滚动范围滑块
<input id="slider" name="slider" type="range" value=0><label for="slider">0</label>html,body { margin: 0; height: 100%;}body { display: flex; justify-content: center;...原创 2020-03-08 15:05:21 · 272 阅读 · 0 评论 -
js实现计算器源码
<div class='calculator' id='calc'> <div class='toggle'> <div class='theme-switch-wrapper'> <label class='theme-switch' for='checkbox'> <input id='checkb...原创 2020-03-08 15:02:30 · 1214 阅读 · 0 评论 -
垃圾桶按钮动画源码
<button class="button"> <div class="trash"> <div class="top"> <div class="paper"></div> </div> <div class="box"><...原创 2020-03-08 15:00:27 · 270 阅读 · 0 评论 -
loading加载动画
<div class="loading-page"> <div class="counter"> <p>loading</p> <h1>0% <!-- h1.abs loading h1.abs.color loading --> </h1&g...原创 2020-03-08 14:57:13 · 184 阅读 · 0 评论 -
css实现清单点击动画源码
<div id="checklist"> <input id="01" type="checkbox" name="r" value="1" checked> <label for="01">Bread</label> <input id="02" type="checkbox" name="r" value="2"> ...原创 2020-03-08 14:53:59 · 230 阅读 · 0 评论 -
jquery实现简单二级菜单
<div id="nav" class="nav"> <ul class="top_nav" id="top_nav">1 <a href="###"> <li>菜单一</li> </a> <a href="###"> ...原创 2020-02-17 17:36:48 · 948 阅读 · 0 评论 -
svg时间显示牌
svg时间显示牌<svg> <text id="time" text-anchor="middle" x="50%" y="50%" class="words words-1"></text> <text id="time" text-anchor="middle" x="50%" y="50%" class="word...原创 2020-02-06 15:54:00 · 450 阅读 · 0 评论 -
tab切换标签页简易代码
<ul class="cs_top-nav"> <li class="cs_top-nav-item active">A</li> <li class="cs_top-nav-item">B</li> <li class="cs_top-nav-item">C</li></ul&...原创 2020-01-30 11:00:34 · 490 阅读 · 0 评论 -
打字机实现打印每个文字效果
<div class="mybox"></div>.mybox { height:200px; border:5px solid #ddd;}var time;var i = 0;var html = "两只老虎,两只老虎, 跑得快,跑得快, 一只没有眼睛, 一只没有尾巴, 真奇怪!真奇怪!。 两只老虎,两只老虎, 跑得快,跑得快, 一只没有耳朵, ...原创 2020-01-30 10:56:56 · 417 阅读 · 0 评论 -
CSS实现三角形效果
<div class="san1 item"></div><div class="san2 item"></div><div class="san3 item"></div><div class="san4 item"></div><div class="san5 item">&l...原创 2020-01-30 10:55:04 · 312 阅读 · 0 评论 -
JS实现图片拖动验证
目录结构<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>原生js实现图片拖动验证</title> <link rel="stylesheet" type="text/css" href="css/imgyz.css"/>...原创 2020-01-30 10:49:40 · 3952 阅读 · 2 评论 -
纯css实现吸顶效果
<div class="header"></div><nav> 用于显示粘性定位的头</nav><div class="content"></div><footer> 底部</footer>.header { width:100%; height:160px;...原创 2020-01-12 13:59:32 · 953 阅读 · 0 评论 -
css实现悬浮客服效果
<div class="sideBar"> <div> <div class="tips">在线客服</div> <ul class="list"> <li>QQ:1846492969</li> <li>QQ:18...原创 2020-01-12 13:58:04 · 2083 阅读 · 0 评论 -
百度api地图
<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=DmvaTbVhDI5FzcLmG8zcZQdPllicdMXQ"></script><div id="allmap"></div> body,html,#allmap...原创 2020-01-12 13:56:23 · 734 阅读 · 1 评论 -
文字上下滚动
效果图<div class="m"> <div style="height:80px; position:relative; overflow:hidden;"> <div id="rollText" style="font-size:12px;line-height:20px;"> <ul> ...原创 2020-01-11 09:39:21 · 383 阅读 · 0 评论 -
jquery--轮播图02
效果图<div id="slide"> <ul class="slide_img"> <li><img src="http://www.jq22.com/img/cs/500x300-1.png"></li> <li><img src="http://www.jq22.com/...原创 2020-01-11 09:36:58 · 178 阅读 · 0 评论 -
鼠标移入放大效果
<div class="box"> <img src="http://www.jq22.com/img/cs/500x500-9.png"></div>css.box{ width: 200px; height:200px; overflow: hidden;}img{ width: 100%; transition: transform...原创 2020-01-11 09:34:44 · 816 阅读 · 0 评论 -
多行文本溢出显示省略号点击展开收缩
效果图<div id="goodIntroduction"> 在漫无边际的海水上漂流,偶尔抬头能看见熟悉的日月星辰。因为我不知道下辈子是否还能遇见你,所以我今生才会那么努力把最好的给你。 陪伴,是最长情的告白;而声音,是最温柔的陪伴!</div>jsvar str = $("#goodIntroduction").text(); var tempt =...原创 2020-01-11 09:33:28 · 1662 阅读 · 0 评论 -
垂直轮播效果
效果图<div id="maindiv" class="maindiv"> <div id="contentdiv1" class="contentdiv">1</div> <div id="contentdiv2" class="contentdiv">2</div> <div id="content...原创 2020-01-11 09:31:57 · 617 阅读 · 0 评论 -
基于jquery的五星好评效果
效果图<ul class="comment"> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li></ul>css * { padding:0;...原创 2020-01-11 09:29:05 · 329 阅读 · 0 评论 -
基于css的div对角渐变效果
效果图<div id="deviceready" class="box"> <p class="event received">dong</p></div>css.event { width:500px; height:100px; position:absolute; border-radius:5%; left:-1...原创 2020-01-11 09:27:14 · 1345 阅读 · 0 评论 -
jquery--轮播图01
效果图<div class="banner"> <ul class="img"> <li> <a href="#"><img width="600" height="300" src="http://www.jq22.com/img/cs/500x300-1.png" alt="第1张图片"&...原创 2020-01-11 09:25:17 · 331 阅读 · 0 评论 -
基于css的简单loading效果
效果图简单loading效果,可直接在页面加载时,调用css,兼容已完善大小颜色修改即可<div class="loading"></div>css.loading { margin:100px auto; width:100px; height:100px; border:10px solid #333333; border-bottom:#aa...原创 2020-01-11 09:23:00 · 363 阅读 · 0 评论 -
jquery--比较好看的开关按钮
效果图:<div class="switch"> <div class="btn"></div></div>css* { margin:0; padding:0;}body{padding:30px;}.switch { padding:2px; width:60px; height:20px; backgrou...原创 2020-01-11 09:20:11 · 677 阅读 · 0 评论