本帖最后由 群发软件 于 2017-5-30 00:40 编辑
恶搞网站，当运行下列代码的时候，会一直弹出消息框，怎么单击都不会结束，而且无法关闭浏览器，只能通过关闭进程结束，读者可以试验试验，恶搞一下，很好玩的
代码：
[javascript] view plain copy
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8" type="text/javascript">
- <title>JavaScript</title>
- <script>
- var str = new Array("你受骗了","你真的受骗了","你真笨呀");
- while(true)
- {
- for(i=0;i<str.length;i++)
- {
- window.alert(str);
- }
- }
- </script>
- </head>
- <body>
- </body>
- </html>
下面我们通过一个例子，编写第一个JavaScript程序。
通过它可说明JavaScript的
脚本是怎样被嵌入到HTML文档中的。test1.html文档：
图1-1 程序运行的结果
说明：
test1.html是HTML文档，其标识格式为标准的HTML格式;
如同HTML标识语言一样， JavaScript程序代码是一些可用字处理软件浏览的文本，它在描述页面的HTML相关区域出现。
JavaScript代码由 <Script Language ="JavaScript">...</Script>说明。在标识 <Script Language ="JavaScript">...</Script> 之间就可加入JavaScript脚本。
alert()是JavaScript的窗口对象方法，其功能是弹出一个具有OK对话框并显示()中的字符串。
通过<!-- ...//-->标识说明：若不认识JavaScript代码的浏览器，则所有在其中的标识均被忽略;若认识，则执行其结果。使用注释这是一个好的编程习惯，它使其他人可以读懂你的语言。
JavaScript 以 </Script>标签结束。
从上面的实例分析中我们可以看出，编写一个JavaScript程序确实非常容易的
用js可以做许多有趣的小动画，下面是一个简易时钟的小例子，可能样式写的有点多了,下方最终效果图（作为老司机的我有点小完美的强迫症哈哈哈...）
<!DOCTYPE html>
<html>
<head>
<title>时钟</title>
<meta charset = "utf-8">
<style type="text/css">
span{
margin: 0;
padding: 0;
}
#box{
width: 600px;
height: 600px;
border: 1px solid rgb(99,99,99);
border-radius: 50%;
margin: 50px auto;
position: relative;
background: rgb(155,155,155);
box-shadow: 0 0 20px rgb(99,99,99);
}
#round{
width: 540px;
height: 540px;
border: 1px solid rgb(99,99,99);
border-radius: 50%;
position: absolute;
top: 30px;
left: 30px;
box-shadow: 0 0 20px rgb(99,99,99) inset;
}
#round span{
color: white;
font-size: 50px;
position: absolute;
}
#L{
left: 242px;
top: 10px;
}
#F{
left: 254px;
bottom: 10px;
}
#I{
left: 10px;
top: 248px;
}
#C{
right: 10px;
bottom: 242px;
}
#A{
right: 130px;
top: 45px;
}
#B{
right: 45px;
top: 130px;
}
#D{
right: 45px;
bottom: 130px;
}
#E{
right: 130px;
bottom: 45px;
}
#K{
left: 130px;
top: 45px;
}
#J{
left: 45px;
top: 130px;
}
#H{
left: 45px;
bottom: 130px;
}
#G{
left: 130px;
bottom: 45px;
}
#down{
width: 40px;
height: 40px;
background: rgb(39,39,39);
border-radius: 50%;
position: absolute;
left: 250px;
top: 250px;
}
#sec{
width: 240px;
height: 3px;
background: red;
position: absolute;
left: 240px;
top: 269px;
transform-origin: 31px;
}
#min{
width: 220px;
height: 8px;
background: rgb(67,91,32);
position: absolute;
left: 240px;
top: 266px;
transform-origin: 31px;
}
#hour{
width: 190px;
height: 12px;
background: rgb(200,20,24);
position: absolute;
left: 240px;
top: 264px;
transform-origin: 31px;
}
#up{
width: 20px;
height: 20px;
background: white;
border-radius: 50%;
position: absolute;
left: 260px;
top: 260px;
}
</style>
</head>
<body>
<div id="box">
<div id="round">
<span id="A">1</span>
<span id="B">2</span>
<span id="C">3</span>
<span id="D">4</span>
<span id="E">5</span>
<span id="F">6</span>
<span id="G">7</span>
<span id="H">8</span>
<span id="I">9</span>
<span id="J">10</span>
<span id="K">11</span>
<span id="L">12</span>
<div id="down"></div>
<div id="sec"></div>
<div id="min"></div>
<div id="hour"></div>
<div id="up"></div>
</div>
<script type="text/javascript">
// 获取元素
var hour = document.getElementById('hour');
var min = document.getElementById('min');
var sec = document.getElementById('sec');
// 定义刷新函数
function fresh(){
// 获取此刻的时间
var date = new Date();
var sec2 = date.getSeconds();
var min2 = date .getMinutes();
var hour2 = date . getHours();
// 12时制转换
hour2 = hour2 > 12 ? hour2 - 12 : hour2;
// 秒针 1s转过的角度为6度，因为起始位置在3点处，需要减去90度。
var s = sec2 * 6 - 90;
sec.style.transform = 'rotate('+ s + 'deg)';
// 分针 让分针随秒针的旋转而旋转
var a = sec2 /60 * 6;
var b = min2 * 6 - 90;
var c = a + b;
min.style.transform = 'rotate('+ c + 'deg)';
// 时针 让时针随分针的旋转而旋转
var d = min2 / 60 * 30;
var e = hour2 * 30 - 90;
var f = d + e;
hour.style.transform = 'rotate('+ f + 'deg)';
}
fresh();
//每隔1s刷新一次
setInterval(function () {
fresh();
},1000);
</script>
</div>
</body>
</html>
js倒计时代码，可以精确到天和精确到秒
我们这里只要自己定义一下s与urodz的值就可以随意定义任何日期或节日的倒计时功能了，各位朋友可加以修改。
精确到天的倒计时
复制代码代码如下:
<script language="JavaScript">
<!-- // (c) Henryk Gajewski
var urodz= new Date("09/19/2013");
var s="中秋节";
var now = new Date();
var ile = urodz.getTime() - now.getTime();
var dni = Math.floor(ile / (1000 * 60 * 60 * 24));
if (dni > 1)
document.write(""+s+"还有"+dni +"天")
else if (dni == 1)
document.write("只有2天啦！")
else if (dni == 0)
document.write("只有1天啦！")
else
document.write("好象已经过了哦！");
// -->
精确到秒的javascript倒计时代码
HTML代码:
复制代码代码如下:
<form name="form1">
<div align="center" align="center">
<center>离2010年还有:<br>
<input type="textarea" name="left" size="35" style="text-align: center">
</center>
</div>
</form>
<script LANGUAGE="javascript">
startclock()
var timerID = null;
var timerRunning = false;
function showtime() {
Today = new Date();
var NowHour = Today.getHours();
var NowMinute = Today.getMinutes();
var NowMonth = Today.getMonth();
var NowDate = Today.getDate();
var NowYear = Today.getYear();
var NowSecond = Today.getSeconds();
if (NowYear <2000)
NowYear=1900+NowYear;
Today = null;
Hourleft = 23 - NowHour
Minuteleft = 59 - NowMinute
Secondleft = 59 - NowSecond
Yearleft = 2009 - NowYear
Monthleft = 12 - NowMonth - 1
Dateleft = 31 - NowDate
if (Secondleft<0)
{
Secondleft=60+Secondleft;
Minuteleft=Minuteleft-1;
}
if (Minuteleft<0)
{
Minuteleft=60+Minuteleft;
Hourleft=Hourleft-1;
}
if (Hourleft<0)
{
Hourleft=24+Hourleft;
Dateleft=Dateleft-1;
}
if (Dateleft<0)
{
Dateleft=31+Dateleft;
Monthleft=Monthleft-1;
}
if (Monthleft<0)
{
Monthleft=12+Monthleft;
Yearleft=Yearleft-1;
}
Temp=Yearleft+'年, '+Monthleft+'月, '+Dateleft+'天, '+Hourleft+'小时, '+Minuteleft+'分, '+Secondleft+'秒'
document.form1.left.value=Temp;
timerID = setTimeout("showtime()",1000);
timerRunning = true;
}
var timerID = null;
var timerRunning = false;
function stopclock () {
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}
function startclock () {
stopclock();
showtime();
}
// -->
</script>
|( 京ICP备09078825号 )
发表于 2017-5-30 00:38:33
收藏
