常用：js实现一些功能+css

最新推荐文章于 2022-07-29 09:54:04 发布

PHP渣渣

最新推荐文章于 2022-07-29 09:54:04 发布

阅读量1k

点赞数

分类专栏： html 文章标签： html js css javascript

本文链接：https://blog.csdn.net/qq_38257857/article/details/105410764

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

html<area> 标签，可用来控制在某个范围内点击跳转页面，在某个按钮的范围内点击该按钮跳转至某页面：

<img src ="planets.gif" alt="Planets" usemap ="#planetmap" />
<map name="planetmap">
  <area shape="rect" coords="0,0,110,260" href="sun.htm" alt="Sun" />
  <area shape="circle" coords="129,161,10" href="mercur.htm" alt="Mercury" />
  <area shape="circle" coords="180,139,14" href="venus.htm" alt="Venus" />
</map>

移动端适配：<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">

text-align: justify; //文本两端对齐

text-align-last: left; //最后一行左对齐

图片上下居中：vertical-align:middle;(上下居中) 父级得设置行高line-height

jq修改class样式：$('.hbannerz').width(1920*zong);

jq新页面打开：window.open('http://www.ovcexpo.com.cn/attendee_register')

限制文本框中只能输入数字(int类型)：οnkeyup="value=value.replace(/[^\d]/g,'')"

限制文本框中只能输入数字(包括.(float类型))：οnkeyup="value=value.replace(/[^\d\.]/g,'')"

限制文本框中只能输入数字和‘-’：οnkeyup="value=value.replace(/[^\d\-\d]/g,'')"

css中input：加padding需注意input的width要设置小，即

你想要表现的宽=padding+border+input的width

css禁用鼠标点击：style="pointer-events: none;"

鼠标放入文本框，文本框样式改变：

.search-details .crux label input:focus{

border-style:solid;

border-color: #03a9f4;

box-shadow: 0 0 15px #03a9f4;

}

鼠标放上去显示图片，移开图片隐藏

.cang{ width:178px; height:178px; position: absolute; right:320px; top:160px; display: none;}

var oWei = document.getElementById("weixin")

var oCan = document.getElementsByClassName("cang")[0];

oWei.onmouseover = function(){

oCan.style.display = "block"

}

oWei.onmouseout = function(){

oCan.style.display = "none"

}

</script>

固定头部不动

.nav {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 160px;

z-index: 1;

background-color: #525252;

}

.nav:after {

clear: both;

}

图片上下居中：vertical-align:middle;

CSS位置：position:绝对位置：absolute（不占空间），通过z-index来控制它层级次序，z-index的值越高，它显示的越在上层；相对位置：relative（占用空间）

CSS控制透明度：opacity: 0.7;

CSS控制显示字数，超出用....表示：white-space:nowrap（规定段落中的文本不进行换行）;overflow:hidden（隐藏超出部分）;text-overflow:ellipsis（修剪文本，最后为....）;

white-space:nowrap; overflow:hidden; text-overflow:ellipsis;

text-overflow:clip与text-overflow:ellipsis的区别：

overflow:hidden;

text-overflow:ellipsis;

-webkit-box-orient:vertical;

display: -webkit-box;

-webkit-line-clamp:2

a链接重新打开新页面： target="view_window"

去除上下图片间的空隙：padding:0; margin:0 后若还有空隙+display:block;

js生成随机字符串：

function randomString(len) {
　　len = len || 32;
    /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
　　var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
   var maxPos = $chars.length;
　　var pwd = '';
　　for (i = 0; i < len; i++) {
　　　　pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
　　}
　　return pwd;
}

去掉字符串首尾的空白字符：$.trim()是jQuery提供的函数

获取文本框的内容：$("input[name=ming]").val();

获取select下拉框的内容：var huxing = $("select[name=huxing]").val();

点击加或减：

var num = document.getElementById("num");

function 方法：num.value = parseInt(num.value) - 1;

获取select下面option的value值：

给select加id，οnchange='方法名(this.options[this.options.selectedIndex].value)'

再用js定义方法

获取样式是否显示或者隐藏：var display =$('#fenlei').css('display');

document.getElementById('fenlei').style.display='block';

鼠标经过：onmousemove

JS去除最后一个字符：tuz = tuz.substr(0,tuz.length-1);

JS正则表达式删除最后一个字符串：

var str="a,b,c,d,"

var reg=/,$/gi;

str=str.replace(reg,"");

alert(str);

js获取文本框的内容：var idzhi = document.getElementById('idzhi').value;

获取同级元素：siblings();

获取id的文本内容：$('#product_spec_price').text();

修改id的文本内容：$('#product_spec_price').text(proid);

修改id的value值：$('#product_spec_price').val(proid);

去除某个字符：var str = id.replace(/^x/,'');注：去除字符'x'

