Html代碼常用功能，很資源噢！（中）

. 將徹底屏蔽鼠標右鍵

<table border oncontextmenu=return(false)><td>no</table> 可用于Table

2. <body> 取消選取、防止復制

3. 不準粘貼

4. 防止復制

5. <link rel="Shortcut Icon" href="favicon.ico"> IE地址欄前換成自己的圖標

6. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夾中顯示出你的圖標

7. <input style="ime-mode:-Disabled"> 關閉輸入法

8. 永遠都會帶著框架

if (window == top)top.location.href = "frames.htm"; //frames.htm為框架網頁

// --></script>

9. 防止被人frame

<SCRIPT LANGUAGE=javascript><!--

if (top.location != self.location)top.location=self.location;

// --></SCRIPT>

10. 網頁將不能被另存為

11. <input type=button value=查看網頁源代碼

onclick="window.location = `view-source:`+ http://www.51js.com/`";>

12.刪除時確認

<a href=`javascript：if(confirm("確實要刪除嗎?"location="boos.asp?&areyou=刪除&page=1"`>刪

除</a>

13. 取得控件的絕對位置

//javascript

function getIE(E){

var t=e.offsetTop;

var l=e.offsetLeft;

while(e=e.offsetParent){

t+=e.offsetTop;

l+=e.offsetLeft;

}

alert("top="+t+"/nleft="+l);

}

</script>

//VBScript

function getIE()

dim t,l,a,b

set a=document.all.img1

t=document.all.img1.offsetTop

l=document.all.img1.offsetLeft

while a.tagName<>"BODY"

set a = a.offsetParent

t=t+a.offsetTop

l=l+a.offsetLeft

wend

msgbox "top="&t&chr(13)&"left="&l,64,"得到控件的位置"

end function

--></script>

14. 光標是停在文本框文字的最后

function cc()

{

var e = event.srcElement;

var r =e.createTextRange();

r.moveStart(`character`,e.value.length);

r.collapse(true);

r.select();

}

</script>

15. 判斷上一頁的來源

javascript：

document.referrer

16. 最小化、最大化、關閉窗口

本例適用于IE

17.屏蔽功能鍵Shift,Alt,Ctrl

