![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js基础练习
小李要努力呀~
这个作者很懒,什么都没留下…
展开
-
用jquery编写折叠菜单
折叠菜单 编写网页,设置CSS完成折叠菜单的结构和样式设置。 通过层级选择器、基本过滤选择器以及查找的方法获取指定的元素对象。 CSS页面代码:<style> *{ margin: 0; padding: 0; } ul li{ list-style: none; } .menu{ width: 150px; margin: 30px 500px; bo.原创 2022-05-27 18:52:25 · 1371 阅读 · 0 评论 -
用正则表达式写出表单验证
表单验证 用户名:长度4~12,英文大小写字母。正则:/^[a-zA-Z]{4,12}$/。 密码:长度6~20,大小写字母、数字或下划线。正则:/^\w{6,20}$/。 确认密码:要求与密码框一样,且两次输入相同。正则:RegExp(‘^’ + 密码框的值 + '$') 手机号码:13、14、15、17、18开头的11位手机号。正则:/^1[34578]\d{9}$/。 邮箱:用户名 @ 域名(域名后缀至少2个字符)。正则:/^(\w+(_|-|.)*)+.原创 2022-05-08 17:13:52 · 2906 阅读 · 0 评论 -
用JS写出JS事件中京东图片放大特效
图片放大特效 准备两张相同的图片,小图和大图。 小图显示在商品的展示区域。 大图用于鼠标在小图上移动时,按比例的显示大图中的对应区域。 编写HTML页面,展示小图、隐藏鼠标的遮罩及大图。 当鼠标在小图上移动时,显示鼠标的遮罩和大图。 当鼠标移动时,让遮罩跟着在小图中进行移动。 限定遮罩在小图中的可移动范围。 根据遮罩在小图中的覆盖范围,按比例的显示大图。 CSS页面代码: <style > * {.原创 2022-05-06 10:13:57 · 355 阅读 · 0 评论 -
用JS写出正则表示式的内容查找与替换
内容查找与替换 编写HTML,定义两个文本域,一个用于用户输入,另一个用于显示按照要求替换后的过滤内容。 用户输入只要含有bad和任意中文字符,就利用*替换。 查找并替换的内容规则:/(bad)|[\u4e00-\u9fa5]/gi。 CSS页面代码:<style> textarea{ box-sizing: border-box; padding: 20px; } #text_filter{ ..原创 2022-05-06 10:02:30 · 1028 阅读 · 0 评论 -
用JS写出关于正则表达式的限定输入内容。
限定输入内容 编写HTML,设置一个年(份)和月(份)的文本框,以及一个查询按钮。 获取操作的元素对象,对表单的提交进行验证。 验证年份, 正则:/^\d{4}$/。验证月份,正则: /^((0?[1-9])|(1[012]))$/ 。 文本框获取焦点,去除提示框的颜色。文本框失去焦点,去除输入内容的两端的空白,并进行验证。 CSS页面代码: <style> .submit{ margin: 5px; } </style&.原创 2022-05-06 09:54:22 · 778 阅读 · 0 评论 -
用js编写DOM案例,生成一个彩色气泡,颜色、大小、位置、运动方向都随机的动态效果。
颜色数组 :var color = ["#f83600", "#FFF94C", "#0072ff", "#780206", "#7B920A", "#dc2430", "#A83279", "#00bf8f", "#FF512F", "#485563", "#061700", "#02AAB0"]CSS页面代码:<style> *{ margin: 0; padding: 0; } #box{ margin: 100px.原创 2022-04-28 13:39:12 · 649 阅读 · 0 评论 -
用JS实现缓动的小球的效果。
缓动的小球 缓动的实现原理:通过定时器连续的修改当前DOM元素的某个样式值,达到一个动态的特效。 缓动动画公式: 计算每次缓动的步长 step = ( target - leader ) / 10 计算下次的起始点 leader = leader + step target 表示目标点。 leader 表示起始点。 step 表示从起始点到目标点每次缓动的步长。而缓动特效在实现时,随着距离 target 越来越近,s.原创 2022-04-27 16:09:35 · 1711 阅读 · 0 评论 -
用js编写,鼠标拖拽特效。
盒子的位置(left和top值)= 鼠标的位置(left和top值)- 鼠标按下时与盒子之间的距离(left和top值)。 编写HTML,设计弹框用于实现拖拽特效。 为拖拽条添加mousedown事件及其处理程序。 处理鼠标移动事件,实现鼠标的拖拽的特效。 处理释放鼠标按键的事件,实现鼠标按钮松开后,弹框不再移动。 css页面代码: <style> *{ margin: 0; padding: 0; ...原创 2022-04-27 13:41:56 · 1345 阅读 · 0 评论 -
用JS编写,红绿灯倒计时:实现三色交通信号灯的亮灯的顺序一般为“绿->黄->红->绿”依次循环。亮灯时长需根据路口的实际情况等因素来考虑设置,如红灯亮为30秒,绿灯亮为35秒,黄灯亮为5秒。
CSS页面代码: <style> *{ margin: 0; padding: 0; } .signal-light{ width: 400px; margin: 100px auto 0; } .light{ display: flex; margin: 0 auto; width: 140px; height: 500px; flex-di原创 2022-04-22 11:08:43 · 5685 阅读 · 1 评论 -
用js编写,定时跳转:编写定时跳转的HTML页面。当秒数大于0时,利用 setTimeout() 循环倒计时;当秒数小于等于0时,利用 location.href 跳转到指定的URL地址中。
CSS页面代码:<style> *{ margin: 0; padding: 0; box-sizing: border-box; } .success{ width: 700px; height: 100px; margin: 100px auto; padding: 10px 15px; color: #3c763d; text-align: center原创 2022-04-22 10:02:22 · 680 阅读 · 0 评论 -
用js编写,京东限时秒杀:指定限时秒杀的结束时间,计算当前与秒杀结束的时间差,大于0计算剩余的时分秒;否则结束秒杀。利用定时器完成秒杀的倒计时。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>京东限时秒杀<.原创 2022-04-21 17:56:09 · 1623 阅读 · 0 评论 -
用js编写,定义一个对象,new出来的每一个实例都会生成一个彩色气泡,颜色、大小、位置、运动方向都随机的静态效果。
用js编写,定义一个对象,new出来的每一个实例都会生成一个彩色气泡,颜色、大小、位置、运动方向都随机的静态效果。原创 2022-04-19 13:36:28 · 126 阅读 · 0 评论 -
用js编写,自动生成一个表单。按照表单数据保存的分析,创建对象,保存相关数据。
var elements = [ {tag: 'input', text: '用户名', attr: {type: 'text', name: 'username'}}, {tag: 'input', text: '密码', attr: {type: 'password', name: 'userpass'}}, {tag: 'input', text: '确认密码', attr: {type: 'password', name: 'userpass_confirm'}}, ...原创 2022-04-18 13:57:42 · 1189 阅读 · 0 评论 -
用js编写,使用构造函数,自动生成一个表格,将考试的成绩表依次放入表格中。
var data = [ { StudentNumber: 2022003, Chinese: 86, Math: 64, English: 80, TotalScore: "", Comment: "" }, { StudentNumber: 2022004, Chinese: 78, Math: 99, English: 91, TotalScore: "", Comment: "" }, { StudentNumber: 2022005, Chinese: 107.5, Mat...原创 2022-04-18 14:00:31 · 939 阅读 · 0 评论 -
以下是某班级一次考试的成绩表。请计算每个学生总成绩,并按总成绩排名。统计各单科成绩第一名,输出其成绩与学号。
以下是某班级一次考试的成绩表。请计算每个学生总成绩,并按总成绩排名。统计各单科成绩第一名,输出其成绩与学号。并根据总成绩计算每个学生成绩备注保存在 Comment 中,110分以上为A,100分以上为B,90分以上为C,72分以上为D,72分以下为E原创 2022-04-15 17:06:33 · 2538 阅读 · 0 评论