值得记录的(一)

简要记录维护 

jQuery
 项目相关需求实现的细节,方便日后回顾。

样式相关

flex
 布局
justify-content: flex-start;
 和 
justify-content: center;

flex-wrap: wrap;
 换行

cursor: pointer;
 手型的使用

 

jQuery 左右移动 animate

使用 jQuery 实现左右按钮移动效果 - 类似于 FM 音乐播放器项目的动画实现

var isAnimate = false   //判断是否在动画之中
var isToStart = true    //判断是否在最起始位置
var isToEnd = false     //判断是否到底
$(".right_button").on("click",function(){
if(isAnimate) return
var itemWidth = $('.items_new').outerWidth(true)   //每个小容器的真实宽度
var rowCount = parseInt($('.content_new').width()/itemWidth)   //可视窗口 除以 itemWidth 得到可视窗口能看到的整数个数
if(!isToEnd){
isAnimate = true
$('.items_new').animate({
left: '-='   rowCount * itemWidth
},400, function(){
isAnimate = false
isToStart = false
if(parseFloat($('.content_new').width()) - parseFloat($('.items_new').css('left')) >=  parseFloat($('.items_new').css('width')) * <?=Yii::$app->params['bookShow']['newBookNum']?>) {   // newBookNum 对应 params.php 文件设置书本数量
isToEnd = true
}
})
}
})
$(".left_button").on("click",function(){
if(isAnimate) return
var itemWidth = $('.items_new').outerWidth(true)
var rowCount = parseInt($('.content_new').width()/itemWidth)
if(!isToStart){
isAnimate = true
$('.items_new').animate({
left: ' ='   rowCount * itemWidth
},400, function(){
isAnimate = false
isToEnd = false
if(parseFloat(($('.items_new').css('left'))) >= 0){
isToStart = true
}
})
}
})

 

localStorage 实现搜索功能

用 localStorage 实现搜索历史功能,点击可跳转相应页面
Demo预览

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>搜索历史----localstorage本地化存储</title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
</head>
<body>
<div class="col-lg-6" style="margin-top:20px;">
<div class="input-group">
<input type="text" class="form-control" id="keywords" placeholder="随便输入查看效果,默认5条">
<span class="input-group-btn">
<button class="btn btn-default" id="search" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<br><br>
<div style="margin:20px 20px 0px 20px;">
<span>搜索历史</span>
<span id="empty">清除历史</span>
</div>
<div style="margin:20px;" id="history">
</div>
</body>
<script type="text/javascript">
$(function(){
update_history();
// 绑定回车事件
$(document).keydown(function(event){
if(event.keyCode==13){
$("#search").click();
}
});
// 搜索点击事件
$("#search").click(function(){
var keywords = $("#keywords").val();
history(keywords); //添加到缓存
update_history(); //更新搜索历史
})
// 清空搜索历史
$("#empty").click(function(){
mystorage.remove('keywords');
$("#history").html(" ");
})
})
/**
* [update_history 更新搜索历史]
*/
function update_history(){
console.log(mystorage.get("keywords"));
var history = mystorage.get("keywords");
if (history) {
var html = "";
$.each(history,function(i,v){
html  = "<a class='history_link btn btn-default' style='margin: 5px;' href='javascript:;' role='button'>" v "</a>"
})
$("#history").html(html);
};
}
/**
* [history //搜索历史函数存储]
*/
function history(value){
var data = mystorage.get("keywords");
if (!data) {
var data = []; //定义一个空数组
}else if(data.length === 5){ //搜索历史数量
data.shift();  //删除数组第一个元素有
}else{
};
if (value) {  //判断搜索词是否为空
if (data.indexOf(value)<0) {  //判断搜索词是否存在数组中
data.push(value);    //搜索词添加到数组中
mystorage.set("keywords",data);  //存储到本地化存储中
};
};
}
/**
* [mystorage 存储localstorage时候最好是封装一个自己的键值,在这个值里存储自己的内容对象,封装一个方法针对自己对象进行操作。避免冲突也会在开发中更方便。]
*/
var mystorage = (function mystorage(){
var ms = "mystorage";
var storage=window.localStorage;
if(!window.localStorage){
alert("浏览器不支持localstorage");
return false;
}
var set = function(key,value){
//存储
var mydata = storage.getItem(ms);
if(!mydata){
this.init();
mydata = storage.getItem(ms);
}
mydata = JSON.parse(mydata);
mydata.data[key] = value;
storage.setItem(ms,JSON.stringify(mydata));
return mydata.data;
};
var get = function(key){
//读取
var mydata = storage.getItem(ms);
if(!mydata){
return false;
}
mydata = JSON.parse(mydata);
return mydata.data[key];
};
var remove = function(key){
//读取
var mydata = storage.getItem(ms);
if(!mydata){
return false;
}
mydata = JSON.parse(mydata);
delete mydata.data[key];
storage.setItem(ms,JSON.stringify(mydata));
return mydata.data;
};
var clear = function(){
//清除对象
storage.removeItem(ms);
};
var init = function(){
storage.setItem(ms,'{"data":{}}');
};
return {
set : set,
get : get,
remove : remove,
init : init,
clear : clear
};
})();
</script>
</html>

 