去除某个动态字符：

var str = 'a=2&b=3';

var a = 'a=2'; str = str.replace(new RegExp(a),'');

鼠标事件：

js循环：

var value = $(this).find("a").attr("data");

switch(value)

{

case 'dajin': var chanpin = '大金';break;

case 'rili' : var chanpin = '日立';break;

}

鼠标样式：

cursor: pointer;//手

css实现banner图片居中（屏幕大小有变也是居中情况）

<html>

<head>

<title>Title</title>

<style>

.bannerbox {

width:100%;

position:relative;

overflow:hidden;

height:370px;

}

.banner {

width:1920px; /*图片宽度*/

position:absolute;

left:50%;

margin-left:-960px; /*图片宽度的一半*/

}

</style>

</head>

<body>

</div>

</body>

</html>

JS实现ul里每行的第一个li去除右边距（直接设置右边距，设置左边距不可以），从而实现对齐：

CSS：

ul#proul li{ background:red; float:left; width:220px; height:300px; margin-right:15px; }

ul#proul li:first-child{ margin-right:15px; }

奇偶、第几个元素、几的倍数css控制：nth-child();

规定属于其父元素的第二个子元素的每个 p 的背景色：p:nth-child(2){background:#ff0000;}

为奇数和偶数 p 元素指定两种不同的背景色：p:nth-child(odd){background:#ff0000;}//偶 p:nth-child(even){background:#0000ff;}//奇

3 的倍数的所有 p 元素的背景色：p:nth-child(3n+0){background:#ff0000;}

JQ放大镜：Cloud Zoom

背景透明度（包括在背景上的字体也透明）：opacity:0.5;

背景透明度，字体不透明：background-color:rgba(212,0,0,0.8); color:black;

绝对定位与相对定位：

相对定位得是绝对定位的父级或父级以上

图片不犬牙交错：display:inline-block

绝对定位上下左右垂直居中：

position:absolute; left:50%; top:50%; margin-left:-50px;（宽的一半） margin-top:-50px;（高的一半）

圆角+阴影效果：

#box-shadow{ box-shadow:5px 5px 5px #444; }

圆角+半透明+阴影效果：

#box-shadow2{ box-shadow:5px 5px 5px rgba(0,0,0,.4); }

内描边外描边：

.text { width: 254px; height: 254px; background-color: #33AAE1; border: 20px solid #03D766; outline: 5px dashed #FFF; outline-offset: -5px; }

清除定位（设置为默认）：position:static;

判断滚动条是否到底部：jquery

$(window).scroll(function(){
　　var scrollTop = $(this).scrollTop();
　　var scrollHeight = $(document).height();
　　var windowHeight = $(this).height();
　　if(scrollTop + windowHeight == scrollHeight){
　　　　alert("you are in the bottom");
　　}
});

如果页面滚动距离大于浏览器高度所触发的效果

$(window).scroll(function(){
　　var scrollTop = $(this).scrollTop();//鼠标移动多少
　　var scrollHeight = $(document).height();//网页实际高度
　　var windowHeight = $(this).height();//浏览器高度
　　if(scrollTop > windowHeight){
　　　　var nav = document.getElementById('blognav');
        nav.style.position = 'fixed';
        nav.style.top = '0px';
　　}else
    {
        var nav = document.getElementById('blognav');
        nav.style.position = 'absolute';
        nav.style.top = '555px';
    }
});

鼠标指针样式：http://www.w3school.com.cn/tiy/t.asp?f=csse_cursor

字间距：letter-spacing:3px;

对图片定位读取：background-position:-50px 50px;

左偏移的距离：$(".zt").offset().left

style里面计算：style=" background-position: left calc(<{$company.avg_scores.score3}>*19)px; padding-left:calc(<{$company.avg_scores.score3}>*19px);"

改变select右侧下拉样式：

select {
      /关键：将默认的select选择框样式清除/
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    background: url("../img/arrow.png") no-repeat scroll right center transparent;
    /非框架时，为下拉小箭头留出一点位置，避免被文字覆盖/
    /padding-right: 10px;/
}

JQ实现某个class最后一个样式改变：

$(".gslsbor").last().css("border-bottom","3px solid #EAEAEA");

</script>

给a添加href或者修改href值：$("#coweibo").attr("href","http://www.baidu.com/");

js刷新：window.location.reload();

ajax：添加async:false.即修改为同步了，什么意思？（按同事解释就是，这是等这个ajax有了返回值后才会执行下面的js。一语道破天机，怪不得以前很多ajax调用里面的赋值都不起作用）。这样等ajax给bol赋值完毕后，才执行下面的js部分。而刚刚异步的话，还没有来得及赋值，就已经return了。

新打开浏览器：

function toQzoneLogin()

{

childWindow = window.open("oauth/index.php","TencentLogin","width=450,height=320,menubar=0,scrollbars=1, resizable=1,status=1,titlebar=0,toolbar=0,location=1");

}

将字符串根据某个字符切割成数组：

var str='a.bbbb.ccccc';

var strs= new Array(); //定义一数组

strs=str.split(".");

文字排列：writing-mode:lr-tb或writing-mode:tb-rl

例：writing-mode:tb 从上往下竖排

CSS点击按钮重置：<input type="reset" name="按钮的名称" value="按钮的取值"/>

点击字选中复选框

有个label, for="xxx" xxx是input的id, 这样就关联起来了

<input type="checkbox" name="Pages" value="Job" id="Job" ><label fo

r="Job">添加、编辑招聘信息</label>

跳转到手机端：

<script type="text/javascript">
function browserRedirect() { 
    var sUserAgent= navigator.userAgent.toLowerCase(); 
    var bIsIpad= sUserAgent.match(/ipad/i) == "ipad"; 
    var bIsIphoneOs= sUserAgent.match(/iphone os/i) == "iphone os"; 
    var bIsMidp= sUserAgent.match(/midp/i) == "midp"; 
    var bIsUc7= sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; 
    var bIsUc= sUserAgent.match(/ucweb/i) == "ucweb"; 
    var bIsAndroid= sUserAgent.match(/android/i) == "android"; 
    var bIsCE= sUserAgent.match(/windows ce/i) == "windows ce"; 
    var bIsWM= sUserAgent.match(/windows mobile/i) == "windows mobile"; 
    if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) { 
        window.location.href= 'http://qxu2060450012.my3w.com/web'; 
    } else { 
        window.location= 'http://qxu2060450012.my3w.com/index'; 
    } 
} 

browserRedirect(); 
</script>

js返回过来数组，循环：

$.each(res.data, function(key, val){
    items += '<tr><td>'+val.keywords+'</td><td>'+val.zdh+'</td><td>'+val.yxdh+'</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>';
});

js获取选中的复选框：

relid = new Array();
$("input:checkbox[name='relation']:checked").each(function() {
    relid.push($(this).val());
});
relids = relid.join(',');

js判断数字大小：js中默认是字符，所以要先将字符转变为int类型，然后判断数字大小：

if(parseInt(yxdh) > parseInt(zdh)){

parent.layer.msg('有效对话数量不可超过总对话数量!',{offset:0});

$('#yxdh').focus();

return false;

}

js监听input值的变化：【layui】

$(function(){

$('#username').bind('input propertychange', function() {

$('#result').html($(this).val().length + ' characters');

});

})

js数组转字符串：

relid = new Array();
$("input:checkbox[name='relation']:checked").each(function() {
    relid.push($(this).val());
});
if(relid.length == 0){
    parent.layer.msg('至少有1个数据!',{offset:0});
    return false;
}
relids = relid.join(',');

js字符串转数组：

var arr=str.split(",");

jq获取某个元素的某个属性：type = $(".line-active").attr("val");

判断是否含有某个class：

if($("div").is(".disnone")){

alert("含有disnone类");

} else{

console.log('2222');

}

刷新当前页面：setTimeout(function(){window.location.reload()},600);

鼠标放入延缓效果时间：.quality-num li { transition: all .6s; -webkit-transition: all .6s;}

子页面调用父页面方法：https://www.cnblogs.com/huangshuqiang/p/5734358.html

window.parent.dataTable();//子页面调用父页面的dataTable()方法；

判断字符串是否是数字（int及float类型）：

var re = /^[0-9]+.?[0-9]*$/; //判断字符串是否为数字 //判断正整数 /^[1-9]+[0-9]*]*$/

if (!re.test(cost)){

top.layer.msg('请正确录入消费数据', { offset: 't', anim: 6});

$('#fillcost').focus();

return false;

}

判断字符串中是否含有某个字符串：indexOf();

例：var a='率abcd'; console.log(a.indexOf('率')) //返回指定字符的位置,从0开始,如果没有,则返回-1

选中某些文字：$('#code').select();

不再提示：localStorage：相当于cookie，使用方法：

localStorage.setItem("expire_status",1);//写入名称和他的值

localStorage.getItem("expire_status");//读取值

localStorage.clear();//退出时清空

jq中将中文转码：encodeURI

jq设置cookie：

var date = new Date();

date.setTime(date.getTime()+5*60*1000);//只能这么写，5表示5分钟

$.cookie('aaa','aaabbbccc',{expires: date,path: '/'})//设置cookie名为aaa，其值为aaabbbccc，存活时间为5分钟，path为可用的页面(现设置为全页面)，之前未加时其他页面有时获取不到此cookie

登录密码只能由数字、大小写字母组成且必须含有大写及小写字母(正则)：

var Regx = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z\d]{6,20}$/;

if (!Regx.test(newpasswd)) {

top.layer.msg('密码必须由大写小写字母及数字组成',{ offset: 't', anim: 6});

$('#newpasswd').focus();

return false;

}

禁用按钮点击：$('#button2').attr('disabled',"true");

禁用浏览器右侧滚动条：overflow:-Scroll;overflow-y:hidden

用jq生成的html然后appendTo，比如layui还需要render渲染，之后click需要$(document).on('click','元素',function(){

$(this).closest('.zp').remove();

$('.addzp').show();

})

视频播放：<video class="ep-video" src="{{asset('home/a.mp4')}}" autoplay muted loop style="position: absolute; top:0; left: 0; width: 100%; height: 100%;z-index:1;object-fit: fill;"></video>

jq验证正则：

var reg_phone=/^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/;

var company_phone = temp.company_phone;

if (!reg_phone.test(company_phone)){

layer.close(index2);

layer.msg('请检查手机号格式', {icon: 2, time: 2000});

is_stop = true;

return false;

}

jq去除空格：$.trim(a)

修改select默认样式：

.select, .realm {
    /*很关键：将默认的select选择框样式清除*/
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    /*在选择框的最右侧中间显示小箭头图片*/
    background: url("images/right-select.png") no-repeat scroll right 0.03rem transparent;
    background-size: 0.13rem 0.26rem;
    /*为下拉小箭头留出一点位置，避免被文字覆盖*/
    padding-right: 0.14rem;
    outline: none;
}

不保存输入的信息：autocomplete="off"

自动左右浮动：

大div：display: -webkit-flex;

-webkit-flex-direction: row;

-webkit-flex-wrap: wrap;

-webkit-justify-content: space-between;

左右div：vertical-align: baseline;

字体两端对齐：text-align:justify;

更换字体：

@font-face{

font-family:Poppins;

src:url('{{asset('home/assets/lib/iconfont/Poppins-Light.ttf')}}');

}

body{ font-family:Poppins; }

</style>

字符串和变量组合非字符串：eval('company_goods'+i)

屏蔽打印：console.log = function(){};

$.each(arr1,function(i,val){ //两个参数，第一个参数表示遍历的数组的下标，第二个参数表示下标对应的值 console.log(i+'```````'+val);

})

限制只能微信打开：

// 对浏览器的UserAgent进行正则匹配，不含有微信独有标识的则为其他浏览器

var useragent = navigator.userAgent;
if (useragent.match(/MicroMessenger/i) != 'MicroMessenger') {
    // 这里警告框会阻塞当前页面继续加载
    // 以下代码是用javascript强行关闭当前页面
    // var opened = window.open('about:blank', '_self');
    $('body').html("<div style='width:auto; height:20px; line-height:20px; color:#ccc; text-align:center;'>请在微信里打开</div>")
    /*opened.opener = null;
    opened.close();*/
}else{
    window.alert = function(name){
        var iframe = document.createElement("IFRAME");
        iframe.style.display="none";
        iframe.setAttribute("src", 'data:text/plain,');
        document.documentElement.appendChild(iframe);
        window.frames[0].window.alert(name);
	iframe.parentNode.removeChild(iframe);
    }
}

Jquery 打开新页面

var newWeb=window.open('_blank'); newWeb.location='新页面的链接地址';

锚链接：

判断返回结果是否是数组：var bool = $.isArray(d.data) ;console.log(bool) //true

判断返回结果是否是对象：var bool = $.isPlainObject(d.data) ;console.log(bool) //true

滚动条样式修改：（谷歌可以）

.scrollbar::-webkit-scrollbar-track{
    background-color: #fff;
}
.scrollbar::-webkit-scrollbar{
    width: 10px;
    background-color: #F5F5F5;
}
.scrollbar::-webkit-scrollbar-thumb{
    background-color: rgba(62,135,240,1);
}

网页清明变灰色：

var myDate = new Date();//获取系统当前时间
if(myDate.getDate() == 4){
    $('body').css("-webkit-filter", "grayscale(100%)");
    $('body').css("-moz-filter", "grayscale(100%)");
    $('body').css("-ms-filter", "grayscale(100%)");
    $('body').css("-o-filter", "grayscale(100%)");
    $('body').css("filter:progid", "DXImageTransform.Microsoft.BasicImage(grayscale=1)");
    $('body').css("_filter", "none");
}
即css样式：
-webkit-filter: grayscale(100%);  
-moz-filter: grayscale(100%);  
-ms-filter: grayscale(100%);  
-o-filter: grayscale(100%);  
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);  
_filter:none;

添加某个class并移除同级的class

$('.chat_left li').click(function(){
     $(this).addClass('current').siblings().removeClass('current');;
})

PHP渣渣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录