function look(){

if(event.shiftKey)

alert("禁止按Shift鍵!"; //可以換成ALT　CTRL

}

document.onkeydown=look;

</script>

18. 網頁不會被緩存

或者<META HTTP-EQUIV="expires" CONTENT="0">

19.怎樣讓表單沒有凹凸感？

或

<input type=text style="border-left:none; border-right:none; border-top:none; border-bottom:

1 solid #000000"></textarea>

20.<div><span>&<layer>的區別？

<div>(division)用來定義大段的頁面元素，會產生轉行

<span>用來定義同一行內的元素，跟<div>的唯一區別是不產生轉行

<layer>是ns的標記，ie不支持，相當于<div>

21.讓彈出窗口總是在最上面:

<body>

22.不要滾動條?

讓豎條沒有:

</body>

讓橫條沒有:

</body>

兩個都去掉？更簡單了

</body>

23.怎樣去掉圖片鏈接點擊后，圖片周圍的虛線？

24.電子郵件處理提交表單

</form>

25.在打開的子窗口刷新父窗口的代碼里如何寫？

window.opener.location.reload()

26.如何設定打開頁面的大小

<body>

打開頁面的位置<body>

27.在頁面中如何加入不是滿鋪的背景圖片,拉動頁面時背景圖不動

<style>

body

{background-image:url(logo.gif); background-repeat:no-repeat;

background-position:center;background-attachment: fixed}

</style>

String 對象用于處理已有的字符塊。

JavaScript 字符串

一個字符串用于存儲一系列字符就像 "John Doe".

一個字符串可以使用單引號或雙引號：

實例

var carname="Volvo XC60";

var carname='Volvo XC60';

你使用位置（索引）可以訪問字符串中任何的字符：

實例

var character=carname[7];

字符串的索引從零開始, 所以字符串第一字符為 [0],第二個字符為 [1], 等等。

你可以在字符串中使用引號，如下實例：

實例

var answer="It's alright";

var answer="He is called 'Johnny'";

var answer='He is called "Johnny"';

或者你可以在字符串中使用轉義字符使用引號：

實例

var answer='It's alright';

var answer="He is called "Johnny"";

字符串（String）

字符串（String）使用長度屬性length來計算字符串的長度：

實例

var txt="Hello World!";

document.write(txt.length);

var txt="ABCDEFGHIJKLMNOPQRSTUVWXYZ";

document.write(txt.length);

在字符串中查找字符串

字符串使用 indexOf() 來定位字符串中某一個指定的字符首次出現的位置：

實例

var str="Hello world, welcome to the universe.";

var n=str.indexOf("welcome");

如果沒找到對應的字符函數返回-1

lastIndexOf() 方法在字符串末尾開始查找字符串出現的位置。

內容匹配

match()函數用來查找字符串中特定的字符，并且如果找到的話，則返回這個字符。

實例

var str="Hello world!";

document.write(str.match("world") + "<br>");

document.write(str.match("World") + "<br>");

document.write(str.match("world!"));

替換內容

replace() 方法在字符串中用某些字符替換另一些字符。

實例

str="Please visit Microsoft!"

var n=str.replace("Microsoft","w3cschool");

字符串大小寫轉換

字符串大小寫轉換使用函數 toUpperCase() / toLowerCase():

實例

var txt="Hello World!"; // String

var txt1=txt.toUpperCase(); // txt1 文本會轉換為大寫

var txt2=txt.toLowerCase(); // txt2 文本會轉換為小寫

字符串轉為數組

字符串使用split()函數轉為數組:

實例

txt="a,b,c,d,e" // String

txt.split(","); // 使用逗號分隔

txt.split(" "); // 使用空格分隔

txt.split("|"); // 使用豎線分隔

特殊字符

Javascript 中可以使用反斜線（\）插入特殊符號，如：撇號,引號等其他特殊符號。

查看如下 JavaScript 代碼:

var txt="We are the so-called "Vikings" from the north.";

document.write(txt);

在JavaScript中，字符串的開始和停止使用單引號或雙引號。這意味著，上面的字符串將被切成： We are the so-called

解決以上的問題可以使用反斜線來轉義引號：

var txt="We are the so-called \"Vikings\" from the north.";

document.write(txt);

JavaScript將輸出正確的文本字符串：We are the so-called "Vikings" from the north.

下表列出其他特殊字符，可以使用反斜線轉義特殊字符：

代碼	輸出
\'	單引號
\"	雙引號
\	斜桿
\n	換行
\r	回車
\t	tab
\b	空格
\f	換頁

字符串屬性和方法

屬性:

length
prototype
constructor

方法:

charAt()
charCodeAt()
concat()
fromCharCode()
indexOf()
lastIndexOf()
match()
replace()
search()
slice()
split()
substr()
substring()
toLowerCase()
toUpperCase()
valueOf()

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

s點擊下載文件

//點擊下載文件寫法
const w = window.open('about:blank');
w.location.href='文件url'

PC端中px轉vw與vh，sass寫法

//PC端 px轉vwvh 寫法 sass
@function px-vw($px) {
  @return $px*100/3840*1vw
}
@function px-vh($px) {
  @return $px*100/2160*1vh
}

sass實現縱向滾動條，并改變滾動條樣式

//滾動條
height:300px;
overflow-x: hidden;
overflow-y: scroll;
&::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
/*定義滾動條軌道 內陰影+圓角*/
&::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
    border-radius: 10px;
}
/*定義滑塊 內陰影+圓角*/
&::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
    background-color: #1890ff;
}

css實現豎條背景內部百分比設置

//豎條背景
background-size:8px;
background-image: linear-gradient(90deg,#52e9ff 50%,#fff);

sass禁止文字換行在新樣式中引用樣式

//禁止文字換行
.ellipsis{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

//引用樣式class
@extend .ellipsis;

css改變鼠標指針為手型

//改變鼠標指針為手型
cursor: pointer;

css背景樣式漸變為透明色

//背景顏色漸變 transparent
background-image: linear-gradient(90deg, red, transparent);

sass中修改引用了antd組件的樣式

//sass修改antd樣式
:global(.className){}

css取第一個子元素與取最后一個子元素

//css取第一個
&:nth-child{}
&:first-child{}
//css取最后一個
&:last-child{}

js保留一位小數

在線咨詢

上一篇：一篇文章帶你了解CSS 文本樣式
下一篇：一文揭露各類劫持瀏覽器主頁手段，附火絨修復方式

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Html代碼常用功能，很資源噢！（中）

您的項目需求