JS简单特效

最新推荐文章于 2021-11-20 16:56:49 发布
最新推荐文章于 2021-11-20 16:56:49 发布
阅读量1.3k 收藏 1
点赞数
文章标签： button input javascript 浏览器 百度 filter
 

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)}">

peng_hai_lin
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
网站设计之常见简单实用的JavaScript特效总结（上篇）
杨秀璋的专栏
12-19 1万+
这篇主要是总结JavaScript常见简单实用的特效，主要从代码量短、简单实用几个方面进行叙述。其中特效包括： 1.鼠标悬停图片切换查看器； 2.鼠标移动图片放大； 3.鼠标移动切换内容； 4.贵财下拉菜单案例； 5.JS图片放大镜功能-类似淘宝； 6.下一页翻页跳转功能。 下载地址： 希望文章对你有所帮助，尤其是学习前端JavaScript的同学。
这么优秀的几个库，想必你也需要！
weixin_46837985的博客
12-17 326
前言一个好的前端界面中很重要的内容就是动画，使用符合场景的动画不仅可以优化网站页面中的交互细节，提高用户体验，还可以让页面更具有吸引力，给网站带来更多访问量。如果你还不具备手写各种骚动画...
js常见特效
m0_52610047的博客
11-20 1861
选项卡 【重：设置自定义索引】 思路： ①自定义索引 排他思想： ②干掉所有人：先将所有按钮的类名都清空，内容隐藏none（for循环） ③复活我自己：之后给当前点击的按钮添加类名，将对应的内容通过自定义索引显示出来 <div id=container> <div id="title"> <div class="active">标题1</div> ...
JavaScript实现简单星星闪烁特效
baidu_35267690的博客
01-30 9797
最近学JavaScript，写了一个简单的星星闪烁动画，记录一下思路。 一、画canvas 1、HTML部分 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;star&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;canvas id="can"
js最简单的几个特效_作为前端入门，有没有必要学习高难度css和js特效？
weixin_39665507的博客
12-03 196
熟悉web前端的人都知道，CSS和JS是前端中两个非常重要的知识点，对于刚刚学习web前端的新手小白来说，有没有必要花费大量的精力去学习CSS和JS呢？首先这个问题就很矛盾，问题中有两个词：“入门”，“高难度”。我们先来说说入门，指的是知识或业务的初始门路。我们都知道现在前端市场要求还是比较高的(要求会各种库和框架、对底层原理的理解等等)。但是所有的框架和库都是来自最基础的HTML、CSS、JS，...
整理1500个JS特效源码
最新发布
02-04
在这个名为"1500个JS特效源码"的资源中，包含了丰富的JavaScript特效示例，涵盖了网页设计中的多种常见效果。 首先，我们要了解JS特效在网页开发中的重要性。JavaScript可以处理用户输入、控制多媒体、进行动画制作...
基于Javascript简单计算器特效
06-01
总的来说，"基于Javascript简单计算器特效"项目是一个典型的前端开发实例，结合了HTML5、CSS3和JavaScript的基本应用。通过这个项目，你可以学习到如何使用这些技术来创建交互式的网页元素，同时也锻炼了事件处理、...
JavaScript实现的简单烟花特效代码
10-23
主要介绍了JavaScript实现的简单烟花特效代码,涉及JavaScript数学运算及页面元素基于定时函数运动的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
js特效代码大全
07-06
"js特效代码大全"这个资源集合了多种JavaScript特效的源码，对于开发者来说，是提升技能和加快项目进度的重要参考资料。下面将详细探讨JavaScript特效及其相关知识点。 1. **DOM操作**：JavaScript通过Document ...
js特效（40套）
11-09
好看的js特效，包含40套js特效，可以直接浏览，使用时将js引入即可
Js实现简单的小球运动特效
10-22
主要介绍了Js实现简单的小球运动特效的相关资料,需要的朋友可以参考下
实用简单的js特效
11-27
一些js实用的特效，适合新手学习，按钮，滚动图片，都是学生大家一起分享，谢谢。
js实现页面等待特效
05-04
点击链接,提交的等待时间内出现等待的页面特效! 如:进度条,圆圈...
js 特效 html 特效 简单的窗口效果
08-17
js 特效 html 特效 简单的窗口效果 js 特效 html 特效 简单的窗口效果
操作元素之修改样式属性
leechoy
06-12 631
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>..
通过js实现简单的动画效果
cjx1997的博客
10-28 5751
又是一个非常无脑的东西不过一个简单的平移我居然写了快两小时被自己蠢哭了= =。 虽然只是一个非常简单的动画效果不过通过这两个小时踩了许多坑之后也算是对js的一些机制有更明确的认识。——–特别是关于获取样式的问题： 在没有通过dom为样式赋值之前无法通过dom获取样式属性即使该样式属性已经在样式表中被定义过！！ 嗯这个问题坑了我好久好久= =只要没有通过dom为指定样式赋值，那么 eleme
JavaScript网页简单特效
笺赕
07-07 3296
1、自动刷新页面2、让页面后退和前进3、动态关闭页面4、页面载入等待页面5、若干秒后不操作自动关闭窗口
用JS实现网页中的简单特效动画
weixin_43339093的博客
11-24 2322
1、自动刷新页面 ==注意：==重点是meta元素，其属性“HTTP-EQUIV”设置为refresh时，会自动刷新当前页面，此属性包含两个重要的设置：CONTENT和URL，CONTENT表示自动刷新的时间间隔，URL表示刷新后的页面地址。 2、让页面后退和前进 3、动态关闭页面 4、页面载入等待页面 5、若干秒后不操作自动关闭窗口 ...
简易的JavaScript文字跟随鼠标移动特效
热门推荐
BUG制造者:图图 <p>这是一个P标签</p>
08-17 1万+
呈上code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .sp{ font-size:30px; font-family: 楷体; color:#00A1d6; font-weight:700; position:absolute...
简单js彩色动态星空特效
05-19
以下是一个简单的 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、付费专栏及课程。

余额充值