![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Web前台demo小记
霜月枫桥
Web前端软件工程师
展开
-
JavaScript中,统计字符串中各字符出现的次数
问题描述:在javascript中,对于任意一字符串,统计该字符串中各字符出现的次数,并统计出来。代码: $(function(){ var strings="asfyoquywjavgcdfaghfdjavcbnzxc"; var obj=new Object(); for(var i=0;i<strings.length;i++){原创 2017-03-21 14:18:26 · 2596 阅读 · 0 评论 -
JS插件封装——生成表格
调用页面HTML代码如下: Document 输入行数: 输入列数: function build(){ var rows=document.getElementById("rows").value; var cols=document.getElementById("cols").value; var table=new Tab原创 2017-11-14 16:20:02 · 3292 阅读 · 0 评论 -
canvas漂浮动画
代码如下: canvas漂浮动画 body{ margin:0px; } canvas{ display:block; } var canHeight=0; //画布的宽度 var canWidth=0; //画布的长度 var canvas=null; //画布对象CanvasRenderingContextD var mouseTop原创 2017-11-21 10:51:13 · 1248 阅读 · 0 评论 -
HTML 3D表白爱心
代码如下: Document @keyframes ani{ from{ transform:rotateY(0deg) rotateX(0deg); } to{ transform:rotateY(360deg) rotateX(360deg); } } body{ perspective:1000px; } #heart{ pos原创 2017-11-21 14:16:19 · 12722 阅读 · 2 评论 -
缓存+懒加载实现瀑布流效果
页面代码: 最佳影片TOP200推送 body{ margin:0px; background-color: #368; } div#content { position:relative; margin: 20px auto; } figure.movie { box-shadow: 1px 1px 1em #ddd;原创 2017-12-11 17:20:07 · 1658 阅读 · 0 评论 -
HTML黑客帝国数据瀑布流
代码如下: 黑客帝国数据瀑布 body{ margin:0px; } #canvas{ display:block; } var maxHeight=0; var maxWidth=0; var canvas=null; var arrMess=new Array(256).fill(1); function $_id(id){ r原创 2017-12-14 11:19:22 · 3671 阅读 · 1 评论 -
HTML旋转的太极图
代码如下: 旋转的太极图 body{ margin: 0px; background-color: #ccc; } html,body{ height: 100%; } @keyframes ani{ 100%{ transform: rotate(360deg); } } .content{ position: fixed;原创 2018-01-17 11:06:56 · 2938 阅读 · 0 评论 -
-webkit-mask实现爱心遮罩效果
代码如下: 爱心遮罩效果 *{margin:0;padding:0;} ul,ol{list-style:none;} a{text-decoration:none;} .box{ position:fixed; width:100%; height:100%; background:url("images/03.jpg");原创 2018-01-17 17:11:24 · 1969 阅读 · 0 评论 -
HTML demo之可调整的盒子
代码如下: HTML demo之可调整的盒子 #div{ position: absolute; box-sizing: border-box; height: 200px; width: 200px; background-color: orange; top: 200px; left: 300px; padding: 10p原创 2018-01-25 18:03:29 · 542 阅读 · 0 评论 -
HTML 添加数据信息
代码如下: Title *{ margin:0; padding:0; font-family:"Microsoft yahei",serif;} li{ list-style-type: none;} html,body{原创 2018-01-19 10:39:41 · 5096 阅读 · 0 评论 -
HTML页面侧栏动态效果
代码如下所示: 页面侧栏动态效果 *{ padding:0px; margin:0px; } body{ background-color:skyblue; height:1200px; } #sidebar{ position:fixed;原创 2017-11-13 11:15:36 · 4688 阅读 · 2 评论 -
HTML文字波浪形移动和复原
代码如下所示: Document html,body{ height:100%; }/* #demop{ position:absolute;} */ #demop span{ position:relative; } 江南皮革厂!江南皮革厂倒闭了!王八蛋黄鹤欠了我们3.5个亿,跟着他的小姨子跑了。 var reset=null; /*复原创 2017-11-15 15:45:18 · 888 阅读 · 0 评论 -
HTML元素拖动示例
拖动彩色图片 .div1{ height: 200px; width: 200px; background-image:linear-gradient(30deg,red,orange,blue,green,pink,purple); position: absolute; bord原创 2017-03-23 23:08:51 · 591 阅读 · 0 评论 -
CSS3实现球的自由落体
代码如下所示: HTML5+CSS3练习 自由落体 北京时间: @keyframes circle{ 0%,100%{ margin-top:20px; } 2%{ margin-top:20px; } 98%{ margin-top:20px;原创 2017-04-01 15:11:57 · 1813 阅读 · 0 评论 -
JavaScript中,二分法递归示例
问题描述:对于JavaScript中的数组,采用二分法,递归的获取指定值的下标。代码: 数组查找某一数字 请输入0~9之间任一数字 结果为:无 var arr9=[0,1,2,3,4,5,6,7,8,9]; $(function(){ $(".but9").click(function(){原创 2017-03-21 15:02:05 · 950 阅读 · 0 评论 -
Web开发——获取查询内容(内容分页显示)【前台页面部分】
代码实现功能描述:根据用户在页面上输入的开始时间和结束时间,从数据库中获取数据,获取的数据以每页10条的格式分页显示在页面上。 Document .rptIntfPortlet { width: 1100px; margin: 0px auto; } .rptIntfPortlet .portletBody .showSection{原创 2017-06-28 19:06:35 · 2265 阅读 · 0 评论 -
图片轮播的实现原理+样例
页面使用图片轮播效果,可以向用户更好的介绍自己的公司,从而增加公司的销售额。本次博客,我根据自己的理解,向想了解图片轮播的同学介绍一下图片轮播是如何实现的。不足之处,欢迎大牛们指点。图片轮播,根据项目需求的不同,可以有不同的实现方法。第一种方法是实现图片轮播的基本需求,代码很简单,前台图片轮播切换样式很单一,适应于要求快速开发的小型网站,且维护简单。第二种方法不仅实现了图片轮播的基本需原创 2017-03-01 10:37:50 · 5314 阅读 · 0 评论 -
HTML前台分页样例
自己制作的一个分页示例,贴出来和大家分享一下: Document .rptIntfPortlet .portletBody .showSection{ font-size: 12px; } .rptIntfPortlet .portletBody .showSection .showBody .showMore span.input span{ d原创 2017-06-22 10:34:48 · 8574 阅读 · 0 评论 -
JS将复制的页面内容以纯文本的形式粘贴到自己的页面上
需求:从网上复制网页内容,通过页面(不是通过代码)粘贴到自己开发的页面上时,消除原来内容的所有样式,只粘贴纯文本。 #demo{ height: 400px; border:1px solid black; }function setpaste(item){ window.setTimeout("change("+item.id+")",1原创 2017-06-25 18:33:31 · 2619 阅读 · 0 评论 -
CSS3的transform属性实现旋转正方体
代码如下: Document 1 2 3 4 5 6 ul{ position:relative; height:300px; width:300px; list-style:none; margin:100px auto; transfor原创 2017-07-31 10:34:45 · 3423 阅读 · 0 评论 -
iPhoneX下拉特效
代码如下所示: Document body,ul{ padding:0px; margin:0px; } li{ list-style:none; } #body{ width:400px; height:200px; border:10px solid black; border-radius:10px; margin:30px aut原创 2017-11-20 10:58:41 · 1064 阅读 · 0 评论 -
jsonp模拟百度搜索框
代码如下: Title *{ margin:0; padding:0; font-family:"Microsoft yahei",serif;} li{ list-style-type: none;} #box{原创 2018-02-07 10:06:24 · 814 阅读 · 0 评论