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(var_export($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,'')" />

 

 

 

/* 圖片轉base6四、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">補&nbsp;押&nbsp;金 ：</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;