You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.
<!doctype html>
< html >
< head >
< title > 二维码生成器< / title >
< script src = "./qrcode.min.js" > < / script >
< style >
body {
font-family : 'Segoe UI' , Tahoma , Geneva , Verdana , sans-serif ;
background-color : #f4f4f4 ;
padding : 40 px ;
text-align : center ;
}
h2 {
color : #333 ;
}
. container {
background-color : #fff ;
padding : 30 px ;
border-radius : 10 px ;
box-shadow : 0 0 10 px rgba ( 0 , 0 , 0 , 0.1 ) ;
max-width : 1000 px ;
margin : 0 auto ;
}
# inputContent {
width : 100 % ;
height : 100 px ;
padding : 10 px ;
font-size : 16 px ;
border : 1 px solid #ccc ;
border-radius : 5 px ;
resize : none ;
margin-bottom : 20 px ;
}
button {
padding : 12 px 24 px ;
font-size : 16 px ;
background-color : #007bff ;
color : white ;
border : none ;
border-radius : 5 px ;
cursor : pointer ;
}
button : hover {
background-color : #0056b3 ;
}
# qrcode {
border : 1 px solid #ccc ;
margin-top : 20 px ;
display : block ;
margin-left : auto ;
margin-right : auto ;
}
. note {
margin-top : 15 px ;
font-size : 14 px ;
color : #666 ;
}
< / style >
< / head >
< body >
< div class = "container" >
< h2 > 请输入内容生成二维码：< / h2 >
< textarea
id = "inputContent"
placeholder = "输入文本或URL，
> < / textarea >
< button onclick = "generateQRCode()" > 生成二维码< / button >
< canvas
id = "qrcode"
width = "200"
height = "200"
> < / canvas >
< div class = "note" > 扫描二维码< / div >
< / div >
< script >
function generateQRCode ( ) {
let content = document . getElementById ( 'inputContent' ) . value ;
let canvas = document . getElementById ( 'qrcode' ) ;
// 清空 canvas
canvas . width = canvas . width ;
QRCode . toCanvas ( canvas , content , function ( error ) {
if ( error ) {
console . error ( '二维码生成失败:' , error ) ;
alert ( '二维码生成失败，请检查输入内容是否合法。' ) ;
} else {
console . log ( '二维码生成成功！' ) ;
}
} ) ;
}
< / script >
< / body >
< / html >