Artikel ini menjelaskan metode JS+CSS untuk meniru fungsi pencarian karakter web browser. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Salin kode sebagai berikut: <Html>
<head>
<title> js+css meniru fungsi pencarian karakter web </iteme>
<Tipe Gaya = Teks/CSS>
TUBUH {
Font-size: 12px; Spasi surat: 1pt; Line-Height: 22px; Margin-kiri: 5pt; Margin-top: 5pt
}
#scontentMain {
Tinggi: 30px; Posisi: Absolute; Atas: 28px; Lebar: 228px
}
#scontentbar {
Border-Bottom: Black 1px padat; Border-left: Black 1px padat; Border-Right: Black 1px padat; Border-Top: Black 1px padat; Kursor: Tangan; Tinggi: 15px; Padding-bottom: 1px; Padding-left: 1px; Padding-Right: 1px; Padding-top: 1px; Posisi: Absolute; Atas: 5px; Lebar: 100%
}
#scontentsub {
Posisi: Absolute; Atas: 28px; Lebar: 100%
}
A.a1: hover {
Border-Bottom: #4A8FF2 1PX SOLID; Border-left: #4A8FF2 1px padat; Border-Right: #4a8ff2 1px padat; Border-Top: #4A8FF2 1px Solid; Line-Height: 13pt; Lebar: 83px; 12px;: 1869fe; Align: Center
}
A.a1: link {
Warna: #FFFFFF; Dekorasi Teks: Tidak Ada; 12px; Align: Center
}
Td {
Ukuran font: 12px
}
.pos {
Posisi: Kerabat
}
</tyle>
</head>
<body>
<br> China <br> Jinzhou <br> Perpisahan dengan Perang Dunia <br> luo <br> Huang Loss <br> Jianghuai <br> BMW <br> berlebih
<Bahasa skrip = javascript>
var dragapproved = false
var zcor, xcor, ycor
function drag_onClick () {
if (search1.drag.checked == true) dragapproved = false
lain dragapproved = true
}
fungsi movescontentmain () {
if (event.button == 1 && dragapproved && search1.drag.checked == true) {
zcor.style.pixelleft = tempvar1+event.clientx-xcor
zcor.style.pixeltop = tempvar2+event.clienty-ycor
leftpos = document.all.scontentmain.style.pixelleft-document.body.scrollleft
toppos = document.all.scontentmain.style.pixeltop-document.body.scrolltop
mengembalikan false
}
}
fungsi dragscontentmain () {
if (! document.all)
Kembali
if (event.srcelement.id == "scontentBar") {
dragapproved = true
zcor = scontentmain
tempvar1 = zcor.style.pixelleft
tempvar2 = zcor.style.pixeltop
xcor = event.clientx
ycor = event.clienty
Document.onMouseMove = movescontentMain
}
}
document.onmousedown = dragscontentMain
document.onmouseup = fungsi baru ("dragapproved = false")
Fungsi AA (E)
{
if (e == 0) alert ("/n- = halaman pencarian halaman 1.0 =/n/n/n- menulis ulang beberapa kode/n- Perbaiki bug lompat drag mouse,/n- terus memilih apakah akan seret ...");
kembali;
}
fungsi cose ()
{
Jika (konfirmasi ("Jendela ini akan segera ditutup. Jika Anda mengonfirmasi, tekan OK! /N /N jika Anda ingin membuka kembali jendela ini, silakan segarkan halamannya."))
scontentmain.style.display = 'tidak ada'
kalau tidak
scontentmain.style.display = ''
}
document.write('<div id="scontentmain"><form name="search1" onSubmit="return findInPage(this.Word.value);"><div id="scontentbar">Click the check box below, hold down and drag</div><div id="scontentsub"" style="visibility: show"><table cellpadding="2" cellpacing="0" bordercolorlight = "#000000" bordercolordark = "#fffff" bgcolor = "#0099cc" class = font1> <tr bgcolor = "#2d96ff"> <td colspan = "2" Align = "Center"> <input type = "Teks" name = "Word =" Word = " onFocus=window.document.search1.Word.value="" style="background-image: url()" ></td></tr><tr bgcolor="#CCCCCC"><td> <input type="checkbox" name="drag" value="Search" LANGUAGE=javascript onclick="return drag_onclick()">Drag the window with the mouse<a href = "#top"> </a> </td> <td align = "center"> <input type = "kirim" name = "kirim" value = "cari"> </td> </tr> </form> </able> </div> </div> ');
var w = document.body.clientwidth-450
var h = 190
w+= document.body.scrollleft
h+= document.body.scrolltop
var leftpos = w
var toppos = h
scontentmain.style.left = w
scontentmain.style.top = h
fungsi ondisplay () {
if (scontentsub.style.display == '')
scontentsub.style.display = 'tidak ada'
kalau tidak
scontentsub.style.display == ''
}
function offdisplay () {
if (scontentsub.style.display == 'none')
scontentsub.style.display = ''
kalau tidak
scontentsub.style.display == 'tidak ada'
}
fungsi staticize () {
w2 = document.body.scrollleft+leftpos
h2 = document.body.scrolltop+toppos
scontentmain.style.left = w2
scontentmain.style.top = h2
}
window.onscroll = staticize
fungsi getword ()
{
var tr
}
Fungsi Findword (W)
{
untuk (var i = 0; i <wordlist.options.length; i ++)
if (wordlist.options [i] .text == w)
{
WordList.Options [i] .DoSted = true
Output.value = WordExpln [i]
Result.style.visibility = "visible"
kembali benar
}
mengembalikan false
}
var candrag = 0, cangetWord = 0
var oldtop = 0, oldscrolltop = 0
var wordexpln = array baru ()
var g_xmlhttp
document.onmouseMove = getword
var ns4 = (document.layers);
var ie4 = (document.all);
var win = ini;
var n = 0;
Fungsi FindInpage (str)
{
var txt, i, ditemukan;
if (str == "")
mengembalikan false;
if (ns4)
{
if (! win.find (str))
while (win.find (str, false, true))
n ++;
kalau tidak
n ++;
if (n == 0) waspada (str + "... teks yang Anda cari tidak ada. /n /n tolong coba masukkan kata kunci di halaman dan cari lagi! /n /n dan berhati -hatilah untuk tidak masuk"? "atau": "untuk menemukan juga !!!");
}
if (ie4)
{
txt = win.document.body.createTextrange ();
untuk (i = 0; i <= n && (found = txt.findText (str))! = false; i ++)
{
txt.movestart ("karakter", 1);
txt.moveend ("TextEdit");
}
if (ditemukan)
{
txt.movestart ("karakter", -1);
txt.findText (str);
txt.select ();
txt.scrollintoview ();
n ++; }
kalau tidak
{
if (n> 0)
{
n = 0;
findInpage (str);
}
kalau tidak
waspada (str + "... teks yang Anda cari tidak ada. /N /N tolong coba masukkan kata kunci di halaman dan cari lagi! /n /n dan harap berhati -hati untuk tidak memasukkan"? "atau": "untuk menemukan juga !!!");
}
}
mengembalikan false;
}
self.onError = null;
currentX = currenty = 0;
yang mana = null;
lastscrollx = 0; lastscrollly = 0;
Ns = (document.layers)? 1: 0;
Yaitu = (document.all)? 1: 0;
</script>
</body>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.