开发者社区> 问答> 正文

【精品问答】前端实战100例之JavaScript篇

前端实战100例之JavaScript篇

前端JavaScript部分入门的例题为大家总结了100个,每个例题都附有代码解析,方便入门学习或做基础巩固。

1.用JavaScript输出文本

2.用JavaScript改变HTML元素

3.一个外部JavaScript

4.JavaScript 语句

5.JavaScript 代码块

6.JavaScript 单行注释

7.JavaScript 多行注释

8.使用单行注释来防止执行

9.使用多行注释来防止执行

10.声明一个变量,为它赋值,然后显示出来

11.If 语句

12.If...else 语句

13.随机链接

14.Switch 语句

15.Alert(警告)框

16.带有换行的警告框

17.确认框

18.提示框

19.函数

20.带有参数的函数

21.带有参数的函数 2

22.返回值的函数

23.带有参数并返回值的函数

24.For 循环

25.循环输出 HTML 标题

26.While 循环

27.Do while 循环

28.break 语句

29.continue 语句

30.使用 For...In 声明来遍历数组内的元素

31.onclick事件

32.try...catch 语句

33.带有确认框的 try...catch 语句

34.onerror 事件

35.简单的计时

36.另一个简单的计时

37.在一个无穷循环中的计时事件

38.带有停止按钮的无穷循环中的计时事件

39.创建对象的实例

40.创建用于对象的模板

41.javascript 幻灯片代码(含自动播放)

42.CSS 日历样式

43.JavaScript 弹窗

44.JavaScript 图片弹窗

48.JavaScript Lightbox

46.javascript 搜索框自动提示

47.JavaScript 表格数据搜索

48.JavaScript 实现列表按字母排序

49.JavaScript 实现表格单列按字母排序

50.JavaScript 动画应用实例

51.JavaScript 进度条实例

52.JavaScript 百分比进度条

53.JavaScript/CSS 实现提示弹窗

54.HTML CSS, JavaScript 计算器

55.JavaScript 判断是否微信浏览器

56.Javascript 判断是移动端浏览器还是 PC 端浏览器

57.JavaScript 创建一个菜单搜索

58.JavaScript 按下回车(Enter)键触发按钮点击事件

59.JS 联想、自动补齐功能

60.JS/CSS 下拉菜单可进行搜索/过滤操作

61.JS/CSS 点击式导航栏下拉菜单

62.JS/CSS 点击式下拉菜单 - 右对齐

63.JS/CSS 全屏幕导航 – 从上到下动画

64.JS/CSS 右侧侧边栏

65.JS/CSS 侧边栏 - 无动画效果

66.JS/CSS 全屏幕侧边栏

67.JS/CSS 侧边栏动画实例 - 页面主体内容黑色透明背景

68.JS/CSS 侧边栏动画实例 - 页面主体内容向右移动

69.JS/CSS 响应式顶部导航样式实例

70.JS/CSS 各种操作信息提示效果

71.JS/CSS 在屏幕底部弹出消息(snackbar)

72.JS/CSS 登录表单

73.JS/CSS 注册表单

74.JavaScript 计算器(倒计时)

75.JS/CSS 菜单按钮切换(打开/关闭)

76.JS/CSS 手风琴动画效果

77.JS/CSS 选项卡 – 幻灯片效果

78.JS/CSS 选项卡 – 垂直方向

79.JS/CSS 选项卡 – 设置关闭按钮

80.JS/CSS 选项卡 – 设置默认选项

81.JS/CSS 选项卡 – 淡入效果

82.JS/CSS 选项卡

83.JS/CSS 带图标手风琴动画效果

84.正则表达式验证

85.reload 方法,强迫浏览器刷新当前页面

86.在选中的元素上绑定事件和通过代理绑定事件的区别

87.解决slideDown()和slideUp()鼠标快速移入移出,出现反复执行的问题

88.给 select 标签 option 内容加链接

89.阻止事件默认行为和阻止事件冒泡

90.addEventListener 和 on 区别

91.addEventListener 和 attachEvent 区别

92.鼠标事件属性

93.键盘事件属性

94.Call 和 Apply 的区别

95.Null 和 Undefined

96.事件捕获和事件冒泡

97.jQuery中attr和prop的区别

98.js 中 Error 错误

99.返回顶部

100.web应用整体性能的考虑

技术交流群

加入阿里云钉钉群享福利:每周技术直播,定期群内有奖活动、大咖问答

image

展开
收起
珍宝珠 2020-02-14 15:10:57 8448 0
1 条回答
写回答
取消 提交回答
问答排行榜
最热
最新

相关电子书

更多
JavaScript异步编程 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载