cari

Rumah  >  Artikel  >  hujung hadapan web  >  js melaksanakan kod kesan khas gesaan input untuk perubahan warna semasa kemahiran matching_javascript

js melaksanakan kod kesan khas gesaan input untuk perubahan warna semasa kemahiran matching_javascript

WBOY
WBOYasal
2016-05-16 15:44:381074semak imbas

Contoh dalam artikel ini menerangkan kod kesan khas gesaan input untuk menukar warna dalam js apabila dipadankan. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini ialah kesan gesaan input js Apabila anda memasukkan huruf dalam kotak input, jika terdapat item dalam kategori yang disenaraikan di bawah yang sepadan dengan huruf anda, maka kandungan ini akan menjadi merah dan diserlahkan pada dasarnya gesaan lungsur turun kotak input, hanya dengan cara yang berbeza.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/js-tips-cha-color-codes/

Kod khusus adalah seperti berikut: 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>一种输入提示特效，匹配时换色</title>
<style type="text/css">
html, body { margin:20px; padding:0; }
body { color:#454444; padding: 0; font:12px/30px "宋体"; font-family:Tahoma;}
a { color:#454444; text-decoration:none; }
a:visited { color:#454444; }
a:hover, a:active, a:focus { color:#ff6842; text-decoration:underline; }
.fenlei {margin-bottom:30px; width:100%; float:left;}
.fenlei li { float:left; width:20%;}
.fenlei span,.fenlei span a,.fenlei span a:link,.fenlei span a:active,.fenlei span a:visited { color:#f35d61;}
.red{color:red;}
</style>
<script>
function e(a,f){
 for(var i=0,j=a.length;i<j;i++){
  f.call(a[i],i);
 }
}
function s(o){
 var a = document.getElementsByTagName("a"),
  r = new RegExp(o.value,"i");
 e(a,function(n){
  c = a[n].innerHTML;
  if(o.value!="" && r.test(c)){
   a[n].innerHTML = "<span>" + c.replace(/<[^>]*>/gi,"") + "</span>";
  }else{
   a[n].innerHTML = c.replace(/<[^>]*>/gi,"");
  }
 })
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
 <input type="text" name="textfield" id="textfield" onkeyup="s(this)" />
 <input type="submit" name="button" id="button" value="提交" />
</form>
<div class="fenlei">
 <ul>
 <li><a href="#" target="_blank">Adidas阿迪达斯</a></li>
 <li><a href="#" target="_blank">AFU阿芙</a></li>
 <li><a href="#" target="_blank">Anna Sui安娜苏</a></li>
 <li><a href="#" target="_blank">AFU阿芙</a></li>
 <li><a href="#" target="_blank">Anna Sui安娜苏</a></li>
 </ul>
</div>
<div class="fenlei">
 <ul>
 <li><a href="#" target="_blank">barbie芭比</a></li>
 <li><a href="#" target="_blank">Balo贝罗</a></li>
 <li><a href="#" target="_blank">barbie芭比</a></li>
 <li><a href="#" target="_blank">barbie芭比</a></li>
 <li><a href="#" target="_blank">Balo贝罗</a></li>
 </ul>
</div>
</body>
</html>

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Kaedah JS untuk melaksanakan penugasan menu lungsur turun kepada kemahiran text box_javascriptArtikel seterusnya：Kaedah JS untuk melaksanakan penugasan menu lungsur turun kepada kemahiran text box_javascript

Artikel berkaitan

Lihat lagi