----上图

------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 制作的随机密码生成器的更多相关文章

  1. 一起学HTML基础-利用CSS和JavaScript制作一个切换图片的网页

    由于个人原因,不详细写步骤 思路: 一.布局 二.制作图片区和按钮区的div及颜色.边框.背景属性等 三.用PS将四张图片剪切到同一个尺寸,重叠放置在图片切换区,透明度设置为0 四.点击对应按钮时,将 ...

  2. HTML-利用CSS和JavaScript制作一个切换图片的网页

    由于个人原因,不详细写步骤 思路: 一.布局 二.制作图片区和按钮区的div及颜色.边框.背景属性等 三.用PS将四张图片剪切到同一个尺寸,重叠放置在图片切换区,透明度设置为0 四.点击对应按钮时,将 ...

  3. HTML、CSS、JavaScript网页制作从入门到精通 (刘西杰) pdf扫描版彩色版​

    html.css.JavaScript网页制作从入门到精通中从基础知识开始讲起,如html的基本标记.文字与段落标记.表格标记.超链接标记……同时介绍了目前流行的web标准与css网页布局实例,以及基 ...

  4. 解耦HTML、CSS和JavaScript

    当前在互联网上,任何一个稍微复杂的网站或者应用程序都会包含许多HTML.CSS和JavaScript.随着互联网运用的发展以及我们对它的依赖性日益增加,设定一个关于组织和维护你的前端代码的计划是绝对需 ...

  5. 利用css+原生js制作简易钟表

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...

  6. 国内最火的 HTML、CSS、JavaScript 开源项目 Top 榜，你知多少？

    对于开发者而言,想要着手前端开发,HTML.CSS 和 JavaScript 是三项必备的基础技能.而如何事半功倍地掌握好这些知识?通过了解当下火热的开源项目不乏为最佳学习姿势.本文盘点国内评分最高且 ...

  7. HTML、 CSS、 JavaScript三者的关系 1

    HTML. CSS. JavaScript三者的关系 网页主要由三部分组成: 结构( Structure) . 表现( Presentation) 和行为( Behavior)    HTML —— ...

  8. 网页设计与开发——HTML、CSS、JavaScript (王津涛) pdf扫描版

    网页设计与开发——html.css.javascript从网页制作实际出发,除了详细地介绍html页面制作.css样式控制和javascript动态程序之外,还介绍了html 5.全书共分15章,各章 ...

  9. 网页设计与开发：HTML、CSS、JavaScript实例教程 (郑娅峰) pdf扫描版

    网页设计与开发:HTML.CSS.JavaScript实例教程从实用角度出发,详细讲解了HTML.CSS和JavaScript的基本语法和设计技巧,通过一个实用的班级网站的规划.设计.实现到发布过程, ...

  10. 使用JavaScript制作一个好看的轮播图

    目录 使用JavaScript制作出好看的轮播图效果 准备材料 1.图片若干张(包括轮播图和按钮的图片) 2.将按钮的图片应用到按钮上的CSS样式文件 3.实现轮播和点击跳转的JavaScript代码 ...

随机推荐

  1. RayLink测评 | 完全免费，功能超越同类付费远程控制软件!!

    *本文转载自自媒体[下1个好软件],作者:锋哥. 远程控制软件目前的需求非常大,因为某些原因,你可能得居家办公远程控制公司的电脑,又或者出差不再需要带笨重的笔记本办公,一台平板电脑远程就搞定等等. 但 ...

  2. WebService 客户端上传图片，服务器端接收图片并保存到本地

    需求:如题,C#本地要调用Webservice接口,上传本地的照片到服务器中: 参考:客户端: https://blog.csdn.net/tiegenZ/article/details/799276 ...

  3. 理解函数调用_arguments对象作为函数参数的别名

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. redis acl 修改密码

    #redis acl 修改密码 acl setuser readwrite on >111111111 ~* &* +@allacl setuser readonly on >11 ...

  5. springboot+vue本地部署

    springboot+vue本地部署 最近完成项目,需要部署到本地,期间遇到了一些问题,最后写下流程以作记录. springboot打包 这块的内容较为简单一般为在pom.xml中加入 <bui ...

  6. 实时平台-Flink篇

    Flink任务统一通过实时平台统一管理的好处不用多说,这里简单介绍下实时平台-Flink模块的功能以及实现. 主要分为两大块 一.任务管理 任务管理主要包括任务的提交.暂停.下线.重启.历史版本回滚. ...

  7. Lua监听事件观察者模式(多个监听者监听)

    fireEvent 产生事件,创建协程分发(在registerEventListener注册过的事件中通过事件名字找到对应的信息,然后执行对应模块的OnEvent函数),多个地方都注册了同一个事件的话 ...

  8. 杭电OJ--1048-C++实现

    #include <iostream>#include<vector>#include<string>#include<cctype>#include& ...

  9. Luogu P3368 【模板】树状数组 2 [区间修改-单点查询]

    P3368 [模板]树状数组 2 题目描述 如题,已知一个数列,你需要进行下面两种操作: 1.将某区间每一个数数加上x 2.求出某一个数的和 输入输出格式 输入格式: 第一行包含两个整数N.M,分别表 ...

  10. 解决idea中按退格键（Backspace）回到上一行问题

    开始学习java时,第一次用idea,该问题困扰一上午,网上也没有解决方案,最后自己摸索如下.打开File-> Settings->Editor->Smart Keys,将To pr ...