JavaScript
关注
分享
扫一扫
文章平均质量分 58
各种JavaScript网页小代码
风筱默染
喜欢打游戏，打羽毛球，数码圈发烧友。爱好：学JavaScript和vue。
展开
-
多张图片轮播
```html<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Bootstrap 实例 - 轮播（Carousel）插件的标题</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <s..原创 2022-05-12 17:17:10 · 287 阅读 · 0 评论 -
HTMl图片旋转
效果图：代码：<!DOCTYPE html><html><head><meta charset="utf-8"><title>图片旋转</title><style type="text/css">.a1{ animation: aa1 4s linear infinite;}@keyframes aa1{ from {transform: rotate(0deg);} to {transform:原创 2021-12-23 11:26:53 · 1337 阅读 · 0 评论 -
JavaScript常用正则表达式
一、校验数字的表达式数字：^[0-9]*$n位的数字：^\d{n}$至少n位的数字：^\d{n,}$m-n位的数字：^\d{m,n}$零和非零开头的数字：^(0|[1-9][0-9]*)$非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(\.[0-9]{1,2})?$带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})$正数、负数、和小数：^(\-|\+)?\d+(\.\d+)?$有两位小数的正实数：^[0-9]+(\.[0-9]{2})?$原创 2021-12-21 19:26:25 · 114 阅读 · 0 评论 -
js毛利率计算
效果如图：<!DOCTYPE html><html><head><meta charset="utf-8"><title>毛利率计算器</title><style type="text/css"></style></head><body> 成本 : <input type="number" name="cost" id="cost" value="" />原创 2021-12-20 17:27:56 · 1231 阅读 · 0 评论 -
css流星雨
<!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>css原创 2021-12-09 14:49:55 · 973 阅读 · 0 评论 -
JS获取天气
第一种方法：效果如图：代码：<!DOCTYPE html><html><head></head><title></title><body><iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=7" style="border:solid 1px #7ec8ea" width="250" hei原创 2021-11-23 14:43:33 · 6959 阅读 · 8 评论 -
圆形导航收缩菜单
<!DOCTYPE html><html><head><meta charset="utf-8"><title>圆形导航-径向收缩菜单</title><style type="text/css">*{ margin: 0; padding: 0; box-sizing: border-box;}body{ display: flex; justify-content: center; align-原创 2021-11-22 10:27:30 · 281 阅读 · 0 评论 -
图片点击放大
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><style>.img_content { display: none; position: absolute; margin: 5% 0 0 40%; background-color: white; z-index:1002;原创 2021-11-22 09:37:03 · 402 阅读 · 0 评论 -
js粒子漩涡
<!doctype html><html> <head> <meta charset="utf-8"> <title>漩涡粒子</title> <style> html, body { margin: 0px; width: 100%; height: 100%; overflow: hidden; background: #000; } #ca原创 2021-11-22 09:34:57 · 216 阅读 · 0 评论 -
JavaScript正则表达式
1 用户名正则//3到15位（字母，数字，下划线，减号）/^[a-zA-Z0-9_-]{3,15}$/2 密码强度正则//密码强度正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符/^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/3 Email正则/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/4 手机原创 2021-11-19 11:33:29 · 357 阅读 · 0 评论 -
JavaScript表单验证
效果如下图所示：代码：<!DOCTYPE html><html> <head> <title>表单校验</title> <meta charset="UTF-8"/> <style type="text/css"> .success{color: green;} .error{color: red;} #sub{width: 100px;font-size: 20px;} <原创 2021-11-17 13:48:54 · 689 阅读 · 0 评论 -
JS事件大全
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>js鼠标事件</title> </head> <body> <input type="button" name="" id="" value="单机" onclick="danji()"/> <input type="button" name="" id=原创 2021-11-16 14:29:13 · 917 阅读 · 0 评论 -
JavaScript打点计时器
<!DOCTYPE html><html><head><meta charset="utf-8"><title>打点计时器</title></head><body><script type="text/javascript">//每隔 100 毫秒 打印 一个数字，每次数字增幅 1.// setTimeout()方法function count(start, end) {原创 2021-11-10 14:13:02 · 756 阅读 · 0 评论 -
HTML的单位
1、px：相对长度单位。像素px是相对于显示器屏幕分辨率。2、em：相对长度单位。相对于当前对象内文本的字体尺寸。3、rem：相对长度单位。相对于根元素html的字体大小。4、vh ：相对于视窗口的高度。1vh 等于1/100的视窗口高度。5、vm ：相对于视窗口的高度。1vm 等于1/100的视窗口宽度。...原创 2021-11-09 11:38:13 · 2218 阅读 · 0 评论 -
JavaScript添加数据
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>添加</title> </head> <body> <form> 姓名：<input type="name" name="姓名" id="name" /><br /> 成绩：<input type="number" name原创 2021-10-22 17:40:14 · 631 阅读 · 0 评论 -
input密码输入框的显示与隐藏
<!DOCTYPE html><html> <head> <title></title> <style type="text/css"> img { vertical-align:top; width: 25px; } </style> </head><body> <input type="text" placeholder="账号" />原创 2021-09-30 17:40:21 · 2769 阅读 · 0 评论 -
HTML中设置属性时写px和不写的区别
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>样式区别</title> <style type="text/css"> #box{ width: 400px; height: 400px; border: 2px red solid; } #box1{ width: 100px;原创 2021-09-29 14:56:43 · 1178 阅读 · 0 评论 -
JavaScript验证码
<!Doctype html><html> <head> <title>js验证码</title> <style type="text/css"> .code { font-family: Arial; font-style: italic;/*字体倾斜*/ color: blue; font-size: 30px; border: 0; padding: 2px 3px原创 2021-09-26 15:09:30 · 120 阅读 · 0 评论 -
怎么添加数据
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>添加</title> </head> <body> <form> 姓名：<input type="name" name="姓名" id="name" /><br /> 成绩：<input type="number" name原创 2021-09-26 14:55:40 · 188 阅读 · 0 评论 -
HTML十二生肖
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> ????????????????<br> ????????????????<br> ???????????????? </body></html>效果如图..原创 2021-09-26 14:14:48 · 512 阅读 · 0 评论 -
JavaScript屏蔽敏感词
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>屏蔽敏感词</title> <style type="text/css"> input,textarea { width: 200px; height: 50px; font-size: 20px; } </style></head&原创 2021-09-26 11:51:06 · 691 阅读 · 1 评论 -
数据双向绑定
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><style type="text/css">*{ margin:20px auto; padding: 0; font-size: 20px; } body{ width: 500px; height:原创 2021-09-24 16:04:18 · 70 阅读 · 0 评论 -
九九乘法表
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>九九乘法表</title> <style> div { width: 100px; display: inline-block; } table td { width: 100px; } </style> </head&g原创 2021-09-22 13:38:21 · 82 阅读 · 0 评论 -
JavaScript轮播图
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .aaa { width: 600px; height: 350px; position: relative;/*相对定位*/ margin: 50px auto;/*离顶部50px，并且居原创 2021-09-01 13:57:36 · 118 阅读 · 0 评论 -
JavaScript显示当前年月日和时间
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p id="time"></p> <script> function time(){ var date = new Date(); var year = date原创 2021-09-01 11:35:57 · 3068 阅读 · 0 评论 -
Javascript查询商品功能
这是没有点击查询的主界面图这是点击名称查询之后按照价格查询<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript查询功能</title> <style> body{ font-family: "微软雅黑"; font-size: 18px; } table {原创 2021-08-31 10:15:44 · 416 阅读 · 0 评论 -
JavaScript写一个随机点名网页
JavaScript写一个随机点名网页<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } #box { border: 1px solid black;/*设置盒子的边框和颜色*/ wi原创 2021-08-25 13:55:04 · 203 阅读 · 0 评论