RabiMew.github.io/index.html at master · RabiMew/RabiMew.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>NyakoのWindowsⅡk</title>
  <link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="win">
    <!-- 桌面 -->
    <div class="zhuomian">

      <!-- 第一列桌面图标 -->
      <div class="zhuomianCol">
        <!-- 快捷方式 -->
        <div class="kuaijiefangshi">
          <div class="kuaijiefangshiIcon"><img height="60px" width="60px" src="Icons/imageres_110.ico"/></div>
          <div class="kuaijiefangshiName"><span>我的电脑</span></div>
        </div>
        <div class="kuaijiefangshi">
          <div class="kuaijiefangshiIcon"><img height="60px" width="60px" src="Icons/imageres_25.ico"/></div>
          <div class="kuaijiefangshiName"><span>网络</span></div>
        </div>
        <div class="kuaijiefangshi">
          <div class="kuaijiefangshiIcon"><img height="60px" width="60px" src="Icons/imageres_55.ico"/></div>
          <div class="kuaijiefangshiName"><span>回收站</span></div>
        </div>
        <div class="kuaijiefangshi">
          <div class="kuaijiefangshiIcon"><img height="60px" width="60px" src="Icons/imageres_1003.ico"/></div>
          <div class="kuaijiefangshiName"><span>图库</span></div>
        </div>
      </div>

      <!-- 第二列桌面图标 -->
      <div class="zhuomianCol">
        <div class="kuaijiefangshi" v-bind:style="appNyakoRijiBackBlack" @dblclick="openAppNyakoRiji" @click="clickAppNyakoRiji">
          <div class="kuaijiefangshiIcon"><img height="60px" width="60px" src="Icons/imageres_1002.ico"/></div>
          <div class="kuaijiefangshiName"><span>猫猫日记</span></div>
        </div>
      </div>


      <!-- 猫猫日记app -->
      <div class="appNyakoRiji" v-if="isShowAppMaomaoRiji">
        <div class="appBiaotilan">
          <img height="22px" width="22px" src="Icons/imageres_1002.ico"/>
          猫猫日记
          <div class="appClose" @click="closeAppNyakoRiji">关闭</div>
        </div>
        <div class="appNeirong">
          <textarea class="appText">
    大+hao，i'm is a 🐱🐱。窝制作ing窝のwindows窗口主题の个人web站！
这里是第贰行
2022年3月28日，猫猫日记的功能终于完成啦，好累好困睡觉觉！
          </textarea>
        </div>
      </div>

      <!-- 开始菜单 -->
      <div class="kaishicaidan" v-if="isShowKaishicaidan" >
        <div class="zuobiandekuangkuang" ><span>&nbsp;WINDOWS 2000 NYAKO </span></div>
        <ul class="shangmian">
          <li>菜单项1</li>
        </ul>
        <ul class="zhongjian">
          <li>菜单项</li>
          <li>菜单项</li>
          <li>&nbsp;</li>
          <li>&nbsp;</li>
          <li>&nbsp;</li>
        </ul>
        <ul class="xiamian">
          <li>关机</li>
        </ul>
      </div>
    </div>

    <!-- 底部任务栏 -->
    <div class="renwulan">
      <div class="kaishibutton" v-bind:style="kaishiBackBlack" @click="dakaikaishicaidan">开始</div>
      <div class="kuaijiefangshi"> 🐱 🐕 🐖 </div>

      <div class="appNyakoRijiRenwulan" v-if="isShowAppMaomaoRiji" >
        <img height="22px" width="22px" src="Icons/imageres_1002.ico"/>
          <span>猫猫日记</span>
        </div>

      <div class="shijian" v-html="nowDate"></div>
    </div>
  </div>

  <!-- js -->
  <script src="js/vue.js"></script>
  <script src="js/script.js"></script>
  <script type="text/javascript">
    var kaishibutton = new Vue({
        el: '.win',
        data: {
            isShowKaishicaidan:false,
            isShowAppMaomaoRiji:false,
            nowDate:"",
            kaishiBackBlack:{
              background: "rgba(27, 29, 58, 0)",
            },
            appNyakoRijiBackBlack:{
              background: "rgba(27, 29, 58, 0)",
            },
        },
        methods:{
          // 应用猫猫日记被选中
            clickAppNyakoRiji:function() {
              if (this.appNyakoRijiBackBlack.background=="rgba(27, 29, 58, 0.507)") {
                this.appNyakoRijiBackBlack.background="rgba(27, 29, 58, 0)";
              } else {
                this.appNyakoRijiBackBlack.background="rgba(27, 29, 58, 0.507)";
              }
            },
            // 关闭和打开应用猫猫日记
            closeAppNyakoRiji:function() {
              this.isShowAppMaomaoRiji=false;
            },
            openAppNyakoRiji:function() {
              this.isShowAppMaomaoRiji=true;
            },
            dakaikaishicaidan:function(){
              if (this.isShowKaishicaidan) {
                // 如果开关是开着的，则关闭开关并将黑色的背景设置为完全透明
                this.isShowKaishicaidan=false;
                this.kaishiBackBlack.background="rgba(27, 29, 58, 0)";
              } else {
                //如果开关是关着的,则打开开关并将黑色的背景弄成黑色（打开了开始菜单，按钮为选中状态
                this.isShowKaishicaidan=true;
                this.kaishiBackBlack.background="rgba(27, 29, 58, 0.507)";
              }
            },
            currentTime:function() {
              setInterval(this.formatDate, 500);
            },
            formatDate:function() {
              let date = new Date();
              let year = date.getFullYear(); // 年
              let month = date.getMonth() + 1; // 月
              let day = date.getDate(); // 日
              let week = date.getDay(); // 星期
              let weekArr = [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ];
              let hour = date.getHours(); // 时
              hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
              let minute = date.getMinutes(); // 分
              minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
              let second = date.getSeconds(); // 秒
              second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
              this.nowDate = `${hour}:${minute}:${second} ${weekArr[week]}<br/>${year}/${month}/${day}`;
            },
        },
        mounted:function(){
          this.currentTime();
        },
            // 销毁定时器
        beforeDestroy:function() {
          if (this.formatDate) {
            clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
          }
        }
    });

    function stop() {
      return false;
    }
    document.oncontextmenu = stop;//禁止右键
  </script>


</body>

</html>