关键词：
效果：
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.min.js"></script>
<script src="tips.js"></script>
</head>
<body>
<div id="ttt"></div>
<script>
var setting = {
‘width‘:300,
‘title‘:‘Warning‘,
‘content‘:‘You kill somebody.‘,
‘yes‘:‘I DO‘,
}
Tips.ini($(‘#ttt‘),setting);
</script>
</body>
</html>
js:
;(function($){
var Tips = function(selector,setting){
var self = this;
this.selector = selector;
this.setting = {
"width":"500",
"title":"Tips",
"content":"Some massages",
"yes":"OK",
}
$.extend(this.setting,setting);
this.setHtml();
$(document).on(‘click‘,‘.tipsclose‘,function(){
self.hideTips();
})
$(document).on(‘click‘,‘.tipsok‘,function(){
self.hideTips();
})
this.showTips();
}
Tips.prototype = {
setHtml:function(){
var html = ‘‘;
html += ‘<span class="tipsclose" style="position: absolute;right: 15px;top: 0px;cursor: pointer;color: #666;">x</span>‘;
html += ‘<h5 class="tipstitle" style="margin: 0;padding: 5px 20px;background: #f5faff;">‘+this.setting.title+‘</h5>‘;
html += ‘<div class="tipscontent" style="padding:20px;font-size: 14px;">‘+this.setting.content+‘</div>‘;
html += ‘<div class="tipsbutton" style="padding:20px;font-size: 14px;text-align:center;">‘;
html += ‘<span class="tipsok" style="cursor: pointer;padding: 5px 15px;background: #cb213d;color: #FFF;border-radius: 5px;">‘+this.setting.yes+‘</span>‘;
html += ‘</div>‘;
html += ‘</div>‘;
this.selector.append(html);
this.selector.css({
‘width‘:this.setting.width,
‘overflow‘: ‘hidden‘,
‘position‘: ‘fixed‘,
‘top‘: ($(window).height()-this.selector.height())/3+‘px‘,
‘left‘: ‘50%‘,
‘display‘: ‘none‘,
‘margin-left‘: -1*this.setting.width/2,
‘box-shadow‘: ‘0px 0px 2px 8px rgba(0,0,0,0.1)‘
})
},
showTips:function(){
this.selector.fadeIn();
},
hideTips:function(){
this.selector.fadeOut();
}
}
Tips.ini = function(selector,setting){
new Tips(selector,setting);
}
window["Tips"] = Tips;
})(jQuery)
js小tips之变量声明提前
只讨论变量声明的提前：理解这段代码：varname="aaa";functiontest(){alert(typeofname);varname="bbb";alert(typeofname);}test();-答案：undefined,string-分析：1、两个原理：a、JS中变量的声明会提前；b、JS的作用域原理以及对变量的搜索方式2、第一次... 查看详情
js小tips之tostring返回变量类型
Object.prototype的toString()可以返回变量类型而一般都重写了这个方法借助call()functionclassOf(x){if(x===null)return"NULL";if(x===undefined)returnundefined;returnObject.prototype.toString.call(x).slice(8,-1);}varx=13;console. 查看详情
小tips：js之浅拷贝与深拷贝
浅拷贝：functionextendCopy(p){ varc={}; for(variinp){ c[i]=p[i]; } returnc;}深拷贝：functiondeepCopy(p,c){ varc=c||{}; for(variinp){ if(typeofp[i]===‘object‘){ c[i]=(p[i].constructor===Array)?[]:{ 查看详情
小tip：生成一组不重复的随机数（去重的方法）
vararr=[]; for(vari=0;i<150;i++){//num为0-100的随机数varnum=Math.round(Math.random()*100);varstate=true; for(varj=0;j<arr.length;j++){ //遍历数组中的每一项，和新添加的num比较，如果重复，则不向数组中添加，i后退一位；否... 查看详情
小tips；css和js“通信”(代码片段)
假如我有一个需求，必须通过js执行动画，还得让css去配合。拿一个简单却不太恰当的例子来说：opacity‘一闪一闪’效果的实现。传统Vue必须要利用“动态style”。<template> <h1:style="opacity:opacity">Vue<... 查看详情
tips
1.UnityEditorDataResourcesScriptTemplates里的文件是Unity生成文件的模板.2.提示文件尾不一致.用VS打开UnityEditorDataResourcesScriptTemplates里的模板文件.文件->高级保存选项->Windows(CRLF)3.Scene视图里选择Transform工具,按V可以通过Pivot对齐 查看详情
小tips：在js语句执行机制涉及的一种基础类型completion(代码片段)
看一个如下的例子。在函数foo中，使用了一组try语句。在try中有return语句，finally中的内容还会执行吗？functionfoo()tryreturn0;catch(err)finallyconsole.log("a")得到的结果是：a0。根据结果可以看出finally执行了，return语句也生效了。虽然retur... 查看详情
h5跳转微信小程序
...口配合你来获取该链接，且你的h5地址如果很长，最好能生成短链，这样放在短信中不至于太长。无公众号直接使用小程序身份开发网页并免鉴权跳转小程序?可以吗?可以参考官方文档 查看详情
测试中几个实用的小工具
1身份证号码生成器我是做p2p理财业务的，测试中会用到身份证。自己编的话太随意，有时候还无法通过一些规则身份证号码和姓名_身份证号码和真实姓名大全_身份证号码大全防沉迷_身份证号码查询?sfz.ckd.cc2密码生成器公司用... 查看详情
微信小程序文档里看不到的小tips
...了下。然后列出一些实验结果，供大家参考。0.使用开发工具模拟的和真机差异还是比较大的。也建议大家还是真机调试比较靠谱。1.WXML(HTML)1.1小程序的WXML没有HTML的宽容度?那么高，单标签必需是/>结尾的。不然会报错。1.2?官... 查看详情
小tips；css和js“通信”(代码片段)
假如我有一个需求，必须通过js执行动画，还得让css去配合。拿一个简单却不太恰当的例子来说：opacity‘一闪一闪’效果的实现。传统Vue必须要利用“动态style”。<template> <h1:style="opacity:opacity">Vue<... 查看详情
小tips：hbuilder编辑器开启less自动编译为css的方法
1.首先，依次打开菜单栏->工具->预编译器设置，打开后是这样的：2.然后点击新建。3.文件后缀为.less触发命令地址就是lessc.cmd所在的地址，先用npm全局安装less,npminstall-gless，然后选择智能完成4.最后确定确定，就OK了，以后... 查看详情
微信小程序使用npm教程(代码片段)
首先打开工具-详情-勾选使用npm模块 使用npm的步骤：1.安装npm包在小程序package.json所在的目录中执行命令安装npm包：npminstall此处要求参与构建npm的package.json需要在project.config.json定义的miniprogramRoot之内。tips：开发者工... 查看详情
学习小tips
Eclipse中如何快速查看jar包中的class源码最常用的15大Eclipse开发快捷键技巧 查看详情
小贴士合肥工业大学计科与物联网本科毕业设计“外文翻译”tips
...许多人下载的论文是PDF格式，对此可以选择使用某些工具直接对其进行翻译，例如：搜狗翻译，登录后支持免费翻译文档；也可以用相关工具将PDF转成word后，再行翻译。 现在的机器翻译非常强大，... 查看详情
小tips：你不知道的npminit(代码片段)
前言在现代新建一个JS相关的项目往往都是从package.json文件开始的，不过这个文件里需要的字段实在是太多了，正常人都记不住，所以npm官方提供了npminit命令帮助我们快速初始化package.json文件。执行之后会有一个交互式的命令行... 查看详情
开发小tips
Kotlin语言篇：1、抽象类的定义1abstractclassPerson(varname:String,varage:Int):Any(){23abstractvaraddr:String4abstractvalweight:Float56abstractfundoSwim()78fundoFly(){9println("doFly")10}1112fundoEach(){13println( 查看详情
备份的一些小tip
//npm官方镜像npmconfigsetregistry=http://registry.npmjs.org//亚马逊S3host219.76.4.4github-cloud.s3.amazonaws.com 查看详情