----上图

------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. 【STM32】SYSCLK配置|学习笔记

    一.RCC原理 所有stm32的外设都是挂载在相应的时钟上的,如下 挂载在AHB上的外设 挂载在APB1上的 APB2上的 所以RCC很重要,特别像TIM这种对时钟特别敏感的外设就必须把SYSCLK确 ...

  2. 二进制安装K8S kubctl get node 返回No resources found

    问题描述:node节点kubelet服务启动成功后,在集群master节点执行命令具体结果如下截图 原因:kubelet设置的cgroups和docker的不一致导致 修改docker的cgroup, ...

  3. Rsync已过时？替代文件同步软件了解一下

    随着企业结构分散化的不断扩大,企业内部和企业间的信息互动更加频繁.越来越多的企业要求内部各种业务数据在服务器.数据中心甚至云上能够有实时的同步留存.所以,企业需要文件同步软件,通过在两个或更多设备之间 ...

  4. 光纤加速卡第410篇：基于XCVU9P+ C6678的40G光纤的加速卡 光纤的加速卡 无线通信

    光纤加速卡第410篇:基于XCVU9P+ C6678的40G光纤的加速卡 光纤的加速卡 无线通信   基于XCVU9P+ C6678的40G光纤的加速卡 一.板卡概述 二.技术指标 •  板卡为自定义 ...

  5. redis acl 修改密码

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

  6. 【2020NOI.AC省选模拟#7】C. 逃课

    题目链接 原题解: 我们需要找出两个距离不超过$k-1$的位置,使他们的和尽量大. 被修改过得位置比较少,所以我们可以先求出连个位置都没有被修改过的答案,然后只关心那些涉及到至少一个被修改过的位置的方 ...

  7. AJAX-动力节点

    AJAX(Asynchronous Javascript And Xml) 传统请求及缺点 传统的请求都有哪些? 直接在浏览器地址栏上输入URL. 点击超链接 提交form表单 使用JS代码发送请求 ...

  8. [Unity3D 小Tricks] 如何修改Unity3d脚本默认模板？

    众所周知,unity默认的模板总是Update()和Start(),但往往我们并不需要,每次都要手动删除非常麻烦. 但可以更改如下模板文件 C:\Program Files\Unity 2020.3. ...

  9. Delphi7_VCL线程的使用（一）

    1.TThread类的属性 (1)FreeOnTerminate属性 该属性用于指定当前的线程终止时是否自动删除线程对象.默认值为true. 语法: 1 Property FreeOnTerminat ...

  10. 【七侠传】冲刺阶段--Day6

    [七侠传]冲刺阶段--Day6 团队成员 20181221曾宇涛 20181202李祎铭 20181209沙桐 20181215薛胜瀚 20181216杨越麒 20181223何家豪 20181232 ...