js实例代码（javascript编程例子）

今天给各位分享js实例代码的知识，其中也会对javascript编程例子进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、js实现动态改变字体大小代码
• 2、js鼠标悬停显示文字实例
• 3、实例代码详解jquery.slides.js
• 4、JS操作Cookie写入和读取实例代码
• 5、JS实现随机化快速排序的实例代码
• 6、JS隐藏号码中间4位代码实例

js实现动态改变字体大小代码

在很多大网站上为了提高用户方便阅读文字，都提供有字体大小选择功能，以适应不同年龄段人群的阅读需求，其实这种功能实现起来也很简单，修改起来也方便，字体大号由你来定，默认字体大小可以CSS页面中定义，一般网页的标准字体是9pt，也就是12px；

实例代码一：

!DOCTYPE

html

html

head

title修改字体大小.html/title

meta

http-equiv="keywords"

content="keyword1,keyword2,keyword3"

meta

http-equiv="description"

content="this

is

my

page"

meta

http-equiv="content-type"

content="text/html;

charset=UTF-8"

!--link

rel="stylesheet"

type="text/css"

href="./styles.css"--

style

type="text/css"

div{

border:1px

red

solid;

width:455px;

font-size:16px;

}

.max{

font-size:20px;

}

.moren{

font-size:16px;

}

.min{

font-size:12px;

}

/style

script

type="text/javascript"

//此种方式降低了js和CSS的耦合性

function

changeFontSize(fontStyle){

//

获取节点对象

var

divNode

=

document.getElementsByTagName("div")[0];

//

设置该节点的Name属性以及属性值

divNode.className=fontSize;

}

/*

function

changeFontSize2(fontSize){

//

获取节点对象

var

divNode

=

document.getElementsByTagName("div")[0];

divNode.style.fontSize=fontSize;

}

*/

/script

/head

body

a

href="javascript:void(0)"

onclick="changeFontSize2('20px')"

class="max"大号/a

a

href="javascript:void(0)"

onclick="changeFontSize2('16px')"

class="moren"中号/a

a

href="javascript:void(0)"

onclick="changeFontSize2('12px')"

class="min"小号/a

div

这里呢就是显示的文字，通过点击上面的超链接改变此字体大小br/

这里呢就是显示的文字，通过点击上面的超链接改变此字体大小br/

这里呢就是显示的文字，通过点击上面的超链接改变此字体大小br/

这里呢就是显示的文字，通过点击上面的超链接改变此字体大小br/

这里呢就是显示的文字，通过点击上面的超链接改变此字体大小br/

这里呢就是显示的文字，通过点击上面的超链接改变此字体大小br/

这里呢就是显示的文字，通过点击上面的超链接改变此字体大小br/

这里呢就是显示的文字，通过点击上面的超链接改变此字体大小br/

这里呢就是显示的文字，通过点击上面的超链接改变此字体大小br/

这里呢就是显示的文字，通过点击上面的超链接改变此字体大小br/

这里呢就是显示的文字，通过点击上面的超链接改变此字体大小br/

/div

/body

/html

实例方法二：

html

head

titleJavaScript设置网页字体/title

style

body{

font-size:9pt;

}

/style

/head

body

div

id=zoom这是一段示例文字，你可以点击下边选择不同字号的字体，这段文字会随即改变大小。脚本之家。/div

SCRIPT

language=JavaScript

function

doZoom(size){

document.getElementById('zoom').style.fontSize=size+'pt'

}

/SCRIPT

P

align=right选择字号：[

A

href="javascript:doZoom(13)"13pt（超大）/A

A

href="javascript:doZoom(10.5)"10.5pt（中型）/A

A

href="javascript:doZoom(9)"9pt（标准）/A

]

/body

/html

js鼠标悬停显示文字实例

一、首先需要div布局：

!DOCTYPE html

html lang="en"

head

meta charset="UTF-8"

titlejs悬停/title

style type="text/css"

p {

width: 200px;

height: 200px;

background-color: skyblue;

text-align: center;

line-height: 200px;

}

/style

/head

body

p id="txt"我是一个DIV/p

script type="text/javascript"

var txt = document.getElementById('txt');

txt.setAttribute("title","鼠标悬停了");

/script

/body

/html

二、div实在的在开发工具里面的代码效果如下截图：

三、这段代码最主要的重点是如下：

script type="text/javascript"

var txt = document.getElementById('txt');

txt.setAttribute("title","鼠标悬停了");

/script

四、实际代码在浏览器的渲染如下：

实例代码详解jquery.slides.js

Slides

–

是一个简单的，容易定制和风格化，的jQuery幻灯片插件。

Slides提供褪色或幻灯片过渡效果，图像淡入淡出，图像预压，自动生成分页，循环，自动播放的自定义等很多选项。

用Slides插件，你可以随机播放幻灯片，设定那一套您想要开始幻灯片。它附带充分的说明和示例。

废话不多说了，直接给大家贴代码了

$(function(){

$("#slides").slidesjs({

play:

{

active:

true,

//

[boolean]

Generate

the

play

and

stop

buttons.

//

You

cannot

use

your

own

buttons.

Sorry.

effect:

"slide",

//

[string]

Can

be

either

"slide"

or

"fade".

interval:

,

//

[number]

Time

spent

on

each

slide

in

milliseconds.

auto:

false,

//

[boolean]

Start

playing

the

slideshow

on

load.

swap:

true,

//

[boolean]

show/hide

stop

and

play

buttons

pauseOnHover:

false,

//

[boolean]

pause

a

playing

slideshow

on

hover

restartDelay:

//

[number]

restart

delay

on

inactive

slideshow

}

});

});

