javascript高亮效果的二种实现方法

本文实例讲述了javascript实现网页背景烟花效果的方法。分享给大家供大家参考。具体如下:

JavaScript实现更改网页背景与字体颜色的方法,javascript网页背景

本文实例讲述了JavaScript实现更改网页背景与字体颜色的方法。分享给大家供大家参考。具体分析如下:

JavaScript,通过点击按钮更改网页背景与字体的颜色,网页中有N个改变颜色的按钮,点击不同的按钮,网页的字体与背景就会改变成不同的颜色。很简单的JavaScript小程序。

一、基本目标

一打开网页首先提示问候信息“你好”

图片 1

网页中有N个改变颜色的按钮,其中返回是返回网页的默认颜色,背景是白的,字体是黑的

图片 2

点击不同的按钮,网页的字体与背景就会改变成不同的颜色。

本来想做出彩虹起色的,但原理完全一样就不多写按钮了。

二、基本思想

关键是对body标签与字体js提供id,使其在js中得到控制。本例提供了对js函数的应用。

三、制作过程

就一个简单的小页面,详情看注释:

复制代码 代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; 
<html xmlns=”; 
    <head> 
        <meta http-equiv=”Content-Type” content=”text/html;
charset=gb2312″ /> 
        <title>js换背景颜色</title> 
       
<!–这段同样可以分离到一个js文件里面去,但这段代码实在是太短了,就没有必要了–> 
        <script type=”text/javascript”> 
