JS简单特效

 

1.关闭页面:
<a href=javascript:close()>[关闭窗口]</a>
2.调整页面大小
<input type="button" value="调节到宽200 300" οnclick=window.resizeTo(200,300)>
3.历史按钮
<input type="button" value="后退" οnclick="history.go(-1)">
<input type="button" value="刷新" οnclick="history.go(0)">
<input type="button" value="前进" οnclick="history.go(1)">
4.发送邮件
<a href="mailto:simlink_xumiao@163.com">给我发邮件</a>
5.冻结按钮
<input type="button" value="此按钮不可用" disabled>
6.链接注释(鼠标放到链接上时会显示)
<a href="http://www.baidu.com" title="链接到百度">百度</a><br>
7.滚动文字
<marquee direction="down" scrollamount=3 width=400 height=300 οnmοuseοver="this.stop()" οnmοuseοut="this.start()">
滚动文字,还可以加图片<br>
<a href="http://baike.baidu.com/view/1214012.htm">更多内容请点此处</a>
</marquee>
7.获得键盘所点击的值
<body οnkeydοwn=alert("键值是:"+window.event.keyCode)>请单击键盘试试
8.四种弹出框
<input type=button value=alert οnclick=alert("这是第一种")>
<br><input type=button value=confirm οnclick=confirm("这个是第二种")>
<br><input type=button value=prompt οnclick=prompt("这个是第三个","好不好玩呀?")><br>
<input type=button value=open οnclick=window.open(" http://www.baidu.com")>
9.表格变色
<table border=1 width=50 height=40>
<tr>
<td οnmοuseοver=this.style.backgroundColor="red" οnmοuseοut=this.style.backgroundColor="#dddddd">文字</td>
</tr>
</table>
10.掐死text
<input type=text οnfοcus=this.blur() value=不能操作 style=background-color:#d9992f>
11.打印输出
<input type=button value=打印本页 οnclick=window.print()>
12.获得keyCode
<script>
function look(){
if(event.keyCode=123){window.print()} //123是F12的keyCode
}
document.οnkeydοwn=look
</script>
13.获得浏览器信息
<script>
document.write("你的浏览器是"+navigator.appName+" "+navigator.appVersion);
</script>
14.交互文字
<input type=text name=ee>
<input type=button value=写入 οnclick="Info.innerHTML=ee.value">
<p><br>
<center><span id=Info style=filter:glow (color=orange);width:100%;font-size:25pt></span>
</center>
</p>
15.自动选中
<input type="text" οnmοuseοver=this.select() οnmοuseοut=this.focus() value="username">
16.返回到页面的顶部或底部
<input type=button value=下滚屏 οnclick="for(i=1;i<=750;i++){parent.scroll(1,i)}">
<br><p>1<br><p>2<br><p>3<br><p>4<br><p>5<br><p>6<br><p>7<br><p>8<br><p>9<br>

<p>0<br><p>1<br><p>2<br><p>3<br><p>4
<input type=button value=上滚屏 οnclick="for(I=750;I>1;I=I-1){parent.scroll(1,I)}">

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单JavaScript 彩色动态星空特效: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>彩色动态星空特效</title> <style> body { margin: 0; padding: 0; } canvas { display: block; } </style> </head> <body> <canvas id="canvas"></canvas> <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // 设置画布尺寸 canvas.width = window.innerWidth; canvas.height = window.innerHeight; // 随机生成星星的位置、颜色和大小 var stars = []; for (var i = 0; i < 100; i++) { var x = Math.random() * canvas.width; var y = Math.random() * canvas.height; var radius = Math.random() * 3 + 1; var color = 'rgb(' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ')'; stars.push({ x: x, y: y, radius: radius, color: color }); } function draw() { // 清空画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 绘制星星 for (var i = 0; i < stars.length; i++) { var star = stars[i]; ctx.beginPath(); ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2, false); ctx.fillStyle = star.color; ctx.fill(); } // 让星星动起来 for (var i = 0; i < stars.length; i++) { var star = stars[i]; star.x += Math.random() * 2 - 1; star.y += Math.random() * 2 - 1; if (star.x < 0) { star.x = canvas.width; } if (star.x > canvas.width) { star.x = 0; } if (star.y < 0) { star.y = canvas.height; } if (star.y > canvas.height) { star.y = 0; } } // 每秒钟重绘一次画布 setTimeout(draw, 1000 / 60); } draw(); </script> </body> </html> ``` 代码解释: 1. 首先创建一个 canvas 元素,并设置它的尺寸为窗口大小。 2. 随机生成一些星星的位置、颜色和大小,并存储在一个数组中。 3. 编写一个绘制函数,用于清空画布、绘制星星和让星星动起来。 4. 在绘制函数中将画布清空,然后循环遍历星星数组,绘制每个星星。 5. 在绘制函数中也循环遍历星星数组,让每个星星的位置随机变化,并且如果越界了就移动回屏幕内。 6. 最后在绘制函数中使用 setTimeout() 方法每秒钟重绘一次画布,从而达到动态效果。 你可以将以上代码复制到一个 HTML 文件中并在浏览器中打开,就可以看到彩色动态星空特效了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值