计时器温馨提示

温馨提示功能(例:已耗时用眼1小时,请休息片刻)

timeCount()
function timeCount(){
var restHelper = 1
var timer = setInterval(function() {
console.log(restHelper  );
if(restHelper == 3600){
alert('已经阅读一小时咯!请休息片刻哟。')
clearInterval(timer)
timeCount()
}
}, 1000);
}

  


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/363957.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

跟踪异常–第4部分– Spring的邮件发件人

如果您阅读过本系列以前的任何博客&#xff0c;您可能会记得我正在开发一个小型但几乎具有工业实力的应用程序&#xff0c;该应用程序在日志文件中搜索异常。 您可能还记得&#xff0c;我现在有一个可以包含一堆结果的类&#xff0c;需要将其发送给感兴趣的任何人。 这将通过实…

从客户端...中检测到有潜在危险的 Request.Form 值

在.net中&#xff0c;Request时出现有HTML、Javascript等字符串时&#xff0c;系统会认为是危险值&#xff0c;运行显示“从客户端……中检测到有潜在危险的Request.Form值”这样的错。解决办法&#xff1a; &#xff08;1&#xff09; 在.aspx文件头中加入这句&#xff1a; …

php ci model条件查询,Laravel关系模型指定条件查询方法

对于关系模型来说&#xff0c;有时候我们需要甄别关联后结果&#xff0c;例如&#xff0c;班级和学生是一对多关联&#xff0c;我现在查询班级&#xff0c;但是想只显示正常状态&#xff0c;即状态为1的学生&#xff0c;因为有的学生从这个班级里面删除了&#xff0c;状态是4&a…

android 之 百度地图

简介 百度地图Android定位SDK为基于移动客户端开发LBS应用提供基础定位能力。 功能介绍 功能介绍&#xff1a; 地图展示&#xff1a;包括2D图、卫星图、3D图地图展示。 地图操作&#xff1a;提供控制平移、缩放、底图旋转、变换视角等地图相关操作的功能。 短串分享&#xff1a…

从javaagent迁移到JVMTI:我们的经验

当您需要从JVM内部收集数据时&#xff0c;您会发现自己很危险地接近Java虚拟机内部进行工作。 幸运的是&#xff0c;有一些方法可以避免被JVM实现细节所困扰。 Java之父没有给您提供过两个漂亮的工具供您使用。 在这篇文章中&#xff0c;我们将说明两种方法之间的差异&#xf…

浅谈HTML5中canvas中的beginPath()和closePath()的重要性

beginPath的作用很简单&#xff0c;就是开始一段新的路径&#xff0c;但在使用canvas绘图的过程中却非常重要 先来看一小段代码&#xff1a; var ctxdocument.getElementById("canvas").getContext("2d");ctx.beginPath();ctx.rect(150,150,100,100);ctx.…

HTML--HTML对象的关于位置和大小的属性的图解

转载于:https://www.cnblogs.com/duadu/archive/2007/08/08/6166687.html

flower.php,flower.php

session_start();//定义个常量&#xff0c;用来授权调用includes里面的文件define(IN_TG,flower);define(IN_JS,flower);//定义个常量&#xff0c;用来指定本页的内容define(SCRIPT,message);//引入公共文件require dirname(__FILE__)./includes/common.inc.php;//判断是否登录…

BABOK - 需求管理和沟通(Requirements Management and Communication)概要

本文更新版本已挪至 http://www.zhoujingen.cn/itbang/345.html ------------------------------------------- 描述 需求管理和沟通描述我们如何管理冲突、问题、变更&#xff0c;并确保涉众和项目团队在方案范围内保持一致。不同项目的复杂度和方法论支持都不一样&#xff0c…

Java 8的默认方法:可以做什么和不能做什么?