前台：

!doctype

html

head

style

/*

Prevents

slides

from

flashing

*/

#slides

{

display:none;

}

/style

script

src=""/script

script

src="jquery.slides.min.js"/script

script

$(function(){

$("#slides").slidesjs({

width:

,

height:

});

});

/script

/head

body

div

id="slides"

img

src=""

img

src=""

img

src=""

img

src=""

img

src=""

/div

/body

以上内容是关于jquery.slides.js的全部代码，希望大家喜欢。

JS操作Cookie写入和读取实例代码

写入cookie实例！

复制代码

代码如下:

var

u

=

"value=123";

document.cookie

=

u;

读取cookie实例,读取value的值！

复制代码

代码如下:

var

c_name="value";

//

变量名

if

(document.cookie.length

0)

{

c_start

=

document.cookie.indexOf(c_name

+

"=")

if

(c_start

!=

-1)

{

c_start

=

c_start

+

c_name.length

+

1

c_end

=

document.cookie.indexOf(";",

c_start)

if

(c_end

==

-1)

c_end

=

document.cookie.length

//

document.write(document.cookie.substring(c_start,c_end)+"br");

var

sss=

unescape(document.cookie.substring(c_start,

c_end))

//

取出值

alert(sss)

}

}

JS实现随机化快速排序的实例代码

算法的平均时间复杂度为O(nlogn)。但是当输入是已经排序的数组或几乎排好序的输入，时间复杂度却为O(n^2)。为解决这一问题并保证平均时间复杂度为O(nlogn)的方法是引入预处理步骤，它惟一的目的是改变元素的顺序使之随机排序。这种预处理步骤可在O(n)时间内运行。能够起到同样作用的另一种简单方法是在算法中引入一个随机元素，这可以通过随机地选择拆分元素的主元来实现。随机选择主元的结果放宽了关于输入元素的所有排列的可能性相同的步骤。引入这一步来修正原先的快速排序，可得到下面所示的随机化快速排序。新算法只是在区间[low…high]中一致随机地选择一个索引v，并将A[v]和A[low]交换，然后按照原来的快速排序算法继续。这里，parseInt(Math.random()*(high-low+1)

+

low)返回一个在low和high之间的数。

复制代码

代码如下:

/****************************************

算法：split

输入：数组A[low...high]

输出：

1.若有必要，输出按上述描述的重新排列的数组A;

2.划分元素A[low]的新位置w;

****************************************/

function

split(array,

low,

high)

{

var

i

=

low;

var

x

=

array[low];

for(var

j

=

low

+

1;

j

=

high;

j++)

{

if(array[j]

=

x)

{

i

++;

if(i

!=

j)

{

var

temp

=

array[i];

array[i]

=

array[j];

array[j]

=

temp;

}

}

}

temp

=

array[low];

array[low]

=

array[i];

array[i]

=

temp;

return

i;

}

/****************************************

算法：rquicksort

输入：A[0...n-1]

输出：按非降序排列数组A[0...n-1]

rquicksort(A,

0,

n-1);

****************************************/

function

rquicksort(array,

low,

high)

{

if(low

high)

{

/******随机化拆分元素的主元*******/

var

v

=

parseInt(Math.random()*(high-low+1)

+

low);

var

tmp

=

array[low];

array[low]

=

array[v];

array[v]

=

tmp;

/******随机化拆分元素的主元*******/

var

w

=

split(array,

low,

high);

rquicksort(array,

low,

w

-1);

rquicksort(array,

w

+1,

high);

return

array;

}

}

var

array

=

[33,

22,

11,

88,

23,

32];

array

=

rquicksort(array,

0,

array.length-1);

console.log(array);

JS隐藏号码中间4位代码实例

本文实例为大家分享了JS隐藏号码中间4位的具体代码，供大家参考，具体内容如下

function

resetPhone(phone)

{

var

str

=

String(phone)

var

len

=

str.length;

var

prev,next;

if

(len

=

7)

{

prev

=

str.slice(-len,-7)

next

=

str.slice(-3)

str

=

prev+"****"+next

}

else

if

(len

7

len

=

6)

{

prev

=

str.slice(-len,-4)

next

=

str.slice(-2)

str

=

prev

+

"**"

+

next

}

console.log(str)

return

str

}

上面可以正常使用，正则更加方便，但是如果中间连续重复数字有点小问题（如下面的正则方式）。

function

resetPhone(phone)

{

var

str

=

String(phone)

var

len

=

str.length;

if

(len

=

7)

{

var

reg

=

str.slice(-7,

-3)

return

str.replace(reg,

"****")

}

else

if

(len

7

len

=

6)

{

//1234567

var

reg

=

str.slice(-4,

-2)

return

str.replace(reg,

"**")

}

}

以上所述是小编给大家介绍的JS隐藏号码中间4位详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:JS中实现隐藏部分姓名或者电话号码的代码JS中input表单隐藏域及其使用方法JS实现“隐藏与显示”功能(多种方法)javascript点击按钮实现隐藏显示切换效果AngularJS实现元素显示和隐藏的几个案例JS实现鼠标点击展开或隐藏表格行的方法jquery和js实现对div的隐藏和显示方法js设置控件的隐藏与显示的两种方法js判断元素是否隐藏的方法javascript获取隐藏元素(display:none)的高度和宽度的方法

js实例代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于javascript编程例子、js实例代码的信息别忘了在本站进行查找喔。