HTML、CSS、JS 样式 (未整理)
随手记,有错误的地方希望留言 ^.-.^
PHP 实现关闭浏览器窗口
echo "<script>window.close();</script>";
jquery 获取长度
var iccid = $("#iccid").val().length
var idnumber= $("#idnumber").val()
var numberTop = idnumber.substr(0,6)
alert(iccid)
js/jquery怎么移除已添加的属性
//两种方法设置disabled属性
$('#areaSelect').attr("disabled",true);
$('#areaSelect').attr("disabled","disabled");
以下三种方法是移除(去除)掉input的disabled属性的方法:
//三种方法移除disabled属性
$('#areaSelect').attr("disabled",false);
$('#areaSelect').removeAttr("disabled");
$('#areaSelect').attr("disabled","");
readonly="readonly" //以只读类型展示给用户 可以用form提交接值 disabled="disabled"用form接不到值
把一个数组(一维或二维等)的内容转化为对应的字符串。相当于把print_r(array)显示出来的内容赋值给一个变量。data= array('hello',',','world','!');
str=addslashes(varexport(data, TRUE));
echo str."<br>"."<br>"."<br>"."<br>"."<br>"."<br>"; echo stripslashes(str);
addslashes()函数是用来把字符串进行安全格式化,方便把字符串存入数据库中。它会把 单引号、双引号、反斜杠、NULL 的前面加上反斜杠。
stripslashes()函数是用来把addslashes()格式化的字符串进行还原。就是去掉增加的反斜杠。
style="display: none;position:fixed;background:#F1F1F1;width: 120px;text-align:center;z-index:999;opacity: 0.6"
text-align:center; //内容居中
z-index:999; //遮罩层,排序
opacity: 0.6 //透明度
font-weight:bold //加粗
margin-left:auto; margin-right:auto; //div居中
style="font-family: microsoft yahei" //微软雅黑
overflow:hidden; //溢出隐藏
text-overflow : clip | ellipsis //clip :不显示省略标记(...),而是简单的裁切(clip这个参数是不常用的!) ellipsis : 当对象内文本溢出时显示省略标记(...)
a标签跳转新页面:<a href="http://www.cnblogs.com/54sen/" target="_blank">去瞅瞅</a>
<div style="width: 50%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">div、span等标签内容不换行,溢出隐藏,省略号代替!!!
a需要定义块级 display:block display:inline-block;
</div>
/*距左元素块距离(设置距左内边距)*/
margin-left: 0px;
/*距右元素块距离(设置距右元素块距) */
margin-right: 0px;
/*底元素块距离(设置距低(下)元素块距)*/
margin-bottom: 0px;
/*距头顶(上)元素块距离(设置距顶部元素块距离)*/
margin-top: 0px;
padding:10px 5px 15px 20px;
● 上内边距是 10px
● 右内边距是 5px
● 下内边距是 15px
● 左内边距是 20px
css让图片自适应大小
img {
max-width: 100%;
max-height: 100%;
}
DIV背景图自适应大小: style="background:url(图片地址);background-size:100%;
这样就会适应宽度了,background-size属性,有两个参数,background-size:宽 高
CSS3 提供了一些与当前viewpoint相关的元素,vw,vh,vim等
例如设置div高度是宽的百分之32 :height: 32vw;
设置字体:font-size:4vw;
“viewpoint” = window size
min-height:50px 最小高度50px
max-height:50px 最大高度50px
-webkit-border-top-right-radius 右上角为圆角
-webkit-border-bottom-right-radius 右下角为圆角
button按钮背景透明 <input type="button" style="background:none;border:none;" id="upd_{{$val['u_id']}}">
/*图片透明*/
/* .div1 a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8}
.div2 a:hover img{filter:alpha(Opacity=70);-moz-opacity:0.7;opacity: 0.7} */
/*图片变灰*/
.div1 a:hover img{filter:Gray;-webkit-filter: grayscale(100%);}
.div2 a:hover img{filter:Gray;-webkit-filter: grayscale(100%);}
.div3 a:hover img{filter:Gray;-webkit-filter: grayscale(100%);}
/*图片转BASE64串 、BASE64串转图片*/
img_file = 'http://peoplespublic.network/public/assets/img/QR_code.jpg'; img_info = getimagesize(img_file); img_src = "data:{img_info['mime']};base64," . base64_encode(file_get_contents(img_file));//将base64串转换成图片
img_base64 = base64_encode(file_get_contents(img_file));//图片转base64串
exit("<img src='{$img_src}' />");
jQuery 添加新内容有以下四个方法:
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
$('选择器').html('替换的内容')
使input框变成只读且禁用模式
<input name="demo" type="text" disabled value="value" readonly="true" />
CSS控制字数多,隐藏多余字
text-overflow:ellipsis;word-break:keep-all;overflow:hidden; white-space:nowrap;
显示竖的滚动条
overflow-y:auto;height:220px;
表格不被撑开,换行
style="word-break:break-all"
input 限制输入类型 CSS 原创:http://www.jb51.net/web/78327.html
1.只能输入和粘贴汉字
<input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))"><br/>
3.只能输入和粘贴数字
<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" /><br/>
5.数字脚本
<input onkeyup="if(/\D/.test(this.value)){alert('只能输入数字');this.value='';}"><br/>
6.只能输入数字和英文
<input onkeyup="value=value.replace(/[\W]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"><br/>
8.简易禁止输入汉字
<input style="ime-mode:disabled">输入法不转换,但可粘贴上<br/>
9.输入数字和小数点
<input onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')" /><br/>
10.只能数字和"-",例如在输入时间的时候可以用到
<input onkeyup="value=value.replace(/[^\w&=]|_/ig,'')" onblur="value=value.replace(/[^\w&-]|_/ig,'')" />
/* 图片转base64、base64转图片 */
img_file = 'http://peoplespublic.network/public/assets/img/QR_code.jpg'; img_info = getimagesize(img_file);//图片尺寸 img_src = "data:{img_info['mime']};base64," . base64_encode(file_get_contents(img_file));//图片转换称base64串,然后再转换成图片
img_base64 = base64_encode(file_get_contents(img_file));//图片转换称base64串
a标签href属性实例
href=’http://www.baidu.com’ 点击后直接跳转至百度首页
href=’test.html’ 跳转至文档当前目录下test.html文件
href=’javascript:history.back(-1);’ 运行JS代码,返回上页
href=’<?php echo($_SERVER[“HTTP_REFERER”]); ?>’ 返回操作前页面
a:link { text-decoration: none;color: blue}
a:active { text-decoration:blink}
a:hover { text-decoration:underline;color: red}
a:visited { text-decoration: none;color: green}
a:link 指正常的未被访问过的链接;
a:active 指正在点的链接;
a:hover 指鼠标在链接上;
a:visited 指已经访问过的链接;
text-decoration是文字修饰效果的意思;
none参数表示超链接文字不显示下划线;
underline参数表示超链接的文字有下划线
A标签去掉所有样式 <a style="text-decoration: none;" ></a>
text-indent:-9999px;//内容缩进。 例子如下:
<input type="hidden" style="text-indent:-9999px;" class="ys1" id="cardid" maxLength="18" disabled="disabled">
jquery接单选按钮值
<font style="font-size: 17px">补 押 金 :</font>
<input type="radio" name="yj" value="1" style="margin-left: 7%;">199元
<input type="radio" name="yj" value="2" style="margin-left: 8%;">399元
var yj=$('input:radio[name="yj"]:checked').val();
alert(yj)
jquery判断属性值是否是指定的
if( $("#test").css("display")=='none' ) { }
if( $("#test1").is(":hidden"){ } ) // 判断:hidden选择器
jquery 返回上一页
<input type="button" name="back" value="重新填写" onclick="javascript:history.back(-1);"/>
history.back(-1):直接返回当前页的上一页,数据全部消息,是个新页面
history.go(-1):也是返回当前页的上一页,不过表单里的数据全部还在
if(page+1>count_page){echo $count_page;
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步