使用 HTML、CSS 和 JavaScript 制作的随机密码生成器
----上图
------MVC 创建的视图 ，视图名称为A
@{
Layout = null;
}
<!DOCTYPE html>
<style type="text/css">
* {
margin: 0;
padding: 0;
user-select: none;
box-sizing: border-box;
}
body {
background-color: #0581ca;
justify-content: center;
align-items: center;
display: flex;
min-height: 100vh;
}
.box {
background-color: white;
padding-top: 30px;
padding: 30px;
}
.box h2 {
margin-bottom: 40px;
text-align: center;
font-size: 26px;
color: #015a96;
font-family: sans-serif;
}
input {
padding: 20px;
user-select: none;
height: 50px;
width: 400px;
border-radius: 6px;
border: none;
border: 2px solid rgb(13, 152, 245);
outline: none;
font-size: 22px;
}
input::placeholder {
font-size: 23px;
}
#button {
font-family: sans-serif;
font-size: 15px;
margin-top: 40px;
border: 2px solid rgb(20, 139, 250);
width: 155px;
height: 50px;
text-align: center;
background-color: #0c81ee;
display: flex;
color: rgb(255, 255, 255);
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 7px;
}
.btn2 {
margin-left: 85px;
}
#button:hover {
color: white;
background-color: black;
}
</style>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>A</title>
</head>
<body>
<div class="box">
<h2> | 随机密码生成器</h2>
<input type="text" name="" placeholder="创建密码" id="password" readonly>
<table>
<th><div id="button" class="btn1" onclick="genPassword()">生成</div></th>
<th><a id="button" class="btn2" onclick="copyPassword()">复制</a></th>
</table>
</div>
</body>
</html>
<script src="~/Scripts/paw.js"></script>
----------创建paw.js 脚本------------
var password = document.getElementById("password");
function genPassword() {
var chars = "0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var passwordLength = 12;
var password = "";
for (var i = 0; i <= passwordLength; i++) {
var randomNumber = Math.floor(Math.random() * chars.length);
password += chars.substring(randomNumber, randomNumber + 1);
}
document.getElementById("password").value = password;
}
function copyPassword() {
var copyText = document.getElementById("password");
copyText.select();
copyText.setSelectionRange(0, 999);
document.execCommand("copy");
}
使用 HTML、CSS 和 JavaScript 制作的随机密码生成器的更多相关文章
- 一起学HTML基础-利用CSS和JavaScript制作一个切换图片的网页
由于个人原因,不详细写步骤 思路: 一.布局 二.制作图片区和按钮区的div及颜色.边框.背景属性等 三.用PS将四张图片剪切到同一个尺寸,重叠放置在图片切换区,透明度设置为0 四.点击对应按钮时,将 ...
- HTML-利用CSS和JavaScript制作一个切换图片的网页
由于个人原因,不详细写步骤 思路: 一.布局 二.制作图片区和按钮区的div及颜色.边框.背景属性等 三.用PS将四张图片剪切到同一个尺寸,重叠放置在图片切换区,透明度设置为0 四.点击对应按钮时,将 ...
- HTML、CSS、JavaScript网页制作从入门到精通 (刘西杰) pdf扫描版彩色版
html.css.JavaScript网页制作从入门到精通中从基础知识开始讲起,如html的基本标记.文字与段落标记.表格标记.超链接标记……同时介绍了目前流行的web标准与css网页布局实例,以及基 ...
- 解耦HTML、CSS和JavaScript
当前在互联网上,任何一个稍微复杂的网站或者应用程序都会包含许多HTML.CSS和JavaScript.随着互联网运用的发展以及我们对它的依赖性日益增加,设定一个关于组织和维护你的前端代码的计划是绝对需 ...
- 利用css+原生js制作简易钟表
利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
- 国内最火的 HTML、CSS、JavaScript 开源项目 Top 榜，你知多少？
对于开发者而言,想要着手前端开发,HTML.CSS 和 JavaScript 是三项必备的基础技能.而如何事半功倍地掌握好这些知识?通过了解当下火热的开源项目不乏为最佳学习姿势.本文盘点国内评分最高且 ...
- HTML、 CSS、 JavaScript三者的关系 1
HTML. CSS. JavaScript三者的关系 网页主要由三部分组成: 结构( Structure) . 表现( Presentation) 和行为( Behavior) HTML —— ...
- 网页设计与开发——HTML、CSS、JavaScript (王津涛) pdf扫描版
网页设计与开发——html.css.javascript从网页制作实际出发,除了详细地介绍html页面制作.css样式控制和javascript动态程序之外,还介绍了html 5.全书共分15章,各章 ...
- 网页设计与开发：HTML、CSS、JavaScript实例教程 (郑娅峰) pdf扫描版
网页设计与开发:HTML.CSS.JavaScript实例教程从实用角度出发,详细讲解了HTML.CSS和JavaScript的基本语法和设计技巧,通过一个实用的班级网站的规划.设计.实现到发布过程, ...
- 使用JavaScript制作一个好看的轮播图
目录 使用JavaScript制作出好看的轮播图效果 准备材料 1.图片若干张(包括轮播图和按钮的图片) 2.将按钮的图片应用到按钮上的CSS样式文件 3.实现轮播和点击跳转的JavaScript代码 ...
随机推荐
- k8s资源清单
资源清单就是k8s当中用来定义pod的文件,语法格式遵循yaml语法,在yaml当中可以定义控制器类型,元数据,容器端口号等等等....,也可以针对于清单对pod进行删除等操作. 我们可以用kubec ...
- shr8.2视图配置注意点
- JS 将伪数组转换成数组
在 JS 中,伪数组 是非常常见的,它也叫 类数组.伪数组可能会给 JS 初学者带来一点困扰. 本文将详细讲解 什么是伪数组,以及分别在 ES5 和 ES6 中将伪数组转换成真正的数组 . 什么是伪数 ...
- Echart 使用
查看前端面试题小程序 大量面试题和答案,请微信查看 // var list = [1,1,54,5,5,85,8,8,5,5,8,8,85,8,8,5,5,85,88,85,8,88,8,8,8,8, ...
- Docker--搭建 Python + Pytest +Allure 的自动化测试环境
本文参考:https://www.cnblogs.com/poloyy/p/13954637.html 下载Jenkins镜像 docker search jenkins 推荐使用第二个:docker ...
- element 表格show-overflow-tooltip的属性设置样式
在style标签中不要加scoped .el-tooltip__popper { max-width: 60% !important; } .el-tooltip__popper, .el-toolt ...
- npm config get prefer-offline
npm config get prefer-offline
- 不用画的动画——ShaderCp11
--20.9.14 Shader中主要有及两种动画,一种就是纹理动画还有一种就是顶点动画. 动画效果一般都需要把时间加入一些变量的计算,以便画面可以随时间发生变化.下面是Shader中的如何去访问时间 ...
- Python数据挖掘——银行分控模型的建立
数据初始化 import pandas as pd from keras.models import Sequential from keras.layers.core import Dense, A ...
- 在 Linux 上微调 Nginx 获得最佳性能的 8 种方法
转载来自:Linux迷链接:https://www.linuxmi.com/linux-nginx-performance.html NGINX 是一种流行的.免费的开源 Web 服务器.默认的 NG ...