//onload相当于本网页的构造函数,onunload相当于本网页的析取函数 
function load() { 
    alert(“你好!”); 

function unload() { 
    alert(“再见!”); 

function Changecolor(bcolor, fcolor) { 
    //相当于对于字体<span
style=”color:传过来的fcolor”>这样,改变字体的颜色 
    document.getElementById(“body”).style.background = bcolor; 
    document.getElementById(“ziti”).style.color = fcolor; 

</script> 
    </head> 
   
<!–关键给整个网页与行内字体提供一个id,JS中的getElementById()方法能够轻松控制CSS中的东西–> 
    <body onload=”load()” onunload=”unload()” id=”body”> 
        <span id=”ziti”>js</span> 
        <br /> 
       
<!–注意在双引号中传递参数时,原来的双引号要变成单引号,onclick的值是一旦点击本按钮就被激发的东西–> 
        <input onclick=”Changecolor(‘#ff0000′,’#ffffff’)”
type=”button” 
            value=”赤” /> 
        <input onclick=”Changecolor(‘#ff9900′,’#ffffff’)”
type=”button” 
            value=”橙” /> 
        <input onclick=”Changecolor(‘#ffff00′,’#000000’)”
type=”button” 
            value=”黄” /> 
        …… 
        <input onclick=”Changecolor(‘#ffffff’,’#000000′)”
type=”button” 
            value=”返回” /> 
    </body> 
</html>

onunload()函数几乎仅在IE关闭本页面时中有效,而且本对话框不会在最前端,谷歌浏览器则没有任何效果。因此,此函数意义不大。

图片 3

希望本文所述对大家的javascript程序设计有所帮助。

本文实例讲述了JavaScript实现更改网页背景与字体颜色的方法。分享给大家供…

js高亮方法一:

javascript搜索框效果实现方法

   本文实例讲述了javascript搜索框效果实现方法。分享给大家供大家参考。具体实现方法如下:

  ?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>搜索框效果</title>

<script type="text/javascript">

function iniEvent() {

var txtSearch = document.getElementById("txtSearch");

txtSearch.onfocus = function () {

if (this.value == "请输入关键字" || this.value == "") {

this.value = "";

this.style.color = "black"; //修改文本框字体颜色

}

}

txtSearch.onblur = function () {

if (this.value == "请输入关键字" || this.value == "") {

this.value = "请输入关键字";

this.style.color = "red"; //修改文本框字体颜色

}

else {

this.style.color = "black";

}

}

}

</script>

</head>

<body onload="iniEvent()">

<!–文字离开如果文本框为空则显示红色的"请输入关键字"–>

<!–<label for="txtSearch">查找</label>

<input type="text" id="txtSearch" value="请输入关键字"

style="color:red" />–>

查找<input type="text" id="txtSearch" value="请输入关键字"

style="color:red" /><br /><input type="text" />

</body>

</html>

  希望本文所述对大家的javascript程序设计有所帮助。

本文实例讲述了javascript搜索框效果实现方法。分享给大家供大家参考。具体实现方法如下:
? 1 2 3 4 5 6 7 8 9…

js高亮方法一:

这里的网页背景烟花爆炸特效,不用说是用Js实现的,配合黑色背景效果最好,五颜六色的烟花效果,四散的烟花效果,以前发过一些网页上的烟花特效,本款类似,但代码更简洁。

复制代码 代码如下:

复制代码 代码如下:

运行效果如下图所示:

<script>
function HighLight(nWord){

<script>
function HighLight(nWord){

图片 4

if(nWord!=”){

if(nWord!=”){

具体代码如下:

var keyword = document.body.createTextRange();

var keyword = document.body.createTextRange();

<html>
<head>
<title>背景的烟花效果</title>
<style type="text/css">
<!--
body {
background-color: #000000;
}
-->
</style></head>
<body>
<script language="JavaScript">
var col = new Array('#ffffff','#fff000','#ffa000','#ff00ff','#00ff00','#0000ff','#ff0000');
var p='<div id="rearDiv" style="position:absolute;top:0px;left:0px">';
var n=0;
for (i=0;i<14;++i){
 n++;
 if (n=(col.length-1)) n=0;
 p=p+'<div style="position:relative;width:1px;height:1px;background:'+col[n]+';font-size:3px">.</div>';
}
p=p+"</div>";
document.write(p);
var Clrs = new Array('ff0000','00ff00','000aff','ff00ff','ffa500','ffff00','00ff00','ffffff','fffff0');
var sClrs = new Array('ffa500','55ff66','AC9DFC','fff000','fffff0');
var peepY;
var peepX;
var step = 5;
var tallyStep = 0;
var backColor = 'ffa000';
var Mtop = 250;
var Mleft = 250;
function dissilient() {
 peepY = window.document.body.clientHeight/3;
 peepX = window.document.body.clientWidth/8;
 enlarge();
 tallyStep+= step;
 reduce();
 T=setTimeout("dissilient()",20);
}
function enlarge(){
 for ( i = 0 ; i < rearDiv.all.length ; i++ ) {
  var c=Math.round(Math.random()*(Clrs.length-1));
  if (tallyStep < 90)
   rearDiv.all[i].style.background=backColor;
  if (tallyStep > 90)
   rearDiv.all[i].style.background=Clrs[c];
  rearDiv.all[i].style.top = Mtop + peepY*Math.sin((tallyStep+i*5)/3)*Math.sin(550+tallyStep/100);
  rearDiv.all[i].style.left = Mleft + peepY*Math.cos((tallyStep+i*5)/3)*Math.sin(550+tallyStep/100);
 }
}
function reduce(){
 if (tallyStep == 220) {
  tallyStep = -10;
  var k=Math.round(Math.random()*(sClrs.length-1));
  backColor = sClrs[k];
  Dtop = window.document.body.clientHeight - 250;
  Dleft = peepX * 3.5;
  Mtop = Math.round(Math.random()*Dtop);
  Mleft = Math.round(Math.random()*Dleft);
  document.all.rearDiv.style.top = Mtop+document.body.scrollTop;
  document.all.rearDiv.style.left = Mleft+document.body.scrollLeft;
  if ((Mtop < 20) || (Mleft < 20)) {
  Mtop += 90;
  Mleft += 90;
 }
 }
}
dissilient();
</script>
</body>
</html>

while(keyword.findText(nWord)){

while(keyword.findText(nWord)){

希望本文所述对大家的javascript程序设计有所帮助。

keyword.pasteHTML(“<span style=’color:red;’>” + keyword.text +
“</span>”);

keyword.pasteHTML(“<span style=’color:red;’>” + keyword.text +
“</span>”);

您可能感兴趣的文章:

  • js点击弹出div层实现可拖曳的弹窗效果
  • CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
  • js+CSS实现弹出居中背景半透明div层的方法
  • JS弹出可拖拽可关闭的div层完整实例
  • JS实现带圆弧背景渐变效果的导航菜单代码
  • JS实现进入页面时渐变背景色的方法
  • JavaScript实现点击单元格改变背景色的方法
  • javascript设置页面背景色及背景图片的方法
  • js获取及修改网页背景色和字体色的方法
  • JavaScript实现的背景自动变色代码
  • js点击列表文字对应该行显示背景颜色的实现代码
  • 神奇!js+CSS+DIV实现文字颜色渐变效果
  • JavaScript+html5
    canvas绘制渐变区域完整实例
  • JavaScript实现弹出DIV层同时页面背景渐变成半透明效果

keyword.moveStart(‘character’,1);

keyword.moveStart(‘character’,1);

}

}

}

}

}

}

function highword(nWord){

function highword(nWord){

var array = nWord.split(“,”);

var array = nWord.split(“,”);

for(var i=0;i<array.length;i++){

for(var i=0;i<array.length;i++){

HighLight(array[i]);

HighLight(array[i]);

}

}

}
</script>

}
</script>

<body onload=”highword(‘li,jin’)”>

<body onload=”highword(‘li,jin’)”>

<p>liujinzhong liujinzhong liuzhong</p>

<p>liujinzhong liujinzhong liuzhong</p>

</body>

</body>

js高亮方法二:

js高亮方法二:

复制代码 代码如下:

复制代码 代码如下:

<html>
<head>
<title>Test Page</title>
<script type=”text/javascript”>
<!–
function highLight(ele,keys)
{
var reg = new RegExp(“(” + keys.replace(/,/,”|”) + “)”,”g”);

<html>
<head>
<title>Test Page</title>
<script type=”text/javascript”>
<!–
function highLight(ele,keys)
{
var reg = new RegExp(“(” + keys.replace(/,/,”|”) + “)”,”g”);

ele.innerHTML = ele.innerHTML.replace(reg,”<font
color=\”red\”>$1</font>”);
}

ele.innerHTML = ele.innerHTML.replace(reg,”<font
color=\”red\”>$1</font>”);
}

window.onload = function()
{
highLight(document.getElementsByTagName(“p”)[0],”li,jin”);
}
//–>
</script>
</head>

window.onload = function()
{
highLight(document.getElementsByTagName(“p”)[0],”li,jin”);
}
//–>
</script>
</head>

<body>
<p>liujinzhong liujinzhong liuzhong</p>
</body>
</html>

<body>
<p>liujinzhong liujinzhong liuzhong</p>
</body>
</html>

您可能感兴趣的文章:

  • angularjs实现搜索的关键字在正文中高亮出来
  • Angularjs实现搜索关键字高亮显示效果
  • jsp网页搜索结果中实现选中一行使其高亮
  • 用JS将搜索的关键字高亮显示实现代码
  • 用js查找法实现当前栏目的高亮显示的代码
  • 两种简单实现菜单高亮显示的JS类代码
  • Javascript实现的CSS代码高亮显示
  • javascript
    关键字高亮显示实现代码
  • js
    玩转正则表达式之语法高亮
  • JavaScript实现的搜索及高亮显示功能示例

复制代码 代码如下: script function
HighLight(nWord){ if(nWord!=”){ var keyword =
document.body.createTextRange(); while(keyword.findText(nWord)){
keyw…

相关文章