什么是默认方法 在Java 8发行版中&#xff0c;您可以修改接口以添加新方法&#xff0c;以便该接口与实现该接口的类保持兼容。 如果您要开发一个库&#xff0c;该库将由基辅到纽约的几位程序员使用&#xff0c;那么这非常重要。 在Java 8出现之前&#xff0c;如果您在库中发布了…

jQuery 打气球小游戏 点击气球爆炸效果

最近在学习前端&#xff0c;看到偶尔看到前端小游戏&#xff0c;就想自己写一个小游戏&#xff0c;奈何水平有限&#xff0c;只能写打气球这种简单的&#xff0c;所有的气球都是动态生成的&#xff0c;气球的颜色也是随机的 html部分 <div class"container"> …

智能提示和那些值得崇拜的人

VisualStudio的智能提示功能越来越强&#xff0c;这为我们提供了很多方便但同时它带来的负面影响最近也一直受到关注。VS的目的是降低开发门槛&#xff0c;这一项他们非常夸张的做到了&#xff0c;之所以说夸张是因为因为它的简单&#xff0c;甚至有逻辑能力欠发达的人成为程序…

P1047 校门外的树

P1047 题目描述 某校大门外长度为L的马路上有一排树&#xff0c;每两棵相邻的树之间的间隔都是1米。我们可以把马路看成一个数轴&#xff0c;马路的一端在数轴0的位置&#xff0c;另一端在L的位置&#xff1b;数轴上的每个整数点&#xff0c;即0,1,2,…,L&#xff0c;都种有一棵…

.Net Core Swagger:Actions require an explicit HttpMethod binding for Swagger 2.0

添加完Swagger包引用后运行报错&#xff1a;Actions require an explicit HttpMethod binding for Swagger 2.0 第一时间想到了父类控制器 没有添加 [HttpPost] 之类的特性 添加后就可以解决这个报错原因 但是我的父类控制器里的两个方法只是为了做返回值的一些处理&#xff0c…

matlab impdt,实验1 基于Matlab的数字信号处理基本操作

图1-7 离散时间信号的基本运算及波形图>>title(x2(n)),axis([-15 15 0 1]) >>subplot(413)>>stem(n3,x,fill),grid on >>title(x3(n)),axis([-15 15 0 1]) >>subplot(414)>>stem(n4,x,fill),grid on >>title(x4(n)),axis([-15 15 0 …

通过Katas进行Java教程:网球比赛(轻松)

编程kata是一种练习&#xff0c;可以帮助程序员通过练习和重复练习来磨练自己的技能。 本文是“通过Katas的Java教程”系列的一部分。 文章分为易&#xff0c;中和难。 Fizz Buzz&#xff08;轻松&#xff09; -Java 7 柏林时钟&#xff08;简易&#xff09; – Java 7和8 …

关于动画的几种状态表示的含义以及能够使用2d动画表述为什么要使用3d动画表述

transform 四种转换 translate 位置scale 缩放rotate 旋转skew 倾斜 以上四种转换方式是比较特殊的&#xff0c;其实他们都是由matrix 矩阵转换来&#xff1b; animation的五种状态 动画速度这些曲线称之为贝塞尔曲线CSS88 这是一个css有关的网站&#xff1b;ease 由快到慢 最…

画函数图形的C#程序(改进版) (转)

我在10月份发表过一篇随笔“画函数图形的C#程序&#xff0c;兼论一个病态函数”&#xff0c;在那篇随笔中写道&#xff1a; 这个画函数图形的C#程序有一个严重的缺点&#xff0c;就是函数表达式是直接写的源程序中的&#xff0c;不能象SciLab和Matlab那样交互式地输入。 后来&a…

Swift-UITextView占位文字及占位文字颜色扩展(可在xib中直接使用)

使用案例 extension UITextView {private struct RuntimeKey {static let hw_placeholderLabelKey UnsafeRawPointer.init(bitPattern: "hw_placeholderLabelKey".hashValue)/// ...其他Key声明}/// 占位文字IBInspectable public var placeholder: String {get {re…

Easy.Ajax 部分源代码, 支持文件上传功能, 兼容所有主流浏览器

下面是Easy.Ajax类的初稿&#xff0c;如须发表&#xff0c;在代码上还要修改以达到最简&#xff0c;但API是不会变了&#xff0c; Easy.Ajax (function (WINDOW) {ajax {proxyPool: {length: function () {var i 0;for (var p in this)i;return i - 1;}},index: 0,clearCach…