效果

实现

1.新建目录douyin

2.在其下新建css目录

3.在css目录下新建main.css

@charset "utf-8";
/* CSS Document *//*电脑版本*/
@media screen and (min-width:501px){
.box{width: 600px;background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);border-radius: 10px;margin: 0 auto;color: aliceblue;margin: auto;position: absolute;top: 0;left: 0;right: 0;bottom: 0;}.box img{width: 200px;height: 200px;border-radius: 5px;}.box p{padding-top: 30px;font-weight: bold;}.bottom{margin-top:30px;width: 99%;height: 80px;}.left{display: inline-block;width: 150px;height: 40px;background-color: #5cb85c;border-color: #4cae4c;margin-right: 100px;border-radius: 5px;line-height: 40px;font-size: 18px;font-weight: bold;cursor: pointer;}.left:hover{background-color:#328732;}.right{cursor: pointer;display: inline-block;width: 150px;height: 40px;background-color: #c9302c;border-color: #ac2925;border-radius: 5px;line-height: 40px;font-size: 16px;}.right:hover{border-color:#B11C18;}
}
/*手机端*/
@media screen and (max-width:500px){.box{width: 100%;background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);margin: 0 auto;color: aliceblue;margin: auto;position: absolute;top: 0;left: 0;right: 0;bottom: 0;}.box img{width:150px;height: 150px;border-radius: 5px;}.box p{padding-top: 30px;font-weight: bold;}.bottom{margin-top:3%;width: 99%;height: 80px;}.left{display: inline-block;width: 40%;height: 40px;background-color: #5cb85c;border-color: #4cae4c;margin-right: 10%;border-radius: 5px;line-height: 40px;font-size: 18px;font-weight: bold;cursor: pointer;}.left:hover{background-color:#328732;}.right{cursor: pointer;display: inline-block;width: 40%;height: 40px;background-color: #c9302c;border-color: #ac2925;border-radius: 5px;line-height: 40px;font-size: 16px;}.right:hover{border-color:#B11C18;}}

js目录下新建yiqi.js

// JavaScript Document
var Dianji=0;
window.onload=function(){var buhao = document.getElementById("buhao");var hao = document.getElementById("hao");buhao.onclick=function(){Dianji++;if(Dianji==1){alert("小姐姐再考虑一下呗");}else if(Dianji==2){alert("你是我见过的最漂亮善良可爱的女孩子");}else if(Dianji==3){alert("一生一世爱你");}else if(Dianji==4){alert("家务我全干");}else if(Dianji==5){alert("不藏私房钱");}else if(Dianji==6){alert("房子写你名");}else if(Dianji==7){alert("工资全上交");Dianji=1;}}hao.onclick=function(){alert("你终于同意了，小姐姐我爱你");}}

5.在css同级目录下新建index.html

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name= "viewport"content="width=device-width, initial-scale=1">
<title>LOVE，小女神</title>
<link href="./css/main.css" rel="stylesheet">
<style></style></head><body><div class="box" align="center"><p>我观察你很久了</p><h1>小姐姐做我对象好不好?</h1><img src="./images/1.jpg"><div class="bottom"><div class="left" id="hao">好</div><div class="right" id="buhao">不好</div></div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a href="http://photosya.cn">返回主站</a></div><script type="text/javascript" src="./js/yiqi.js"></script></body>
</html>

6.在css同级目录下新建image目录，在此目录下存放照片

源码下载

https://download.csdn.net/download/badao_liumang_qizhi/10930308

JS实现抖音小姐姐表白源码相关推荐

用 Python 全自动下载抖音小姐姐视频（附源码）
作者:法纳斯特为什么写这篇文章,主要也是因为看了一篇文章. 「用Python在抖音扒了这些高颜值女神后,突然成了人生赢家」,文中简述了一名工程师利用Python+ADB+鹅厂的AI,一晚上关注了一千 ...
百度SEO站群在线随机看抖音快手小姐姐网站源码
这个是Pc电脑在线看抖音和快手视频源码,源码是php的,上传即可使用.里面有接口地址,也可以自己写~ 下载地址: http://www.bytepan.com/nwDwpaoDSPl 源码截图:
python爬取无水印抖音小姐姐视频(2018最新,含Pyqt客户端)
各位小伙伴,之前一段时间迷上了抖音小姐姐视频,但是下载的视频都有水印,于是自己用Python 写了个爬取小姐姐视频的工具,大家可以直接拷贝到自己编译器上运行.此外,我还利用pyqt5写了个操作界面,这 ...
价值1500的全新UI众人帮任务帮PHP源码/悬赏任务抖音快手头条点赞源码/带三级分销可封装小程序
xia 全新UI众人帮任务帮.悬赏任务抖音快手头条点赞PHP源码,带三级分销:某站售价1500元,后台Thinkphp,前端可封装打包,网页端加安卓苹果,可封装小程序. 功能介绍 1.支持用户发布任务 ...
php+api抖音随机播放视频源码
简介: php+api抖音随机播放视频源码,前端纯静态html+css,数据采用php+API接口调用第三方数据,不需要配置环境,上传即用. 源码体积小,视频采集自网络,无视频资源,内置多条播放线路. ...
抖音企业号抖音智能营销系统源码待开发技术。。。。。
抖音企业号抖音智能营销系统源码待开发技术:Symbol值通过Symbol函数生成.这就是说,对象的属性名现在可以有两种类型,一种是原来就有的字符串,另一种就是新增的Symbol类型.凡是属性名属于Sy ...
抖音seo账号矩阵源码系统搭建技术开发
抖音seo账号矩阵源码系统搭建, 抖音获客系统,抖音SEO优化系统源码开发,思路分享,分享一些开发的思路...... 账号矩阵霸屏系统源代码账号矩阵系统建设部署,短视频seo账号矩阵框架分析,开发语 ...
仿抖音短视频APP源码如何开发抖音类似特效
仿抖音短视频APP源码如何开发抖音类似特效 1.特效概览特效列表特效列表 2.『灵魂出窍』抖音的实现效果如下: 灵魂出窍我的实现效果如下: ezgif.com-rotate.gif 代码实现 ...
抖音账号矩阵系统/抖音seo霸屏系统/抖音矩阵seo系统源码/独立部署
抖音账号矩阵系统/抖音seo霸屏系统/抖音矩阵seo系统源码/独立部署,技术团队如何围绕抖音矩阵关键词霸屏来做开发?来做到抖音seo优化达到账号排名效果,关键词起到至关重要的作用,依托于抖音平台的正规 ...

JS实现抖音小姐姐表白源码

效果

实现

源码下载

JS实现抖音小姐姐表白源码相关推荐

最新文章

热门文章